View Full Version : Navigations Menu

09 Dec 2009, 01:12 AM
Hey everybody,
I'm working on a horizontal navigation menu. They are images, and I'm having troubles working with the CSS and how <div> tags work. Idk if I should start a list : <ul> or just have them next to each other.

I want them to be centered on the top of the screen. Then of the right and left, have the background gradient of the actual menu so that it takes up the whole page. (using percentages and also repeat-x)

If anyone one can help then please do so.


02 Jan 2010, 10:42 PM
Try this (all IDs, px values, links, etc. are example values. Replace with your own.)


<div id="header">
<ul id="navbar">
<li id="button1"><a href="page1.html"><span>Link 1</span></a></li>
<li id="button2"><a href="page2.html"><span>Link 2</span></a></li>
<li id="button3"><a href="page3.html"><span>Link 3</span></a></li>

The div tag will contain the navigation bar and let you add the background gradient that you wanted. The ul tag will contain the buttons. Each li tag represents a button. The a tag is what the button links to. Inside each a tag, we put the name of the button. However, since we want an image to show instead of text, we put it inside of a span tag so that we can hide it with CSS.


/* NAVBAR */
div#header {
width: 100%;
height: 50px;
background: url(gradient.jpg) repeat-x;
ul#navbar {
list-style-type: none;
margin: 0 auto;
ul#globalnav li {
display: inline;
margin-left: 0;
ul#globalnav li a {
width: 100px;
height: 50px;
float: left;
ul#globalnav li a span { display: none; }
li#button1 a { background-image: url(button1.jpg); }
li#button2 a { background-image: url(button2.jpg); }
li#button3 a { background-image: url(button3.jpg); }

The header div has a width of 100% so it will expand with the window. We give it a height (in this case 50 pixels) and a background, which repeats on the x axis.

The navbar ul has a list-style-type of none so that it will not display bullets. We give it a margin of 0 auto so that it will not have a top and bottom margin, but will be horizontally centered.

We display each list item as inline so it will display in a row. We give it a margin-left of 0 so it doesn't indent.

We give the a tags a width and a height (in this case 100 by 50) and float them to the left so that it knows how to position them.

Then we display the span tags as none so it will not show the text.

Finally, we tell each link to display a certain image.

Hope this helps.