Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS HELP: Centering Vertical Drop Down Menu for ALL Screen Resolutions? – Code Available

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40094

    Hello,

    This is my first post woo hoo! I need HELP on centering this Vertical Drop Down Menu both horizontally **and** Vertically for all screen resolutions?

    **[See CSS CODE Stylesheet](http://differentregard.com/css/homebg.css “homebg.css”)

    **[Here is what the Menu looks like on the Website](http://www.differentregard.com/home.php “Home Menu CSS Issue”)

    #nav {
    float: left;
    width: 280px;
    position: absolute;
    top: 40%;
    left: 42%;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Century Gothic, sans-serif;
    color: #fff;
    list-style-type: none;

    I’ve been told to make it absolute. Sigh, right now either the menu moves up or down the larger the screen resolutions gets. Do I need to center the transparent bar too?

    #111101
    Senff
    Participant

    First: what should happen when you click on the first item? A submenu shows up but the dark bar in the middle doesn’t expand with it. Not sure if that’s what you intend or not.

    And yes, to center an element on page both horizontally and vertically, you’ll need the dimensions (fixed) and position it absolutely. A bit like this:

    #nav {
    position:absolute;
    left:50%;
    top:50%;

    width:340px;
    height:140px;

    margin-top: -70px /* half the height, negative */
    margin-left: -170px /* half the width, negative */
    }

    #111104

    Thank you Senff. What would the actual code be for the 280 width of my current menu?

    NOOB ALERT* And no I didn’t mean for that transparent bar not to extend with the drop down. LOL how can I change that?

    #111112
    Senff
    Participant

    @80sbaby: yea in your case 280 pixels. But you can make it smaller too, basically you just need the width that’s needed to contain all elements.

    I’d also remove padding from #nav, by the way.

    And of course — the #nav will be positioned absolutely, relative to any containers that are positioned relative. In this case, the clearbar.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.