Re: [css-d] Trouble styling a complex list item (includes illustration)

[Blake Haswell]

On 4/24/07, Gwyn Perry <[EMAIL PROTECTED]> wrote:
> I'm looking for the best way to do this (HTML+CSS), to work with
> modern browsers and degrade nicely for others.

This should work, and the code is about as minimal as it can be I
guess. This is just the bare bones, and obviously you can go ahead and
apply any colours or styles that you want.

HTML:
<div>
        <h4>Section Heading Goes Here</h4>
        <ul>
                <li>
                        <h5>Title Goes Here</h5>
                        <em>21 Apr</em>
                        <p>Lorem ipsum dolor sit amet, conse&hellip;</p>
                </li>
        </ul>
</div>

CSS:
div {
        width: 31em;
        margin: 1em;
}

ul {
        list-style: none;
}

li {
        position: relative; /* This is a positioning hook for the EM element */
        padding-left: 3em; /* Width of EM element + whatever space you want
around it */
}

em {
        position: absolute;
        top: 0;
        left: 0;
        width: 2em;
}

-- 
Australian Web Designer - http://www.blakehaswell.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/