...

View Full Version : Need help making horizontal CSS menu



CluelessNewbie
02-26-2005, 07:31 PM
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; }

bazz
02-26-2005, 08:33 PM
Could you plz post a link to the page. I would rather see what you mean that blindly give a waffly answer :)

Thanks

Bazz

rmedek
02-26-2005, 09:08 PM
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 :)

CluelessNewbie
02-26-2005, 10:10 PM
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.

Scootertaj
02-27-2005, 12:10 AM
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.

whizard
02-27-2005, 01:05 AM
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
02-27-2005, 01:14 AM
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... :)

CluelessNewbie
02-27-2005, 03:14 AM
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.

chilipie
02-27-2005, 03:03 PM
You also might want to try Brothercake's List-u-Like (http://www.listulike.com/) CSS generator :) .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum