fixed width menu items in horizontal menu - Mambo

marcvangend · May 18th, 2005, 14:41

Hi,

I'm trying to make a horizontal menu in which all menu items have the same width of 180px. Can it be done through css? It's probably quite simple but I can't seem to find the solution.

Thanks!

hazman · May 18th, 2005, 23:44

Yes, do you have a link to the site?

marcvangend · May 19th, 2005, 00:53

Off course:
www.marcvangend.nl
It's still a very simple outline of this template but I am sure the need for fixed width menu items is very clear.

marcvangend · May 19th, 2005, 11:09

A little progress today...
I changed the menu type from horizontal to flat list and made the list horizontal again using css. In IE6 this works fine, but Firefox and Opera don't accept a 'width' value for <li> tags. Any suggestions how to make this work in all browsers?
Thanks!

walb · May 19th, 2005, 12:21

Try this in your #nav li {}

float:left;

marcvangend · May 20th, 2005, 09:23

OK, i've got is sorted out i guess.
the {float:left} property helped, together with helpful tutorials like http://www.sovavsiti.cz/css/horizontal_menu.html and http://www.rikkertkoppes.com/thoughts/inline-width. I still have to test it in browsers such as safari and IEmac, but it works now in the latest versions of Firefox, Opera and IE.

css markup is now:

#nav ul {
list-style:none;
display:inline;
margin:0px;
padding:0px;
}

#nav li {
float:left;
display:inline-block;
list-style:none;
width:180px;
text-align: center;
}

Thank you all for for your help.

May 18th, 2005, 14:41	#1
marcvangend Join Date: Feb 2005 Location: Amsterdam, The Netherlands Posts: 40	fixed width menu items in horizontal menu Hi, I'm trying to make a horizontal menu in which all menu items have the same width of 180px. Can it be done through css? It's probably quite simple but I can't seem to find the solution. Thanks!

May 19th, 2005, 12:21	#5
walb Join Date: Aug 2004 Location: Hack City, Earth. Posts: 1,062	Try this in your #nav li {} float:left; __________________ These forum moderators keep removing my sig! Freedom of mind and speech is not appreciated over here.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fehler in Firefox und Netscape	DieCoyoten.de.vu	German Forum	3	January 5th, 2005 05:06
Menus lose items when Menu Type is changed.	crunch42	Administration Questions	1	December 9th, 2004 10:18
Adding Menu Items and deleting sections?	Persian	General Questions	2	August 20th, 2004 11:24
Horizontal menus	johnp	Open Source Products for Mambo	8	March 2nd, 2004 01:41

May 18th, 2005, 23:44	#2
hazman Join Date: Dec 2004 Location: Israel Posts: 6,212	Yes, do you have a link to the site?

May 19th, 2005, 00:53	#3
marcvangend Join Date: Feb 2005 Location: Amsterdam, The Netherlands Posts: 40	Off course: www.marcvangend.nl It's still a very simple outline of this template but I am sure the need for fixed width menu items is very clear.

May 19th, 2005, 11:09	#4
marcvangend Join Date: Feb 2005 Location: Amsterdam, The Netherlands Posts: 40	A little progress today... I changed the menu type from horizontal to flat list and made the list horizontal again using css. In IE6 this works fine, but Firefox and Opera don't accept a 'width' value for <li> tags. Any suggestions how to make this work in all browsers? Thanks!

May 20th, 2005, 09:23	#6
marcvangend Join Date: Feb 2005 Location: Amsterdam, The Netherlands Posts: 40	OK, i've got is sorted out i guess. the {float:left} property helped, together with helpful tutorials like http://www.sovavsiti.cz/css/horizontal_menu.html and http://www.rikkertkoppes.com/thoughts/inline-width. I still have to test it in browsers such as safari and IEmac, but it works now in the latest versions of Firefox, Opera and IE. css markup is now: #nav ul { list-style:none; display:inline; margin:0px; padding:0px; } #nav li { float:left; display:inline-block; list-style:none; width:180px; text-align: center; } Thank you all for for your help.