Please troubleshoot my horizontal nav bar

Discussion in 'HTML & Website Design' started by supra411, Apr 10, 2013.

  1. #1
    Hi, Everybody:

    I'm currently working on a website for my midterm assignment. I decided to add an horizontal navigation bar. However, when I tried to do so, the list items of the navigation bar does not line up. The first item, "Home Page" is positioned corrected. But the other two items -- "Biography and Notable Fights" and "Profile and Fight History" -- are lined up a few pixels below the "Home Page" list item, as you can see in the image below.

    Here's the CSS rules for the nav bar:

    ul.topnav1 {
    list-style-type: none;
    height: 50px;
    display: inline;
    }
    ul.topnav1 li {
    font-weight: bold;
    text-align: center;
    height: 0px;
    display: inline;
    }
    ul.topnav1 a, ul.topnav1 a:visited {
    width: 320px;
    color: #FFF;
    font-weight: bolder;
    float: left;
    height: 30px;
    background-color: #000;
    padding-top: 20px;
    }

    ul.topnav1 a:hover, ul.topnav1 a:active, ul.topnav1 a:focus {
    color: #000033;
    font-weight: bolder;
    width: 320px;
    background-color: #000;
    height: 30px;
    padding-top: 20px;
    background-image: url(images/navhover.gif);
    background-repeat: no-repeat;
    background-position: center bottom;
    }

    Here's the source code for that area:

    <body>
    <div class="container">

    <div class="header">
    <br />
    <h1>Genki &quot;Neo-Samurai&quot; Sudo</h1>
    <h2>Profile and Fight History</h2><br />
    </div><!-- end .header -->

    <ul class="topnav1">
    <li><a href="../index.html">Home Page</a></li>
    <li><a href="bio.html">Biography and Notable Fights</a></li>
    <li><a href="fight.html">Profile and Fight History</a></li>
    </ul>

    <div class="sidebar1">
    <p align="center">I want to go to this part of the page ...</p>

    Please let me know if you have any other questions, or if you need any other coding.

    Thanks!
    supra411


    [​IMG]
     
    supra411, Apr 10, 2013 IP
  2. moradv

    moradv Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #2
    can you give me the link of your website so i can help you
     
    moradv, Apr 10, 2013 IP
  3. MilliR

    MilliR Greenhorn

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #3
    ul.topnav1 {
    list-style-type: none;
    height: 50px;
    display: inline;
    }
    ul.topnav1 li {
    font-weight: bold;
    text-align: center;
    #height: 0px; why?
    #display: inline; why?
    }
    ul.topnav1 a, ul.topnav1 a:visited {
    width: 320px;
    color: #FFF;
    font-weight: bolder;
    #float: left; why?
    #height: 30px; why?
    background-color: #000;
    # padding-top: 20px; why?
    }
     
    ul.topnav1 a:hover, ul.topnav1 a:active, ul.topnav1 a:focus {
    color: #000033;
    font-weight: bolder;
    #width: 320px; why fixed width?
    background-color: #000;
    #height: 30px; why?
    #padding-top: 20px; why?
    background-image: url(images/navhover.gif);
    background-repeat: no-repeat;
    background-position: center bottom;
    }
    HTML:
    CSS is cascading style sheet. So all parent rules will be inherited by a any child elements. You have repeated too much. Unless I see your actual site, I can't figure out where you went wrong. But I am thinking why is ul given height = 50 , then li is given height=0, then a is given height 30.... I think it might be because of that.
     
    MilliR, Apr 10, 2013 IP
  4. supra411

    supra411 Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Hi!

    Thanks for helping! I've tried uploading the site to the page, but it's only showing me the old version of the site. I'll try again after the professor gets back to me about what might be going on.

    Good news is that I figure out that the height ofthe h2 in the header, "Profile and Fight History", was too long, which went beyond the header's height, and brought the other two <li> elements down too far. I'll continue to try and upload the site. When I get it done, please take a look and let me know what you think!

    Thanks!
    supra411
     
    supra411, Apr 10, 2013 IP
  5. supra411

    supra411 Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Awesome, it works!

    Please check it out:

    http://student.berkeleycc.org/rcheung/pages/fight.html

    Please also remember that I'm graded for the layout and not the content, so most of the text was copied from other sites (Wikipedia and Sherdog).

    Thanks!
    supra411
     
    supra411, Apr 10, 2013 IP
  6. moradv

    moradv Peon

    Messages:
    9
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #6
    Good luck ;)
     
    moradv, Apr 11, 2013 IP