Book Listing Alignment Issues

Windir19

10-26-2011, 05:34 PM

I have to make a book listing in the Ektron CMS where the image is displayed on the left with a title on the left with a link that (with Javascript) expands a div that contains the description with the book. The Javascript works but the CSS with the images included are funky.

http://i.imgur.com/5zRb7.jpg
Above is a drawn image of what I want.

http://i.imgur.com/rVul6.jpg
This is what I am getting.

I want the image to be contained with the text title and the [+] link. Incidentally the scheme works when expanded but not when it's collapsed.

Below is example code of what I am dealing with, I am pretty sure there is nothing wrong with the javascript but if there is a reason that you think it is just ask me for it. The "content" class is the div the javascript is meant to open up.

<style type="text/css">
{overflow: hidden !important;}

#booklist {

width: 450px;
}

#booklist img {
float: left;
position:relative;
height: 120px;
top:5px;
margin-top: 0;
padding: 5px;
}

#booklist h3
{
clear: both;
}

#booklist p, h3
{
margin-top: -2;
margin-left: 85px;
}

p.booktitle {
font-weight: bold;
margin-top: 0;
padding-top: 0;
}

div.item {
border-bottom:solid 1px #CDCDCD;
margin-bottom: 5px;
padding-bottom: 5px;
clear: both;
}

div.content {
clear: both;
text-align: justify;
}

div.title{
position:relative;
top:5px;
}
</style>
<h1>Learner Engagement Books</h1>
<h2>Bush Library Collection</h2>
<div id="booklist">
<div class="item"><img src="imgsrc"/>
<div class="title"><p class="booktitle">Advances in web-based education: personalized learning environments... </p><p><a id="header1" href="javascript: toggle2('content1','header1');">[+] Book Information</a>*</p>
</div>
<div id="content1" class="content" style="display: none; ">Description</div>
</div>
</div>

I have a work-around with tables but I know that is messy and usually undesirable so I wanted to ask some of the best if there is a better way. I have worked on this for days with two other guys that have some web design

Excavator

10-26-2011, 05:54 PM

Hello Windir19,
Whenever you put an image and text/links together, it's easiest to put them in the same container so they don't move away from each other.

Look at a captions made easy (http://nopeople.com/CSS%20tips/image%20captions/index.html) demo to see what I mean.

Windir19

10-26-2011, 06:02 PM

Excavator

10-26-2011, 06:28 PM

Sorry, didn't even look at your code...

I want the image to be contained with the text title and the [+] link. Incidentally the scheme works when expanded but not when it's collapsed.
You need to clear your floats. See this explanation of how overflow: auto; clears your floats (http://www.quirksmode.org/css/clearing.html).

You also have some minor errors in your code. See the links about validating in my signature line below.

Give this a try if you like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 25px;
background: #999;
}
#booklist {
width: 450px;
background: #ccc;
overflow: auto;
}
#booklist img {
height: 120px;
width: 70px; /*just guessing*/
float: left;
margin: 5px;
background: #f00; /*demo only*/
}
#booklist p, h3 {margin: -2px 0 0 85px;}
p.booktitle {font-weight: bold;}
div.item {
border-bottom: solid 1px #CDCDCD;
margin-bottom: 5px;
padding-bottom: 5px;
}
div.content {
text-align: justify;
}
div.title {margin: 5px 0 0 0;}
</style>
</head>
<body>
<div id="container">
<h1>Learner Engagement Books</h1>
<h2>Bush Library Collection</h2>
<div id="booklist">
<div class="item"><img src="imgsrc" alt="description"/>
<div class="title">
<p class="booktitle">Advances in web-based education: personalized learning environments... </p>
<p><a id="header1" href="javascript: toggle2('content1','header1');">[+] Book Information</a>*</p>
</div>
<div id="content1" class="content" style="display: none; ">Description</div>
</div>
</div>
</div>
</body>
</html>