SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Image on First List Item (inline list)

    Hi, I need a little bit of help structuring an inline list so that the first list item is preceded with an image & an h4 tag describing the list contents.

    There will be three lists so I can already tell that three classes need to be made to define the lists.

    The classes will be like so-
    .shop
    .info
    .web

    I have probably approached this all wrong so just keep in mind that lists are something that I haven't conquered yet and any different approaches to what I am trying to achieve are welcome.

    Here is the Demo Page of what I got so far in css.

    This is the Current Page of the list that was done in tables, if you go towards the bottom of the page you will see the three images that precede the lists categories above, "Shop" "Info" & "Web".

    Also you will notice that the second lines of each section are preceded with a round green dot image. That may wind up being a fourth class that can apply to all three lists.

    This turned out tougher than I anticipated, any help would be greatly appreciated.

    Thanks, Rayzur

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apply a specific id to each of headings then add a left padding and background image should be what your looking for!

    ie.
    Code HTML4Strict:
    <ul>
    <li><h4 id="shopIcon">describe</h4></li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>
    Code CSS:
    #shopIcon {
    padding-left:20px; /*not sure what the actually size of the image will be, just make sure the padding is greater than the width of the image*/
    background:url(yourimage/goeshere.jpg) no-repeat left center;

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks Siebird, I just now saw your approach to the list images. I had found a pretty simple solution to what I wanted to do and I have updated my demo link with it. I was kinda wanting to keep my image/paths in the css. It would require four more id's like your example shows. Not sure if it is worth the trade off though. I'll play around with your approach a little more and see what happens.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    If the first level is a heading then it should be a nested list as the heading refers to a subset.

    I would probably do it all as one nested list.

    e..g
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Footer Demo</title>
    <style type="text/css">
    /* ---------- ::Resets:: --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }
    body {
        background: #fff;
        margin:2.5&#37; auto;
        font:95% trebuchet,arial,tahoma;
        color:#333
    }
    h2,h3,h4,h5 {padding: 10px; text-align:center;}
    p {padding: 10px;}
    .floatleft {float: left;}
    .floatright {float: right;} 
    .clear {clear: both;}
    
    #wrapper {
        width: 95%;
        min-width: 770px;
        margin:0 auto;
        overflow:hidden;
        background: #E5FFBF;
        border: 1px solid green;
    }
    #content {
        margin:0 150px; /*---150px for Lt. &amp; Rt. Leaf Columns---*/
        background: #dcdcdc;
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
    }
    #leafup {
        position: relative;    
        min-height:157px;
        border-top: 1px solid green;
        margin-bottom: 20px; 
        clear:both;      
    }
    * html #leafup {height:158px;}
    .up-left {
        position:absolute;
        width:53px;
        height:177px;
        left:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;  
    }
    .up-right {
        position:absolute;
        width:53px;
        height:177px;
        right:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;   
    }
    #linkbox {
        margin:0 150px;
        background: #dcdcdc;
        margin-top:10px;   
    }    
    #botleaf {
        height:63px;
        border-top: 1px solid green;
        padding: 0 40px; /*--- position images lt &amp; rt ---*/
        border-bottom: 1px solid green;
    }
    .bot-left {
        float:left;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
    .bot-right {
        float:right;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
        /*====== End Bottom Leaf Positions ======*/ 
        /*====== Begin Footer Styles ======*/ 
    #botnav {
        margin:0 150px;
        min-height: 200px;
        border: 1px solid green;
        border-top: none;
    }
    * html #botnav {height:200px;}
    .bot-ebook {
        text-align:center;
        width:25em;
        margin:0 auto; 
        border:1px solid green;
        border-top:none;
    }
    #botnav h4 {color: #F00251;}
    
        /*==== Begin Footer List Styles ====*/
    .navlist ul {
        list-style-type: none;    
        margin: 0;
        padding: 0;
    }
    .navlist li {
        display: inline;
        padding: 2px;
        margin:0;
    }
    .navlist a {color: blue;}
    
    .navlist a:link, .navlist a:visited {
        text-decoration: none;
    }
    .navlist a:hover {
        color: #F00251;; 
        background:white;
        letter-spacing: 2px;
    }
    .intro {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
            display:inline;
    }
    .navlist ul{display:inline}
    .navlist li img{vertical-align:middle}
    .navlist ul ul{display:block;margin:0 0 20px 0}
        /*==== End Footer List ====*/
    
    .lastleaf {
        margin:0 auto;
        background: palegreen;
        padding:10px;
        width:300px; 
        height:67px;
        clear:both; 
    }
    
    #footer {
        height:40px;
        clear:both;
        background: #E5FFBF;
        text-align:center;
        border-top: 1px solid green;
    }
    #footer h5 {line-height:40px; padding:0;}
        /*====== End Footer Styles ======*/    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="content">
            <h3>Main Content Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus.</p>
        </div>
        <!-- end content -->
        <div id="leafup">
            <div class="up-left"></div>
            <div class="up-right"></div>
            <div id="linkbox">
                <h4>Helpful Links Below</h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>
            </div>
        </div>
        <!--end leafup-->
        <div id="botleaf">
            <div class="bot-left"></div>
            <div class="bot-right"></div>
        </div>
        <!--end botleaf-->
        <div id="botnav">
            <div class="bot-ebook">
                <h4>SAMPLE TEXT - SAMPLE TEXT !</h4>
                <form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi"/>
                <input type="hidden" name="flavor"
            value="subscribe"/>
                <input type="hidden" name="list" value="health"/>
                <input type="text" name="email" 
            value="enter email--strict privacy" size="24"/>
                <input type="submit" value="Send my eBook =&amp;gt;"/>
            </div>
            <br />
            <ul class="navlist">
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif"/></li>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif"/></li>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif"/></li>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="lastleaf"></div>
        <!--last-leaf: Do Not Disturb-->
        <div id="footer">
            <h5>footer stuff here</h5>
        </div>
    </div>
    <!-- end wrapper -->
    </body>
    </html>
    You could put the heading image in the background of the h4 and float the h4 left.

    The middit image oculd be in the background of the nested ul - no extra classes need at all.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    <title>Footer Demo</title>
    <style type="text/css">
    /* ---------- ::Resets:: --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }
    body {
        background: #fff;
        margin:2.5% auto;
        font:95% trebuchet,arial,tahoma;
        color:#333
    }
    h2,h3,h4,h5 {padding: 10px; text-align:center;}
    p {padding: 10px;}
    .floatleft {float: left;}
    .floatright {float: right;} 
    .clear {clear: both;}
    
    #wrapper {
        width: 95%;
        min-width: 770px;
        margin:0 auto;
        overflow:hidden;
        background: #E5FFBF;
        border: 1px solid green;
    }
    #content {
        margin:0 150px; /*---150px for Lt. &amp; Rt. Leaf Columns---*/
        background: #dcdcdc;
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
    }
    #leafup {
        position: relative;    
        min-height:157px;
        border-top: 1px solid green;
        margin-bottom: 20px; 
        clear:both;      
    }
    * html #leafup {height:158px;}
    .up-left {
        position:absolute;
        width:53px;
        height:177px;
        left:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;  
    }
    .up-right {
        position:absolute;
        width:53px;
        height:177px;
        right:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;   
    }
    #linkbox {
        margin:0 150px;
        background: #dcdcdc;
        margin-top:10px;   
    }    
    #botleaf {
        height:63px;
        border-top: 1px solid green;
        padding: 0 40px; /*--- position images lt &amp; rt ---*/
        border-bottom: 1px solid green;
    }
    .bot-left {
        float:left;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
    .bot-right {
        float:right;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
        /*====== End Bottom Leaf Positions ======*/ 
        /*====== Begin Footer Styles ======*/ 
    #botnav {
        margin:0 150px;
        min-height: 200px;
        border: 1px solid green;
        border-top: none;
    }
    * html #botnav {height:200px;}
    .bot-ebook {
        text-align:center;
        width:25em;
        margin:0 auto; 
        border:1px solid green;
        border-top:none;
    }
    #botnav h4 {color: #F00251;}
    
        /*==== Begin Footer List Styles ====*/
    .navlist ul {
        list-style-type: none;    
        margin: 0;
        padding: 0;
    }
    .navlist li {
        display: inline;
        padding: 2px;
        margin:0;
    }
    .navlist a {color: blue;}
    
    .navlist a:link, .navlist a:visited {
        text-decoration: none;
    }
    .navlist a:hover {
        color: #F00251;; 
        background:white;
        letter-spacing: 2px;
    }
    .intro {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
            display:inline;
    }
    .navlist ul{display:inline}
    .navlist li img{vertical-align:middle}
    .navlist ul ul{
        display:block;
        margin:0 0 20px 0;
        background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif) no-repeat 0 5px;
        padding:0 0 0 25px
    }
        /*==== End Footer List ====*/
    
    .lastleaf {
        margin:0 auto;
        background: palegreen;
        padding:10px;
        width:300px; 
        height:67px;
        clear:both; 
    }
    
    #footer {
        height:40px;
        clear:both;
        background: #E5FFBF;
        text-align:center;
        border-top: 1px solid green;
    }
    #footer h5 {line-height:40px; padding:0;}
        /*====== End Footer Styles ======*/    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="content">
            <h3>Main Content Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus.</p>
        </div>
        <!-- end content -->
        <div id="leafup">
            <div class="up-left"></div>
            <div class="up-right"></div>
            <div id="linkbox">
                <h4>Helpful Links Below</h4>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>
            </div>
        </div>
        <!--end leafup-->
        <div id="botleaf">
            <div class="bot-left"></div>
            <div class="bot-right"></div>
        </div>
        <!--end botleaf-->
        <div id="botnav">
            <div class="bot-ebook">
                <h4>SAMPLE TEXT - SAMPLE TEXT !</h4>
                <form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi"/>
                <input type="hidden" name="flavor"
            value="subscribe"/>
                <input type="hidden" name="list" value="health"/>
                <input type="text" name="email" 
            value="enter email--strict privacy" size="24"/>
                <input type="submit" value="Send my eBook =&amp;gt;"/>
            </div>
            <br />
            <ul class="navlist">
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="intro"><img alt="" src="http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif"/>Shop</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="lastleaf"></div>
        <!--last-leaf: Do Not Disturb-->
        <div id="footer">
            <h5>footer stuff here</h5>
        </div>
    </div>
    <!-- end wrapper -->
    </body>
    </html>
    Hope that gives you some ideas

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That's Great Paul, thats what I was after and it helps me get a better grasp on list styling.

    I went ahead and started building on your second example that sets the middot.gif as the bg image in the css. Setting all the images as bg's is really what I was after to begin with.

    I've put the three h4 classes in the css now and set bg's on them. I had trouble floating the h4 left though, It seemed to work easier just letting it naturally flow left as the first list item.

    One thing I noticed on both of your examples is that the very first shopping cart image goes further left than the two below it. (I'm using FF2)
    Another thing is that the last nested list doesn't have the same spacing between it and the parent. If you hover over one of the list items on the bottom you will see the bg color touch the list above. The first two list don't do that. It is something that happened after I set the new classes because your examples don't have that problem.

    Here is what I changed in the css, the .intro class has now been given the new h4 class names (the rules remained the same with the addition of new padding at the bottom to get the images out from underneath the title)

    Thanks for looking if you get the chance

    Code:
    .shop, .info, .web {  /* this was intro */
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
        display:inline;
        padding: 5px 0 0 35px;
    }
     .shop,.info,.web img {vertical-align:middle}
     .shop {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif) no-repeat 0 0;}
     .info {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-info.gif) no-repeat 0 0;}
     .web {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-web.gif) no-repeat 0 0;}
    
        /*==== End Footer List ====*/
    Complete Code Below
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="noindex,nofollow,noarchive" />
    
    <title>Footer Demo</title>
    
    <style type="text/css">
    /* ---------- ::Resets:: --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }
    body {
        background: #fff;
        margin:2.5% auto;
        font:95% trebuchet,arial,tahoma;
        color:#333
    }
    h2,h3,h4,h5 {padding: 10px; text-align:center;}
    p {padding: 10px;}
    .floatleft {float: left;}
    .floatright {float: right;} 
    .clear {clear: both;}
    
    #wrapper {
        width: 95%;
        min-width: 770px;
        margin:0 auto;
        overflow:hidden;
        background: #E5FFBF;
        border: 1px solid green;
    }
    #content {
        margin:0 150px; /*---150px for Lt. & Rt. Leaf Columns---*/
        background: #dcdcdc;
        text-align: justify;
        line-height: 1.25em;
        margin-bottom: 10px; 
        margin-top:20px;
    }
    #leafup {
        position: relative;    
        min-height:157px;
        border-top: 1px solid green;
        margin-bottom: 20px; 
        clear:both;      
    }
    * html #leafup {height:158px;}
    .up-left {
        position:absolute;
        width:53px;
        height:177px;
        left:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;  
    }
    .up-right {
        position:absolute;
        width:53px;
        height:177px;
        right:0;
        bottom:-20px; /*--pull down to allow for parents margin-bottom:20px--*/
        background: palegreen;   
    }
    #linkbox {
        margin:0 150px;
        background: #dcdcdc;
        margin-top:10px;   
    }    
    #botleaf {
        height:63px;
        border-top: 1px solid green;
        padding: 0 40px; /*--- position images lt & rt ---*/
        border-bottom: 1px solid green;
    }
    .bot-left {
        float:left;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
    .bot-right {
        float:right;
        width:200px;
        height:63px;
        background: palegreen ;
        margin:0;
    }
        /*====== End Bottom Leaf Positions ======*/ 
        /*====== Begin Footer Styles ======*/ 
    #botnav {
        margin:0 150px;
        min-height: 200px;
        border: 1px solid green;
        border-top: none;
    }
    * html #botnav {height:200px;}
    .bot-ebook {
        text-align:center;
        width:25em;
        margin:0 auto; 
        border:1px solid green;
        border-top:none;
    }
    #botnav h4 {color: #F00251;}
    
        /*==== Begin Footer List Styles ====*/
    .navlist ul {
        list-style-type: none;    
        margin: 0;
        padding: 0;
    }
    .navlist li {
        display: inline;
        padding: 2px;
        margin:0;
    }
    .navlist a {color: blue;}
    
    .navlist a:link, .navlist a:visited {
        text-decoration: none;
    }
    .navlist a:hover {
        color: #F00251;; 
        background:white;
        letter-spacing: 1px;
    }
    .navlist ul {display:inline}
    .navlist li img {vertical-align:middle}
    .navlist ul ul {
        display:block;
        margin:0 0 20px 0;
        background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif) no-repeat 0 5px;
        padding:0 0 0 25px;
    }
    .shop, .info, .web {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
        display:inline;
        padding: 5px 0 0 35px;
    }
    .shop,.info,.web img {vertical-align:middle}
    .shop {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-shop.gif) no-repeat 0 0;}
    .info {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-info.gif) no-repeat 0 0;}
    .web {background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-web.gif) no-repeat 0 0;}
    
        /*==== End Footer List ====*/
        /*==== End Footer List ====*/
    
    .lastleaf {
        margin:0 auto;
        background: palegreen;
        padding:10px;
        width:300px; 
        height:67px;
        clear:both; 
    }
    
    #footer {
        height:40px;
        clear:both;
        background: #E5FFBF;
        text-align:center;
        border-top: 1px solid green;
    }
    #footer h5 {line-height:40px; padding:0;}
        /*====== End Footer Styles ======*/    
    
    </style>
    </head><body>
    
    <div id="wrapper">
            <div id="content">       
                <h3>Main Content Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>
                
            </div> <!-- end content -->
           <div id="leafup"> 
                    <div class="up-left"></div>
                    <div class="up-right"></div>
                <div id="linkbox">  
                    <h4>Helpful Links Below</h4>                
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
                    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
                    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
                    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                    adipiscing mauris, a nonummy diam ligula ut risus.</p>
                    
                </div>
            </div><!--end leafup-->
            <div id="botleaf">
                <div class="bot-left"></div>
                <div class="bot-right"></div>
            </div><!--end botleaf-->   
        <div id="botnav">
        <div class="bot-ebook">
            <h4>SAMPLE TEXT - SAMPLE TEXT !</h4>
            <form action="http://www.eatsprouts.com/cgi-bin/dada/mail.cgi"/><input type="hidden" name="flavor"
            value="subscribe"/><input type="hidden" name="list" value="health"/><input type="text" name="email" 
            value="enter email--strict privacy" size="24"/><input type="submit" value="Send my eBook =&gt;"/>
        </div>    
            <br />
            <ul class="navlist">
                <li>
                    <h4 class="shop">Shop -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="info">Info -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="web">Web -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="lastleaf"></div>
        <!--last-leaf: Do Not Disturb-->
        <div id="footer">
            <h5>footer stuff here</h5>
        </div>
    </div>
    <!-- end wrapper -->
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    One thing I noticed on both of your examples is that the very first shopping cart image goes further left than the two below it. (I'm using FF2)
    I must admit I didn't notice that but we need to set the first list to display:block and only nested lists to display:inline

    e.g.

    Code:
    .navlist li{display:block}
    .navlist li li{display:inline}
    Another thing is that the last nested list doesn't have the same spacing between it and the parent. If you hover over one of the list items on the bottom you will see the bg color touch the list above.
    If you are talking about IE then the changes above should sort that as well.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ok - I think you are talking about the vertical-alignment in Firefox. You will just need to address the inline elements.

    e.g.
    Code:
    .shop, .info, .web {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
        display:inline;
        padding: 5px 0 0 35px;
        vertical-align:middle;
    }
    .navlist li ul{vertical-align:middle}
    You may need to tweak it a little bit to get the spacing between rows that you want.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That fixes the first image issue, I slipped your new rules in here
    Code:
    .navlist ul {display:inline}
    .navlist li{display:block}
    .navlist li li{display:inline}
    .navlist li img {vertical-align:middle}
    .navlist ul ul {
        display:block;
        margin:0 0 20px 0;
        background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif) no-repeat 0 5px;
        padding:0 0 0 25px;
    }
    No I was talking about FF2 with the 2nd problem. I just looked at it in IE7 and noticed that all lists are like the bottom list shows in FF2.

    Opera is also showing the same as IE7, looks like an FF2 issue now.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Ok - I think you are talking about the vertical-alignment in Firefox. You will just need to address the inline elements.

    e.g.
    Code:
    .shop, .info, .web {
        color: green!important; 
        font-weight:bold; 
        margin:0; 
        padding:0;
        display:inline;
        padding: 5px 0 0 35px;
        vertical-align:middle;
    }
    .navlist li ul{vertical-align:middle}
    You may need to tweak it a little bit to get the spacing between rows that you want.
    That fixed it, my hat is tipped to you once again friend!

    One last question, why is FF doubling up the space between the lists with this rule in blue. IE and Opera give 20px but FF gives 40px.

    Code:
    .navlist ul ul {
        display:block;
        margin:0 0 20px 0;
        background:url(http://www.rayswoodworks.com/test_files/footerimages/btn-middot.gif) no-repeat 0 5px;
        padding:0 0 0 25px;
    }

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    It looks like a bug in firefox as other browsers seem to render it correctly. It looks like the problem is that the parent list is inline and is confusing FF.

    If you did this.

    Code:
            <ul class="navlist">
                <li>
                    <h4 class="shop">Shop -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li style="display:block">
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
    That seems to fix firefox but means adding extra classes to do it.


    Code:
    .navlist li{display:block}
    .navlist li li{display:inline;}
    .navlist li li.sub{display:block}
    Code:
            <ul class="navlist">
                <li>
                    <h4 class="shop">Shop -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="info">Info -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li class="sub">
                            <ul>
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <h4 class="web">Web -</h4>
                    <ul>
                        <li><a href="#">Item one</a> |</li>
                        <li><a href="#">Item two</a> |</li>
                        <li><a href="#">Item three</a> |</li>
                        <li><a href="#">Item four</a> |</li>
                        <li><a href="#">Item five</a> |</li>
                        <li><a href="#">Item six</a> |</li>
                        <li><a href="#">Item seven</a></li>
                        <li>
                            <ul class="sub">
                                <li><a href="#">Item one</a> |</li>
                                <li><a href="#">Item two</a> |</li>
                                <li><a href="#">Item three</a> |</li>
                                <li><a href="#">Item four</a> |</li>
                                <li><a href="#">Item five</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
    Which is a shame and there may well be a CSS answer if you look hard and long enough

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, I'll go with this fix for FF.

    It is a shame though isn't it. I'm not using FF3 yet, I wonder if it is doing the same.

    Thanks again for sharing your knowledge

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    As we only need to target Firefox we could do away with that extra class and use the :last-child pseudo class instead to target that last list item like so.

    Code:
    .navlist ul li:last-child {display:block}
    .navlist ul ul li:last-child {display:inline}
    We need to do it twice because the last nested list needs to remain inline but the last parent list should be block.

    That seems to work in my Firefox 2 and 3.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh man! That was the cat's meow there. That worked Purrfect

    I had done something similar by creating another .sub class ( I had called it .lastsub) and it had some crazy positioning on the padding to take care of the last list item. It was still display;block though like the other subs.

    Anyway, your new fix takes care of everything now. Good thread for me, helped me learn more about nested lists.

    Thanks for going that extra step Paul!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks for going that extra step Paul!
    You're welcome - I've been waiting for a good reason to use :last-child anyway


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •