Grow your CSS skills. Land your dream job.

New to CSS and having problems

  • # November 14, 2008 at 12:58 pm

    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’ 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.

    (image no longer available)

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

    Below is my html 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:

    @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;
                                                            }
    

    Thank you so much!

    # November 14, 2008 at 2:48 pm

    I cleaned up the code quite a bit with some help from others, but it still doesnt seem to be working…

    http://deliproof.com/index2.html

    http://deliproof.com/style2.css

    # November 14, 2008 at 4:40 pm

    Change your nav li to:

    #nav li {
        display: inline;
        float:left;
        margin:225px 2px 0 2px;
        }
    

    Though, I should point out that it might not be the best solution in the long run. It depends on how you code the rest of the site.

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

You must be logged in to reply to this topic.

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