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. (link here to see the full uncut layout : http://www.deliproof.com/test22.jpg )

    [img]http://www.deliproof.com/test22.jpg[/img]

    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">



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

    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:

    Code:
    #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".