Need help making horizontal CSS menu

Hello, complete newbie here. Don't run away scared yet, please help :)

I want a horizontal menu. I've got 7 images to use as button backgrounds, each 100x50. I've got an unordered list, with seven list items, to use as the menu links. How in the blazes do I get the text to display at the center of each button?!

So far I managed to get the text on top of the images, and to display the list as horizontal. I want the menu pinned in the lower right corner, but somehow the text seems to be misaligned by about 250px on the right? :/

Could someone please tell me how to fix this? (I'm currently experimenting, so don't expect the links or names in the code to make much sense).


Thanks in advance.


[ HTML ]

<div class="menuimg">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
<img src="button.gif">
</div>

<span id="menutext">
<ul>
<li><a href="stuff.html">Stuff</a></li>
<li>More stuff</li>
<li>Things</li>
<li>Gizmos</li>
<li>Freebies</li>
<li>Friends</li>
<li>Links</li>
<li>Email</li>
</ul>
</span>


[ CSS ]

.menuimg {width: 700px; height: 50px; position: absolute; bottom: 0px; right: 0px; }

#menutext {z-index: 1; width: 700px; height: 50px; position: absolute; bottom: 0px; right: 0px; color: purple; font-family: Arial, Helvetica, sans-serif; }

#menutext li {width: 100px; height: 50px; padding: 0; display: inline; text-align: center; }

Could you plz post a link to the page. I would rather see what you mean that blindly give a waffly answer :)

Thanks

Bazz

One quick tip... try using background images instead of regular images. Then you can position the text any way you'd like to and you don't have to worry about absolutely positioning the text over the images.

If you need more detailed help, just ask :)

I removed one image and one list item, since I had 8 items and set the width for 7 :rolleyes:

bazz,
This is a local file. There is nothing else in it aside from head, body tags and the like. Best I can do is this IE6 screenshot of the bottom right corner (the rest of the page is blank, so it's hardly of any interest).


rmedek,
You mean turn the buttons into a background image and then just place the text on the page? I don't see any advantage. I mean, I would still have to figure out how to place the text, right? And if I knew that, there wouldn't be a problem :)

Thanks for the replies.

If you want some easy horiztontal or vertical lists check out Listamatic lists (http://css.maxdesign.com.au/listamatic/) or customize your own list (http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp#mainContent) .

Hope this helps.

You want to set the images as backgrounds because then you could use the text-align:center; attribute to center your text in your <li>s

Dan

:eek: 144 posts! Thats gross!!! :eek:
(if you don't get it, i'm not explaining)

rmedek,
You mean turn the buttons into a background image and then just place the text on the page? I don't see any advantage.
Hey, you're the one with "CluelessNewbie" as your handle, not me :D

You want to set the images as backgrounds because then you could use the text-align:center; attribute to center your text in your <li>s
What he said... :)

If you want some easy horiztontal or vertical lists check out Listamatic lists (http://css.maxdesign.com.au/listamatic/) or customize your own list (http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp#mainContent) .

Hope this helps.

Scootertaj, I could kiss you, except I don't even know what gender you are :D This is exactly the kind of menu I had in mind (http://css.maxdesign.com.au/listamatic/horizontal26.htm). I had to fiddle some more with it, but I finally got it pinned in the lower right corner. Yay!

Thank you so very much.

You also might want to try Brothercake's List-u-Like (http://www.listulike.com/) CSS generator :) .