Mobile Friendly Website

CSSPLAY

Doing it with style

centering menus COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Stu:-
This has been split from the previous dual purpose menu because the extra styling was getting in the way of producing a working demonstration. This now works in Opera and will resize without breaking. I think that using display:table in this way does not compromise the CSS as it will still degrade to an unordered list.
(25.07.2005, 19:02)

Stu:-
I have also found a way of getting IE to work without the hack of using the 'del' tag. I will publish my finding later.
(26.07.2005, 10:01)

Richard V:-
yet again you rule... :)
aligned left navigation no more!!
(26.07.2005, 17:12)

johan:-
Could this code help for centering in IE5 MAC

.floatedNav {
width:1px;
white-space:nowrap;
}
(07.10.2005, 15:09)

johan:-
Q2: If needed to have three equally spaced list-items, is it needed to use width:99% on the parent ul and do width:33% for the li styles
(07.10.2005, 15:14)

Neil:-
The example code shown on the page differs from teh code used in the source of your page - Thus meaning it works in Opera but not in IE - I had to add a 2nd containing div as shown in your source to get it to work with IE.
(16.11.2005, 13:09)

Stu:-
Neil, I actually make a note that this is required for it to work in IE as part of the text - 'and then using text-align:center; in an outer div'.
(17.11.2005, 20:44)

fixxxer:-
Quick question... when using a clone bookmarklet to replicate slower page rendering, the nav that has unknown width stacks on top of each other. Have you any idea how to stop tis happening? its driving me nuts...
(29.11.2005, 16:19)

DisinfectedBarfbag:-
Hi, love your menus BUT I can't get this to wrap in Firefox 1.5 or Opera 8.51, wraps ok in IE6 though. Any ideas please? I have an example here http://www.dandgadvocacy.org.uk/horiz-menu-tester.php
(01.01.2006, 17:35)

Al:-
I just ran across your centered left-align horizontal navigation .. I spent 2 days trying to come up with exactly this (and failed!). Thank you so much, your site is stunning. Respect!
(09.01.2006, 10:54)

Chris Klaus:-
I was working on combining this css menu with your MK.3 version of cross browser drop down cascading validating menus. I'm happy to say that combining these works in firefox 1.5.0.2, opera 8.54, and netscape 8.1. I was having trouble with it in IE 7 beta 2.

I final came back to confirm your page on centers for variable width css menus in IE 7 beta 2. I discovered instead that the menu items stack on top of each other. You mentioned you have a way of doing this without the del... Do you know if that solution works on IE 7 beta 2?

Thanks again for the great ideas!
(21.04.2006, 15:44)

Josh:-
I mentioned this in another section, but I believe the problem spans from the unknown widths. Apparently IE7 tries fill the available space when you use width:auto; it does not take into acount the elements that are next to each other, whether floated or not.
(15.05.2006, 21:16)

Josh:-
Well, I was able to fix the problem in IE7b2 with a similar setup by adding a float:left; to the link elements inside of the li elements.

So maybe adding a float to #menu2 a {} would work.
(15.05.2006, 21:48)

Ryan:-
Great technique and great site. Anyone know how to make the <li>'s in a fixed width <ul> (800px for example) expand or contract to always fill the the <ul> so <li>'s can be added or subtracted without having to change any CSS. I'm working on this for a CMS site.
(06.06.2006, 23:56)

Mike:-
I am struggling with an IE7 implementation of the menu. Surely there is a simple workaround, or could someone give me a link to where they have got this working in ie7
(27.07.2006, 09:28)

Boris:-
What does de
display:table;
do?
(14.09.2006, 19:54)

Stu:-
Boris, it does what it says, display as a table. Check with the w3.org to see a full explanation.
(14.09.2006, 20:13)

Malcolm Maclean:-
hi stu

great menu, really useful, quick question for you or anyone else who reads this... is this possible with floated left divs?

i.e. i have got an 800px wide container with any no of divs 150px wide inside is there anyway to get them to centre while being floated?

Cheers!

Malcolm
(16.01.2007, 11:50)

Ryan:-
I've used an alternative method which achieves the same effect here:
www.dunedinicehockey.co.nz/

The basic menu design came from www.dynamicsitesolutions.com/css/example-menus/4/
(21.01.2007, 11:06)

Fredrik Carlbom:-
A nice solution, I would recommend changing <del> into <span> though, looks better if you ask me and avoids th usage of some css...

I'm using spans with display: inline-block into my menu I'm building, thanks for the idea!
(21.06.2007, 00:16)

Alex C:-
Just so you know, I had the darnedist time getting the centered menu to work in IE6 and FF like it is on your site.

Turns out, the IE hacks shown on the page (i.e. * html ...) don't work. The ones you used (i.e. [if IE] conditional) do work. You might want to update the snippet to reflect that.
(25.06.2007, 21:52)

Matt:-
I couldn't get it to work until I set <body> to text-align: center.
(24.10.2007, 11:23)

Maik:-
Hi Stu,

I've discovered an alternative, but above all a valid technique for the <del>-Tag ;)

<!--[if lte IE 7]><table class="container"><tr><td><![endif]-->
<ul id="menu2">
...
</ul>
<!--[if lte IE 7]></td></tr></table><![endif]-->

cu Maik
(29.06.2008, 10:21)

richard:-
The second menu doesn't work properly in IE7, floats don't work. Fix is:

* html #menu2 li, *+html #menu2 li {
float: left;
}
(13.10.2008, 19:59)

Richard Young:-
I'm trying to include a drop down sub menu also using lists (li ul li). I have it working but when I included your suggestion to get the main menu centered, it stopped the sub menu from working.
Do you have suggestions how I can get it to work.
(20.04.2011, 11:26)

Richard Young:-
This is being caused by the overflow: hidden but I need that to get rid of the horizontal scroll bar.
(20.04.2011, 12:36)

Vasile:-
Thx a lot, I needed this so my list was centered in IE as well.
(03.05.2012, 09:53)

Nephs:-
awesome, thanks
(25.07.2012, 22:05)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page