Navigation bar

[Callum]

Hi, I could use some help with my Navigation bar. So far I've got it so it the buttons are relatively close togehter using the display:inline in css. However I would like the images (buttons) to touch. I would also like to be able to control the location of the navigation bar as a whole. (e.g. move the entire bar down and across, not button by button).Thanks for the help Here is the html

<div id="button1"><img src="button.jpg" alt="home button" width="100"></div><div id="button2"><img src="button.jpg" alt="home button" width="100"></div><div id="button3"><img src="button.jpg" alt="home button" width="100"></div><div id="button4"><img src="button.jpg" alt="home button" width="100"></div><div id="button5"><img src="button.jpg" alt="home button" width="100"></div><div id="button6"><img src="button.jpg" alt="home button" width="100"></div>

Here is the Css

#button1 {                   display:inline;                             z-index:8;}#button2 {                    display:inline;                              z-index:8;} #button3 {                    display:inline;                              z-index:8;}#button4 {                    display:inline;                              z-index:8;}#button5 {                    display:inline;                             z-index:8;}#button6 {                    display:inline;                             z-index:8;}

EDIT: So far I've tried using positioning in the css for one button, but the others don't follow. I've also tried positioning all the buttons, however this causes problems when you increase page size (seperating). Finally, I've put all the buttons between one div class tag, but that didn't seem to work. (probably my errors)

[rzea]

The best way to do menus is using lists.I don't recommend using images the way you have it in you HTML code because you can perfectly do this via CSS with lists <ul>, <li>, thus improving the performance of your pages and quality of the HTML since it's optimized.Follow this link, it will show you and teach you, in a VERY simple way, all you need to know about using lists for menus: http://css.maxdesign.com.au/index.htmTIP: Use background images for the menu items (again, this can be accomplished via CSS EXTREMELY easy), and not images inside your HTML.Nonetheless, I do have to give you that you started good, the way you created your menu is just obvious, but once you start using lists you'll see how much easier it is than how you started off Let us know how it goes.

[Callum]

Read the tutorial, but found a better one and finally have my navigation how I want it, however I cannot get it in a line still and I don't have a clue why. Here is the new Css

#navigation {    height: auto;    width: 150px;    }#navigation li {    height: 30px;    width: 125px;    margin: 0px;    font-family: Arial;    font-size: small;    text-align: center;    line-height: 200%;    list-style-type: none;    background-image: url(button.jpg);    background-repeat: no-repeat;    float: left;}#navigation li a {    display: block;    width: 100%;    height:100%;    text-decoration: none;    color:#ffffff;}#navigation li a:hover {    font-weight: bold;    color:#ffffff;}#navigation li a:active {    font-weight: bold;    color:#ffffff;    background-image: url(buttonh.jpg);    background-repeat: no-repeat;}

Here is the new Html

<div id="navigation"><ul><li><a href="#">Button 1</a></li><li><a href="#">Button 2</a></li><li><a href="#">Button 3</a></li></ul></div>

[Callum]

Don't worry guys I finally found out why my menu was screwing up. The first divs width was restricting the display and float commands I was attempting to put in.So to fix it, I adjusted width of the first div to 900pxI added display:inline;I added float: leftfinally from the 2nd div I removed display: block;So no need to worry. :)Needless to say it took me an hour to work it out ( im a newbie) lol

[rzea]

Don't forget to test in at least Firefox 2.x, Opera 9.x, Safari 3.x and IE6/7.

[Callum]

I've only got Firefox 2 and I.E 7, where can I get I.E 6?

[rzea]

You can have IE6 and IE7 installed in your machine at the same time:

» Multiple Versions of IE in your PC:

http://tredosoft.com/Multiple_IE

» You can also download the installer of almost any browser ever invented (however, seems like this hasn't been updated since [2005-10-21]):

http://tredosoft.com/Multiple_IE

Keep these links in your bookmarks from now on.