Element leaves the place in "out-zoom"

Question

Element leaves the place in "out-zoom"

Navigation

#1 by (7 votes)

7

In this site , the menu is ul inline , it is inside div with indefinite width of dark color. In ul I put margin-left to align with the bottom blocks ...

It happens that in another resolution or when shooting the zoom it leaves the place, unlike the other elements.

I'm having the same problem with the logo, so I put it inside a paragraph with align-center .

How can I resolve 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;
}

css posicionamento

asked by anonymous 26.10.2014 / 00:10

1 answer

Best way to do an Action that does not return data How to get a C # Liststring and send to a JS variable?

score 7 · Accepted Answer

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

Solution center menu

If you want to always be centered, just remove the left margin of your .menu ul , and in the nav define tag:

nav{
  text-align:center;
}

The visual result is the same and whenever the menu is enlarged or reduced, the menu is always aligned to the center.

Left-alignedmenusolutionofblocks

Youmentionedinthecommentsthattheideaistohavethemenualignedtotheleftinrelationtotheblocksbeneathit.

Forthistobepossible,your<nav/>tagmustbeformattedinthesamewayasthewrapperoftheblockssothattheyareinthesamepositionrelativetotheviewport.

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

Your <ul/> should then get definitions to align it in the desired zone:

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

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