Grow your CSS skills. Land your dream job.

problem centering CSS menu

  • # March 19, 2009 at 10:16 pm

    Hello, I am having a headache trying to center this menu, I hope this is simple but for the life of me I can’t seem to get it to center!

    The left and right blue lines must extend to the edge of the screen, but the buttons must be center aligned along its path…

    here is the url: http://www.fountain-city.com/archives/test/

    Thank you sooooo much for any help you can offer!!
    :D

    Sebastian.

    # March 19, 2009 at 11:56 pm

    The problem is all that display: block, float: left stuff… once you go there, no amount of text-align: center is going to save you. If the parent <ul> had a set width, you could center it with margin: 0 auto;, but you don’t, since it’s web text, it needs expand or shrink and be as wide as it needs to be…

    I screwed around with it a little, removing all that, and just making everything INLINE elements, so text-align center would work:

    http://css-tricks.com/temp/center/

    this is a little difficult with all the background image stuff going on. Keep in mind this is VERY MUCH untested. I just screwed around in firefox a little bit. If you intend to use it, make sure to do more robust testing.

    # March 20, 2009 at 2:26 am

    Chris you’re an Angel!! Thanks, you’ve really made me a happy camper. :D THANKS!!!

    [thanks for the tip with block and float; I was thinking it was possible to massage them to do whatever I would like, but you have proven me wrong, back to the pure inline! cheers!]

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".