Grow your CSS skills. Land your dream job.

HELP styling CSS list w/ images & text…

  • # August 21, 2009 at 3:37 pm

    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

    anyone?

    # August 26, 2009 at 3:16 pm

    So you’re expecting somebody to build the page for you? Can’t see that happening tbh.

    Do as much as you can and then come back when you get stuck. Any number of people will be more than happy to help you then.

    # August 26, 2009 at 4:41 pm

    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.

    # August 26, 2009 at 5:15 pm

    I don’t really know what your asking….. but…..look into un-ordered lists.

    once you got it all there make sure you have a class for the ul &/or li’s and make the css class work for you

    # August 26, 2009 at 5:20 pm

    Will do… thanks for your help.

    # August 26, 2009 at 5:28 pm

    wait I think i can see what your trying to do……

    ok, here is the deal.

    make a div for the image & another div for the description
    but style each div accordingly to make it fit & look how you want.
    make them classes e.g.
    div class="leftimage" etc

    your css should start like
    .leftimage { }

    hope this gets you started to give you ideas.

    # August 26, 2009 at 8:24 pm

    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:

    # August 27, 2009 at 2:34 am

    the header of the text???

    make sure there is no padding for the top part….. this may be inherited from something higher in the nesting, so check you do need it higher up, and if you do, make sure you make the element have padding-top:0px;

    # August 27, 2009 at 2:58 pm

    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…

    # August 27, 2009 at 3:12 pm

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

    # August 27, 2009 at 5:39 pm

    to help out with your code, make some divs have borders, so you can see if they are aligned…

    this will help you greatly

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".