...

View Full Version : CSS Horizontal List Menu help



pogbobo
07-18-2007, 12:46 AM
hello, this is my first post! great site by the way :)

I have a question about this css/js menu:
http://www.javascriptkit.com/script/script2/csstopmenu.shtml

I have tried and tried, but I cannot get the menu to be centered on the page, I gave up on tigra :mad: because you could only use absolute positioning ... which is why I started looking for a different system ... thanks!

edit: I've searched and tried all of the obvious and most common fixes ... any ideas?

koyama
07-18-2007, 08:10 AM
I have a question about this css/js menu:
http://www.javascriptkit.com/script/script2/csstopmenu.shtml

I have tried and tried, but I cannot get the menu to be centered on the page
This is not a trivial question if you want a pure CSS solution that works in any of the major browsers including IE6. (A dirty non-CSS solution is to wrap the menu in a real <table> and then center that table using margin: 0 auto)

Ok, first Firefox. The menu has unknown width so you need the ul element to shrink-wrap [1] around the li elements. Since you want the menu centered it will not help to float the menu. You can use display: table instead. This works in Firefox and other compliant browsers.


.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
display: table;
margin: 0 auto;
}

It does not work in IE6/7 since display: table is not supported. Instead you can use this [2]:


.horizontalcssmenu ul{
text-align: center;
}
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
zoom: 1;
text-align: left;
}

To combine the styles use a special style sheet for IE that extends the normal style sheet.

[1] http://www.codingforums.com/showpost.php?p=563266&postcount=9
[2] http://www.brunildo.org/test/shrink_center_3.html
[3] http://www.cssplay.co.uk/menus/centered.html

pogbobo
07-18-2007, 07:32 PM
thanks for the reply ... still no luck tho ...

this code resulted in no change in IE7:


.horizontalcssmenu ul{
text-align: center;
}
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
zoom: 1;
text-align: left;
}


so I thought maybe the second part was a type-o and was supposed to be for ul and li so I tried this:


.horizontalcssmenu ul{
text-align: center;
}

/*Top level list items*/
.horizontalcssmenu ul li{
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
zoom: 1;
text-align: left;
}


which resulted in this, which is close, but now the child elements are all out of whack:
http://i163.photobucket.com/albums/t320/pogbobo/newcode.jpg

any ideas??

edit: i just gave up and threw it in a table with margin: 0 auto ... oh well ... but the "rest of content" p is now above the menu haha

koyama
07-19-2007, 12:13 AM
thanks for the reply ... still no luck tho ...
Sorry, my mistake... I made a typing error.

Instead of this:


.horizontalcssmenu ul{
text-align: center;
}
use this:


.horizontalcssmenu {
text-align: center;
}
The key to understanding the solution for IE is that the ul element behaves like display: inline-block when you set it to zoom: 1 and display: inline. IE5/6/7 does not support display: inline-block on naturally block-level elements.

Did you manage to separate the styles for IE and non-IE browsers?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum