- This topic is empty.
-
AuthorPosts
-
August 21, 2009 at 3:37 pm #25832Historical Forums UserParticipant
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.
August 26, 2009 at 2:32 pm #62768Historical Forums UserParticipantanyone?
August 26, 2009 at 4:41 pm #62771Historical Forums UserParticipantNot 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.
August 26, 2009 at 5:20 pm #62774Historical Forums UserParticipantWill do… thanks for your help.
August 26, 2009 at 8:24 pm #62778Historical Forums UserParticipantThanks 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.
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:
August 27, 2009 at 2:58 pm #62842Historical Forums UserParticipantSorry… 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…
August 27, 2009 at 3:12 pm #62844Historical Forums UserParticipantAh! I figured it out, it was a nesting issue… anyway, thanks very much for your helpful tips, I very much appreciate it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.