Question

I have a Hortizontal Menu at this URL – http://www.balibar.co/main.php

I’m happy with the look but I’m finding 2 things

1. it doesn’t take up the entire space… there is a little white space at the end.
2. If I change the screen size (eg: hold Ctrl & use the Mouse Wheel to change the screen size) the last menu item ‘search’ drops to the next level.

How can i fix these 2 things.

Here is the HTML code:

  <div id="containerNavigation">
            <ul>
                <li><a id="headerLoginLink">Home</a></li>
                <li><a id="headerLanguageLink">Profile</a></li>
                <li><a id="headerSearchLink">Mail</a></li>
                <li><a id="headerSearchLink">Requests</a></li>
                <li><a id="headerSearchLink">Matches</a></li>
                <li><a id="headerSearchLink">Search</a></li>            
            </ul>
  </div>

And here is the CSS

 div#containerNavigation {
width: 700px;
height: 25px;
float: left;
 }

 div#containerNavigation ul {
list-style: none;
color: #FFF;
 }

 div#containerNavigation li {
background: white url(../images/online-dating-main/navigation5.png) repeat-x 0 0;
display: inline;
line-height: 25px;
font-size: 1.1em;
float: left;
 }

 div#containerNavigation li a {
cursor: pointer;
font-weight: normal;
float: left;
width: 116px;
text-decoration: none;
color: white;
border-right: 1px solid #FFF;
text-align: center;
 }

 div#containerNavigation li a:hover {
background-color: #849C00;
 }

thankyou!

Answer 1

div#containerBody width should be 702px. It is less by 2px and is the reason it is falling down ( 116 * 6 + 6 = 702 ). 6 addition is for the border right 1px for each you passed. That should be same for containerNavigation too.

There are few things to change.

div#joinHeader li a {
    cursor: pointer;
    margin: 0 15px;
}

You have fixed width for the ul tag ( class=shadow ). Take out that margin 15 px for the li a tags. That should make them properly aligned fitting to the division. Also, joinCatchPhrase has extra width of 100px. Reduce it by the same.