Using Lists to create Menu

A

admin

Administrator
Staff member
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.Use a listWhat would be a basic setup for using a list?Examples: <!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/Thanks">http://css.maxdesign.com.au/listamatic/Thanks</a><!-- m --> 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.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-top.jpg"></ul>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img1')"onmouseout="imgOff('img1')"><img class="border" alt="facilities" name="img1" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-faclink.jpg"></A></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img2')"onmouseout="imgOff('img2')"><img class="border" alt="activities " name="img2" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-actlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img3')"onmouseout="imgOff('img3')"><img class="border" alt="Park Layout" name="img3" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-parklink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img4')"onmouseout="imgOff('img4')"><img class="border" alt="Reservations" name="img4" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-reslink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img5')"onmouseout="imgOff('img5')"><img class="border" alt="Local Interests" name="img5" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-locintlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img6')"onmouseout="imgOff('img6')"><img class="border" alt="Rates" name="img6" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-rateslink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img7')"onmouseout="imgOff('img7')"><img class="border" alt="Directions" name="img7" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-directlink.jpg"></a></li>
<li><A href=http://www.webdeveloper.com/forum/archive/index.php/"facilities.htm" onmouseover="imgOn('img8')"onmouseout="imgOff('img8')"><img class="border" alt="Contact Us" name="img8" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-contactlink.jpg"></a></li>
</ul>
<div id="footer">
<ul><img src=http://www.webdeveloper.com/forum/archive/index.php/"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.not the answer to your problem, but uesful, nevertheless... (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=rollover2">http://bonrouge.com/br.php?page=rollover2</a><!-- m -->)

Can you possibly post a link? I'm too lazy to copy and paste your code.<!-- m --><a class="postlink" href="http://www.webpages.ttu.edu/smcguinn/rayford/css_test.htmTry">http://www.webpages.ttu.edu/smcguinn/ra ... est.htmTry</a><!-- m --> 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;
}Unfortunately it didn't work.OK, hang on...Use float:left; instead of display:inline; in div#navcontainer ul li
and see thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?t=62672">http://www.webdeveloper.com/forum/showt ... hp?t=62672</a><!-- m -->) to center your page.

btw incorrect use of ul <ul><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webpages.ttu.edu/smcguinn/rayford/rayimages/rc-home-top.jpg"></ul>Here (<!-- m --><a class="postlink" href="http://bonrouge.com/test/rayford.htm">http://bonrouge.com/test/rayford.htm</a><!-- m -->)...

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

What is the correct way?FANTASTIC! I appreciate it greatlyHappy to help.
Make sure you read what Fang said to learn a few things.
:)
 
You must log in or register to reply here.
Back
Top