Grow your CSS skills. Land your dream job.

[Solved] Step-down Nav Bar Buttons

  • # October 13, 2009 at 10:44 am

    I’m a complete beginner when it comes to coding & so watched the video tutorial on how to code a psd design. I found this very helpful.
    I have a problem which i have no idea how to solve.
    According to some people when they view my page, the nav bar buttons appear stepped down, but other people tell me it all looks fine and straight, as it does on my laptop; which leaves me baffled :|

    The website is; http://www.mce-clothing.com
    And here is the CSS for the #nav bit.

    ul#nav {
    height: 170px; width: 1280px;
    margin: 0 auto;
    background: url(../images/head2.jpg) no-repeat;
    list-style: none;
    padding-left: 420px;
    }
    ul#nav li a {
    display: inline;
    height: 33px;
    text-indent: -9999px;
    float: left;
    margin-top: 120px;
    }

    If anybody could shed some advice i’d greatly appreciate it!

    # October 13, 2009 at 11:53 am
    Code:
    ul#nav li { display: inline; }

    I’m pretty sure thatll fix it.

    # October 14, 2009 at 8:58 am

    Unfortunately this hasnt resolved the issue. Should i be removing/replacing any of the coding?

    # October 14, 2009 at 9:39 am

    You haven’t used blue642′s suggestion on the live site. That really should fix the problem, if not add float:left to it.

    # October 14, 2009 at 9:50 am

    Your right i hadnt! I thought i had reuploaded the css to the ftp!
    I have done now, although no way to check.
    Could you tell me if that has made a difference please?

    # October 14, 2009 at 10:45 am

    I can only check with http://ipinfo.info/netrenderer/ but that problem seems to be fixed. Now you need to do the same for the list in the footer, but first the list items need to be wrapped with <ul> tags.

    You might want to think about centering the page too.

    # October 14, 2009 at 11:38 am

    Great, thanks!
    Oh dear, i also thought this was done :| You’ll have to excuse the errors this is my first attempt.

    What code would i now need to change to centre the page?

    # October 14, 2009 at 12:17 pm

    Put everything inside #page-wrap.

    # October 15, 2009 at 10:12 am

    Ok, i believe i have resolved both issues, thanks for your help!

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

You must be logged in to reply to this topic.

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