My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using:
#nav {
background: url("navbg.png"); /* navbg.png is 1x40 pixels */
height: 40px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
}
#nav div {
width: 200px;
height: 40px;
background: url("Selected.png"); /* Selected.png is 200x40 pixels */
text-align: center;
}
When I have two divs in the #nav div, one shows up on the left and the other below it. If I add display: inline; to #nav div, they are centered but lose their background and the text appears side-by-side.
I want the divs to behave like images, be affected by text-align: center;, and appear side-by-side.