News: When asking for support, it helps us and you, if you read the Posting Guidelines

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

June 27, 2019, 06:03:12 AM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188461
  • Total Topics: 20729
  • Online Today: 25
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 17
Total: 17

Author Topic: Centering a floated menu?  (Read 2553 times)

0 Members and 1 Guest are viewing this topic.

Offline Crip

  • Jesus Inside.
  • Themes
  • *
  • Posts: 4168
  • Theme Support
    • Cripzone
Centering a floated menu?
« on: February 28, 2009, 04:27:37 PM »
centering a floated menu, I get ask this a lot but never knew how so , I did some research and found this at CSS Play

Quote
Revisiting this to show an easier method that is cross browser friendly. Thanks to Tristan Brotherton for the idea.

For most single level menus this method will work in all tahe major browsers and doesn't use hack, inline-blocks or display table/table-cell.

All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.

The <ul> tag is then styled with a relative position and floated left with a left position of 50%.

Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.

...and that as they say is all that is needed.

I tried this and it really does center your menu if it's a floated menu..

Just another tip from Crip~ ;)
I have become comfortably numb!

Cripzone | Crip's Free 2.0.2 Themes


Offline bloc

  • Founder
  • *
  • Posts: 5213
    • Bloc
Re: Centering a floated menu?
« Reply #1 on: February 28, 2009, 05:03:44 PM »
Yes, tried using it, but sadly it has a side-effect: if the menu is longer than 70-80% of the window width, it will add a scrollbar at the bottom in FF and Opera when you shrink the window. One can hide that by using overflow: hidden but then the dropmenu is also hidden! :P

So best at fixed-width pages with a menu less than 80% of that width again.

Offline Crip

  • Jesus Inside.
  • Themes
  • *
  • Posts: 4168
  • Theme Support
    • Cripzone
Re: Centering a floated menu?
« Reply #2 on: February 28, 2009, 05:07:16 PM »
The one i tried it on was 950px; but it did work FF3 only is all I checked it with.
I have become comfortably numb!

Cripzone | Crip's Free 2.0.2 Themes


Xarcell

  • Guest
Re: Centering a floated menu?
« Reply #3 on: February 28, 2009, 05:59:35 PM »
I've tried this as well, only works best on fixed widths. It also depends on the width of the menu itself. It was never centered "exactly" in the center for me.