Nav menu positioning issue on browser re-sizing or zoom

Discussion in 'CSS' started by Sergei Tatarinov, Sep 8, 2010.

0
  1. #1
    This is what I run into:

    .navigation-inside {
    background: url(images/menubar.png) top left no-repeat;
    width: 660px;
    margin: 0 0 0 142px;
    height: 38px;
    }

    this part affects the menu position after zooming in/out within the browser.

    I tried removing the margin and adding position property.
    For example, if I change the margin property to "0 auto", which obviously should center the element, then the menu stays seemingly attached to the slider, and causes no problem while zooming in/out.

    So, this doesn't actually solve the problem. Bugs still occur if I zoom in/out significantly.

    Here's what I added to the style:

    .navigation-inside {
    background: url(images/menubar.png) top left no-repeat;
    width: 660px;
    margin: 0 auto;
    position: relative;
    left:-160px;
    height: 38px;
    }


    PS: the url is howtohollywoodvideo.com
     
    Sergei Tatarinov, Sep 8, 2010 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well by adding left:-160px; You are positioning the element according to the browser window rather than it being static so obviously it is always staying -160px from the center of the window, and when the window becomes small this causes it to run off the edge of the window etc...

    Why don't you change #navigation from:
    
#navigation {
width: 100%;
margin: 0 auto;
position: relative;
[B]left:0;
float: left;[/B]
color: #fff
font-color: #fff;
font-size: 140%;
font-family: Verdana;
}
    Code (markup):
    to:
    
#navigation {
[B]width: 980px;[/B]
margin: 0 auto;
position: relative;
[B]clear:both;[/B]
color: #fff
font-color: #fff;
font-size: 140%;
font-family: Verdana;
}
    Code (markup):
    And remove any margins + paddings from #navigation-inside. Because the rest of your layout is 980px and you've got this set at 100% so it's causing in-differences.

    The other alternative is to add a 980px centered wrapper around the whole page, rather than having to go through it with every element.
     
    wd_2k6, Sep 8, 2010 IP
  3. Sergei Tatarinov

    Sergei Tatarinov Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks! The new code has fixed the nav bar alignment, but now I'm facing another problem: how do I make the TEXT, that is in the menu, to get positioned properly?

    Here's what it is like now:

    .menu {
    width: 660px;
    padding: 6px 4px 0 4px;
    color: #fff;
    }

    .menu a {
    display: block;
    position: relative;
    }

    And it sticks to the left border of the nav bar, I tried adding margins and padding to center it, but nothing worked.

    Any heads up?

    Thank you
     
    Sergei Tatarinov, Sep 10, 2010 IP