CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 20882

HTML Horizontal Menu Layout

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!

Upvotes: 0

Views: 1096

Answers (3)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

Is there any reason to not use a table? That way you're guaranteed to never have the problem of an item going to the next line.

Upvotes: 0

Mahesh
Mahesh

Reputation: 34625

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.

Upvotes: 1

3on
3on

Reputation: 6339

Two little changes:

for the div#containerNavigation li a

width: 100%;

for the div#containerNavigation li

width: 116px;

Upvotes: 0

Related Questions