Element moves out of place in "out-zoom"

Question

Element moves out of place in "out-zoom"

Asked 10 years, 2 months ago

Viewed 867 times

7

On this website, the menu is a ul inline, is inside the div with indefinite dark-colored width. In ul placed margin-left to align with the blocks below...

It turns out that at another resolution or when I zoom in it goes out of place, unlike the other elements.

I have the same problem with the logo, so I put her inside a paragraph with align-center.

How can I fix this?

.menu{ /* a div do menu logo acima dos blocos, resto do site*/
    padding:0.1px;
    background-color:#4e4c4f;
    letter-spacing:1px;
    text-transform:uppercase;
}
.menu ul{ /* o menu*/
    margin-left:420px;
}

What is "out-zoom"? In the content of the question there is no reference to this...

– brasofilo

2014/10/25 at 22:48
@brasofilo I meant resolution change, especially when zooming out in the browser.

– ropbla9

2014/10/25 at 22:51
Ahhh, so it’s cool [Dit] the question and clarify this, so whoever wants to answer has the whole panorama in the first reading.

– brasofilo

2014/10/25 at 22:57
I think I’ll give up this question and learn bootstrap not to go through it anymore. What do you think?

– ropbla9

2014/10/25 at 23:10
1

@ropbla9 sooner or later you’ll bump into things bootstrap doesn’t natively have and need pure CSS, so in the end it’s good to master CSS even if you’re going to use a framework in the future.

– Bacco

2014/10/25 at 23:17
1

Sopt: always have a player on Saturday night to take away that little CSS doubt :))

– brasofilo

2014/10/25 at 23:28
@Bacco, how far to positioning? All my "suffocation" is due to uaheu positioning

– ropbla9

2014/10/26 at 00:19
2

@brasofilo Why are you always the Bacco or Sergio who answers me? huaheua

– ropbla9

2014/10/26 at 00:20

Show 3 more comments

1 answer

Browser other questions tagged css positioning

You are not signed in. Login or sign up in order to post.

by Zuul • **35,190** points · Answer 1 · 2014-10-25T23:07:06+00:00

The problem is that you are manipulating the position of your menu using a left margin, but it is always the same depending on the zoom given to the page.

Menu solution in the center

If you want me to always be centered, just remove the left bank from your .menu ul, and on the tag nav defines:

nav{
  text-align:center;
}

The visual result is the same and whenever they enlarge or reduce the page, the menu is always aligned to the center.

Simulação do resultado final

Menu solution aligned to the left of the blocks

You mentioned in the comments that the idea is to have the menu aligned to the left in relation to the blocks below it.

To make it possible, your tag <nav/> should be formatted in the same way as wrapper blocks so that they are in the same position as the viewport.

.menu nav{
    margin: 0 auto;
    width: 1000px;
}

Your <ul/> should then obtain definitions to align it in the desired area:

.menu ul {
    margin-left: 9%;
}

In this way, they are both in exactly the same place relative to the left of the same:

Simulação do resultado final