Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts

    New to CSS - having trouble with <ul> and sprites

    Hello All,

    You might be hearing from me quite a bit because i'm in the process of putting together my first, mostly css site. I am attempting a basic horizontal sprite menu. I have been using Chris Coyier's video tutorial to help me with this: http://css-tricks.com/videos/css-tricks-video-13.php

    The problem I am having is that when I preview the page in both firefox and safari, the menu just simply doesn't show up. If I get rid of the float:left tag, it shows up vertically but when I try to make it horizontal, it disappears.

    Here is a link to what it is now: http://www.deliproof.com/index2.html

    And this is the image of what I would like it to eventually look like : http://www.deliproof.com/test22.jpg

    Any pointers (with anything at all!!) would be greatly appreciated.

    Below is my html code:
    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <style type="text/css">
    
        </style>
        </head>
    
        <body>
    
        <div id="page-wrap">
    
           <ul id="nav">
              <li class="collective"><a href="#">Collective</a></li>
              <li class="stuff"><a href="#">Our Stuff</a></li>
              <li class="about"><a href="#">About</a></li>
              <li class="special"><a href="#">Sophie</a></li>
    
           </ul>
    
        </div>
    
        <div id="footer">
        </div>
    
    
    
        </body>
        </html>
    And this is my CSS code:

    Code:
        @charset "UTF-8";
        /* CSS Document */
    
        * { margin: 0; padding: 0; }
        html {overflow-y: scroll; }
        body {font: Georgia, "Times New Roman", Times, serif;
           background: url(images/body-bg.png) repeat-x top #000028; }
    
        ul { list-style: none inside; }
        p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
        a {outline: none; }
        a img {border: none; }
    
        .floatleft {float: left;}
        .floatright {float: right;}
        .clear {clear: both;}
    
        #page-wrap {
              width: 1000px;
              margin: 0 auto; }
              
        ul#nav {
              }
              ul#nav li {
                       display: inline;
                       }
                       ul#nav li a {
                                display: block;
                                height: 62px;
                                text-indent: -9999px;
                                
                                }
                                ul#nav li.collective a {
                                               width:238;
                                               background:url(images/nav_collective.png) no-repeat bottom center;
                                                  }
                                ul#nav li.stuff a {
                                               width:166;
                                               background:url(images/nav_stuff.png) no-repeat bottom center;
                                                  }
           
                                ul#nav li.about a {
                                               width:118;
                                               background:url(images/nav_about.png) no-repeat bottom center;
                                                  }
           
                                ul#nav li.special a {
                                               width:136;
                                               background:url(images/nav_special.png) no-repeat bottom center;
                                                  }
                                ul#nav li a:hover {
                                               background-position: center center;
                                                  }
    Any help at all would be very very appreciated - even if it has to do with the rest of the site! thanks!!!

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    ul#nav li a {
    display:block;
    float:left;
    height:62px;
    text-indent:-9999px;

    That's your killer. It's there, but so far to the left that you can't see it.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I seem to have the problem even without that:

    here is the url to the page:

    http://deliproof.com/index2.html

    and to my updated css:

    http://deliproof.com/style2.css

    also - any idea as to why the header isn't showing up?

    thank you so much for your help!

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Change background-image to just background

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Here is the corrected css:

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * { margin: 0; 
    	padding: 0; }
    
    html {overflow-y: scroll; } /* this is css 3 level - do you really want that? */
    
    body {font-family: Georgia, "Times New Roman", Times, serif;
    	background: url(images/body-bg.png) repeat-x top #000028; }
    
    ul { list-style: none inside;}
    
    p {font-size: 1.2em; 
    	line-height: 1.2em; 
    	margin-bottom: 1.2em; 
    	}
    
    a {outline: none;}
    
    a img {border: none;}
    
    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}
    
    
    #page-wrap {
    	height: 356px;
    	width: 1000px;
    	margin: 0 auto;
    	background-image: url(images/header.png);
    	background-repeat: no-repeat;
    	}
    		
    #nav {
    	}
    
    #nav li {
    	display: inline;
    	}
    
    #nav li a {
    	display: block;
    	height: 62px;
    	float: left;								
    	}
    
    #nav li a:hover {
    	background-position: center center;
    	}
    
    .collective {
    	width:238px;
    	background:url(images/nav_collective.png) no-repeat bottom center;
    	}
    
    .stuff {
    	width:166px;
    	background:url(images/nav_stuff.png) no-repeat bottom center;
    	}
    	
    .about {
    	width:118px;
    	background:url(images/nav_about.png) no-repeat bottom center;
    	}
    
    .special {
    	width:136px;
    	background:url(images/nav_special.png) no-repeat bottom center;
    	}
    I fixed some errors and removed the MANY tabs and made the classes generic. Try this and see if the fixes help.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    33
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Jerry -

    first of all, thank you so much for your help. I entered in your CSS and the navigation is still not visible! I'm not sure what is wrong.

    The updated links are

    http://deliproof.com/index2.html (the header looks much better now)

    and

    http://deliproof.com/style2.css


    Thank you again!

  • #7
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I was able to get this code to show the menu in FF3 and IE7. Used this as the foundation for the horizontal list nav and commented out your css where it conflicted. Also, I added the text links back in and used the negative text-indent, which aren't necessary I suppose. I didn't do anything trying to make the animation work.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    rset "UTF-8";
    /* CSS Document */
    * { margin: 0;
        padding: 0; }
    
    html {overflow-y: scroll; } /* this is css 3 level - do you really want that? */
    
    body {font-family: Georgia, "Times New Roman", Times, serif;
        background: url(http://deliproof.com/images/body-bg.png) repeat-x top #000028; }
    
    /*ul { list-style: none inside;}*/
    
    p {font-size: 1.2em;
        line-height: 1.2em;
        margin-bottom: 1.2em;
        }
    
    a {outline: none;}
    
    a img {border: none;}
    
    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}
    
    
    #page-wrap {
        height: 356px;
        width: 1000px;
        margin: 0 auto;
        background-image: url(http://deliproof.com/images/header.png);
        background-repeat: no-repeat;
        }
    
    #nav {
    list-style-type:none;
        }
    
    
    #nav li {
        /*display: inline;*/
        float:left;margin:0 2px;
        }
    
    #nav li a {
        display: block;
        height: 62px;
        /*float: left;*/
        text-indent:-9999px;
        }
    
    #nav li a:hover {
        background-position: center center;
        }
    
    .collective {
        width:238px;
        background:url(http://deliproof.com/images/nav_collective.png) no-repeat bottom center;
        }
    
    .stuff {
        width:166px;
        background:url(http://deliproof.com/images/nav_stuff.png) no-repeat bottom center;
        }
    
    .about {
        width:118px;
        background:url(http://deliproof.com/images/nav_about.png) no-repeat bottom center;
        }
    
    .special {
        width:136px;
        background:url(http://deliproof.com/images/nav_special.png) no-repeat bottom center;
        }
    </style>
    </head>
    
    <body>
    
    
    <div id="page-wrap">
    
        <ul id="nav">
    
            <li class="collective"><a href="#">collective</a></li>
            <li class="stuff"><a href="#">stuff</a></li>
            <li class="about"><a href="#">about</a></li>
            <li class="special"><a href="#">special</a></li>
    
        </ul>
    
    </div>
    
    <div id="footer">
    
    </div>
    
    
    </body>
    </html>


  •  

    Posting Permissions

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