...

View Full Version : Centering a floated menu?



bryan868
06-17-2010, 09:14 AM
I'm trying to create a horizontal drop down menu where the subnav is horizontal as well. I was using this tutorial: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html

However, I can't figure out how to center the nav and subnav. I'm guessing it's because of the floats? Is there a way to accomplish this same style drop down menu but have everything centered?

abduraooft
06-17-2010, 09:35 AM
Take a look at the technique given at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

bryan868
06-17-2010, 09:51 AM
Thanks! Yeah I saw that post (http://matthewjamestaylor.com/blog/centered-dropdown-menus.html). But the subnav is vertical, not horizontal. How could I make it horizontal and still centered?

Maricha
06-17-2010, 10:00 AM
When I want my menu - or any object centered horizontally I use:
margin 0 auto; /* some older IE doesn't work though */

I don't know if that is what you mean :cool:

bryan868
06-17-2010, 05:49 PM
margin:0 auto; doesn't seem to work in the first example because the menu is position absolutely.

What about making the subnav in the link above horizontal instead of vertical?

bryan868
06-17-2010, 11:05 PM
OK, I did this from scratch myself. It's working except for in IE7. Any idea why?

http://bryanharley.com/test.html

bryan868
06-18-2010, 01:05 AM
I think I have it narrowed down to this:


.nav ul li:hover ul{
position: absolute;
display:block;
}

That makes the subnav appear on mouseover. It formats correctly except for in IE7. In IE7 the subnav just lines up along the top nav element instead of appearing below it. If I change it to:


.nav ul li:hover ul{
position: absolute;
display:inline;
}

Then it replicates the incorrect formatting in all browsers. So does this mean IE7 doesn't understanding that display:block; or it's showing it as display:inline;? Why? Or am I wrong? How can I fix this?

bryan868
06-18-2010, 05:54 PM
Anyone?

Major Payne
06-19-2010, 03:49 AM
I'm just wondering why you have absolute positioning being used and haven't told the browsers where?

These may help...

Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/
The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/04/01/the-right-way-to-make-a-dropdown-menu/

Scriptet
06-19-2010, 05:25 PM
You can center a block element by adding:

margin:0 auto;

This gives it automatic left and right margins thus centering the block, however this only works with a set width!

You can center an inline element by adding:

text-align:center;

To it's parent container...

Now if it's got an unknown width, you could probably use inline-block on the anchors (sort of a variation between the 2) allowing for text-align center to be used but this would require a few hacks for the older browsers...

Major Payne
06-20-2010, 06:08 AM
margin:0 auto; doesn't seem to work in the first example because the menu is position absolutely.

What about making the subnav in the link above horizontal instead of vertical? Looks like poster is having problems with that. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum