HELP styling CSS list w/ images & text…

[Historical Forums User]

Hi,

I’m new to both CSS and this forum and am looking for some help styling what I think is supposed to be a definition list (but am not sure…) I’ve attached an image of what I’m trying to accomplish.

So far this is what I have…

HTML:

Code:

// CONTENT/LIST WOULD GO HERE

CSS:

Code:

#content_container {
border:none;
position:absolute;
top:300px;
left:0px;
right:0px;
height:400px;
width:980px;
margin-left:auto;
margin-right:auto;
}

#content {
width:980px;
height:345px;
overflow: hidden;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
}

Although the height is different for each image, they are all 200px wide.

Also attached is a screenshot of the site, sans content.

[Historical Forums User]

anyone?

[Historical Forums User]

Not in the least…

Just looking for someone to help point me in the right direction… which is what I thought this form was for… maybe a tutorial link or possibly a comment on what the best approach might be…

I’ve sifted through the W3 CSS tutorials, google, etc. and can’t seem to find anything that specifically deals with what I’m trying to do.

Like I said, I’m new, I know there’s a lot of different ways to accomplish the same task with CSS and all I’m trying to do is figure out the best one.

[Historical Forums User]

Will do… thanks for your help.

[Historical Forums User]

Thanks again for your help…

I did exactly as you said and everything looks great, the only problem now is aligning the descriptions to the top of each image…

I was thinking the best way to do this would be to assign each image an id, then use the vertical-align:text-top; property to align the description’s to the images… but I’m not exactly sure of how to do this…

Here is the code:

HTML:

Code:

Morgan Maassen:

A multi talented, wise-beyond-his-years photographer and Santa Barbara native; shooting water housing, film, and all sorts of video formats.

http://www.Bogus-Media.com

Hiten Iyer:

The resident fish junkie, who truly can’t kick the habit. He will tell you all about String Theory and his latest surf experiment, and then pick off the wave of the day and make it all seem meaningless.

Hiten has been a guiding light and stoke generator in the water for years, and is a constant influence in the direction of Point Concept.

CSS:

Code:

#line
{
border-bottom: 2px dotted #7f7f7f;
width: 940px;
padding-top:20px;
margin-bottom:20px;
}

#content_crew {
width:980px;
height:345px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
line-height:18px;
overflow: hidden;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
}

.left_image {
float:left;
padding-top:0px;
width:218px;
}

.right_text {
float:right;
padding-top:0px;
padding-right:12px;
width:735px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
line-height:18px;
}

And a screenshot of what comes up:

[Historical Forums User]

Sorry… yes, the headers – the names that are in bold, at the top of each description – I’d like to figure out how to align them to the top of each image…

the div class #right_text has a padding-top value of 0pxs…

[Historical Forums User]

Ah! I figured it out, it was a nesting issue… anyway, thanks very much for your helpful tips, I very much appreciate it.

[Author]

Posts