Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704
    I'd like to add a drop-down menu on themebot.com. It needs to be light-weight and accessible for search engines. I've looked at Suckerfish, Suckerfish variations and other CSS-based drop down menus but I haven't found a technique that will work for this specific situation:

    1. The first requirement is that the menu needs to be centered with something like
    Code:
    margin:0px auto;
    . I can manually center the flat list by adding margin to the left side, but this will not work well because different browsers use different fonts and so the menu will be off-center in some browsers.

    The second requirement is that the menu items need to all have the same amount of padding on the right and left sides. The dropdown menus I've seen that can be centered use a set width for the list items. This adds a lot of unnecessary padding. For example, the menu items "FAQ" and "Website Templates" will both have the same set width. This limits the number of top level menu items that can be added and doesn't look very good.

    Does anyone know of a technique that works for both of the requirements above?

    Thanks in advance!

  2.  

  3. #2
    Senior Member Eddy Bones's Avatar
    Join Date
    Jan 2004
    Location
    Washington, USA
    Posts
    1,054
    Member #
    4651
    You can't center using margin: 0 auto; unless you have a set width, unfortunately. The only way to center without a width is to stick it in a table, as far as I know. :\ And that's not really a solution. I don't know of another way that doesn't involve javascript, and that just gets messy.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    I have in general found that same-width menu items actually look better and are more usable than variable-width items. Nonetheless, your problem here lies in the fact that list containers tend to expand to take up the whole width of their container unless explicitly told to do otherwise. In order for margin: 0 auto to take effect, the element has to be ready to fit its contents, which sadly ul elements are often reticent to do. So, you'll have to set an absolute width on the ul element for something good to happen. That's not necessarily impossible, but it means you'll either have to eyeball the size of the ul element or you'll have to give the contained lis a specific width so you can do the math for your ul's sizing. Make sure to double-check your math across browsers, though.

  5. #4
    Member undoIT's Avatar
    Join Date
    Jan 2007
    Posts
    70
    Member #
    14704
    Quote Originally Posted by Shadowfiend
    So, you'll have to set an absolute width on the ul element for something good to happen.
    I've tried that and the problem is that all of the li elements align left. So, it is necessary to make the width of the ul almost the width of the entire menu to get it centered. Then you deal with overflow problems for operating systems that use wider fonts or for people who just set their font larger.

    I'm beginning to think that it would be a lot easier and the code would be a lot cleaner if I just go with a CSS dropdown that has equal sized menu items. I'd just have to rethink the top level items so that they are more equal in width. Another advantage is that I could style the top level items more.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:17 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com