Grow your CSS skills. Land your dream job.

Need help on creating links for the top navigation

  • # January 10, 2010 at 2:20 am

    Sorry about my previous post, I recoded it and now it looks pretty simple.

    this is the css:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    p{
    display: block;
    position: relative;
    z-index: 1;

    font-size: 0.75em;
    }

    body{
    text-decoration: none;
    color: #333333;
    background: url(images/bg.png) repeat-x top;
    background-color: #f4f3f3;
    font: normal 100% “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    div#page-wrap{
    width: 1000px;
    margin: 0 auto;
    z-index: 1;
    }

    .clear{
    clear: both;
    }

    ul#nav{
    position: relative;
    width: 960px;
    height: 1020px;
    background: url(images/index.png) no-repeat;
    }

    ul#nav li{
    display: inline;
    }

    ul#nav li a{
    display: block;
    width: 45px;
    margin-top: 295px;
    margin-left: 115px;
    float: left;
    font-size: 1.5em;
    text-decoration: none;
    color: #333333;
    }

    ul#nav li a:hover, ul#nav li a:active{
    color: #b5121b;
    }

    and this is the HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Sorry Im a css newbie but I couldn’t figure out why it is not working well on IE? Referring to Contact Us and About Us above, on the red box.
    the link is http://mm.strangeorange.com/trial

    And here is the original file of it: http://dl.dropbox.com/u/576716/temp/hsiangs_vsample.zip

    I haven’t put contact us and about us on top right of the website(two red box)
    I afraid I might broke the code. :?

    # January 10, 2010 at 6:36 am

    First of all you are going to have a problem with IE6 which does not display transparency with png files which you are using. For IE6 you will have to either use .gif files or use a pngfix which is maybe a little complicated if you are new to all this. Secondly you can remove the 2 red boxes for the about and contact tags, they can be done with css.

    Next the above mentioned tags are the first on your page, put them in a new ul#topnav, and place it just below the #pagewrap. Then style these ul and li tags to display inline, float right and have a red background. You will also have to add the li a and a:hover styles as they will not be inherited from the ul#nav.

    I hope this helps.

    Re breaking your code, just copy both your index and css files so that you always have a back up file to return to if you get into too much trouble. Another piece of advice, is test often in Firefox first then the different IE browsers. Firefox is standards compliant and will show you what you coded, the IE’s have their own brand of standards and will show you their interpretation and all 3 are different.

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

You must be logged in to reply to this topic.

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