Using Lists to create Menu

[Slickwilly9]

I have seen sites that use lists to create a nav bar. I am attempting to create a horizontal nav bar made up of about 8 images. I was wondering if using lists would be appropriate. If not what do you recommend asside from just positioning them on the page. Thanks.

[Fang]

Use a list

[Slickwilly9]

What would be a basic setup for using a list?

[Fang]

Examples: http://css.maxdesign.com.au/listamatic/

[Slickwilly9]

Thanks for the great site. It has helped a lot. I have gotten my nav bar together but have run into a spacing issue between my images for the nav bar.

My CSS

<style type="text/css">

body
{
background-image:
url('http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rcbkgrnd.jpg')
}

div#navcontainer
{
border: 0px;
text-align: center;
margin: 0px;
padding: 0px;
}

div#navcontainer ul
{
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}

div#navcontainer ul li
{
display: inline;
margin: 0px;
padding: 0px;
}

div#header ul
{
text-align: center;
margin: 0px;
border: 0px;
padding: 0px;
}

div#footer ul
{
text-align: center;
margin: 0px;
border: 0px;
padding: 0px;
}

img.border
{
border: 0px;
margin: 0px;
padding: 0px;
}

</style>

My HTML

<div id="header">
<ul><img src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-top.jpg"></ul>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><A href="facilities.htm" onmouseover="imgOn('img1')"onmouseout="imgOff('img1')"><img class="border" alt="facilities" name="img1" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-faclink.jpg"></A></li>
<li><A href="facilities.htm" onmouseover="imgOn('img2')"onmouseout="imgOff('img2')"><img class="border" alt="activities " name="img2" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-actlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img3')"onmouseout="imgOff('img3')"><img class="border" alt="Park Layout" name="img3" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-parklink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img4')"onmouseout="imgOff('img4')"><img class="border" alt="Reservations" name="img4" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-reslink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img5')"onmouseout="imgOff('img5')"><img class="border" alt="Local Interests" name="img5" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-locintlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img6')"onmouseout="imgOff('img6')"><img class="border" alt="Rates" name="img6" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-rateslink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img7')"onmouseout="imgOff('img7')"><img class="border" alt="Directions" name="img7" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-directlink.jpg"></a></li>
<li><A href="facilities.htm" onmouseover="imgOn('img8')"onmouseout="imgOff('img8')"><img class="border" alt="Contact Us" name="img8" src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-contactlink.jpg"></a></li>
</ul>
<div id="footer">
<ul><img src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-bottom.jpg"></ul>
<div>

</div>

I am sure the error is simple. I have tried setting padding to 0, margin to 0 and borders to 0 but I can't get them to come together.

[BonRouge]

not the answer to your problem, but uesful, nevertheless... (http://bonrouge.com/br.php?page=rollover2)

Can you possibly post a link? I'm too lazy to copy and paste your code.

[Slickwilly9]

http://www.webpages.ttu.edu/smcguinn/rayford/css_test.htm

[BonRouge]

Try this :
div#navcontainer ul {
text-align: center;
margin: 0px;
padding: 0px;
height:30px;
}
img {
display:block;
}
div#navcontainer ul li {
float:left;
margin: 0px;
padding: 0px;
}

[Slickwilly9]

Unfortunately it didn't work.

[BonRouge]

OK, hang on...

[Fang]

Use float:left; instead of display:inline; in div#navcontainer ul li
and see thread (http://www.webdeveloper.com/forum/showthread.php?t=62672) to center your page.

btw incorrect use of ul <ul><img src="http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-top.jpg"></ul>

[BonRouge]

Here (http://bonrouge.com/test/rayford.htm)...

There was lots of unnecessary code on your page - css and html. I've cleaned it up. :)

[Slickwilly9]

Still not moving together.

What is the correct way?

[Slickwilly9]

FANTASTIC! I appreciate it greatly

[BonRouge]

Happy to help.
Make sure you read what Fang said to learn a few things.
:)