PDA

View Full Version : Why Isn't My Navigation Bar Lining Up?



jihanemo
Sep 28th, 2009, 07:51 PM
I added a feedburner subscription form to my navigation bar. Now it contains images and a feedburner subscribe form. But none of them are lining up together. I don't understand why. How can I get them to all line up perfectly in the middle? Without the submit form, I could get the images to line up in the middle but now the form is throwing the images off. I rather not use a quick fix - I want to be able to fix it correctly so that I understand how to create something similar in the future.

Why aren't they lining up together? Is the submit form creating some spacing that I can't see? And how can I get them ALL to line up perfectly in the middle?

PAGE: http://americanchic.net/temporary.html

Scriptet
Sep 28th, 2009, 10:43 PM
Hi the proper way is to use the un-ordered list element (ul), rather than tables , as effectivley it's a list of links, and plus using the ul is much more flexible and is the number 1 way of creating navigation bars.

So your whole menu goes around a <ul> item and then each indivdual item goes inside <li></li> tags (li stands for list item)

Like

<ul id="mymenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>

Then you can style my menu as you want.

jihanemo
Sep 28th, 2009, 11:31 PM
Thanks, scriptet. I tried that but it turned the nav menu into a bulleted list. Did I do that wrong?...

http://americanchic.net/temporary2.html

Scriptet
Sep 28th, 2009, 11:52 PM
Nope that's quite correct we now need some CSS to go with that...



*{
margin:0; padding:0;
}

#mymenu{
list-style:none; /*remove bullets from the list*/
}

#mymenu li{
display:inline;
}

#mymenu li a{
float:left;
padding:10px;
background: #000;
}


Bullets are added to a list by default, we remove them as shown in the CSS. I've also added a bit more to get the line to line up horizontally using float:left on the anchors. I've also added a bit of a gap around each item as you can see where it says padding 10px; (creates a 10px gap around each button).
You can change the styles as you wish with the power of CSS..