1

Olá.

Comecei a estudar front-end development recentemente(praticamente ontem) e estou tendo alguns problemas com CSS. Sou horrível com posicionamento das coisas, e o que me deixa furioso é que consigo fazer algumas gambiarras para deixar os elementos/itens bem posicionados na tela full, mas quando eu diminuo ela, os itens começam a sair do lugar, das caixas, dos headers etc. Fica tudo extremamente zuado.

Segue abaixo meu código e como ficou o menu.

obs: a classe "menu" está dentro da classe "containertopo".

*
{
 margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}

.containertopo
{
    position: relative;
    width: 100%;
    height: 79px;
    background-color:deepskyblue;
    opacity: 0.5;

}

.containertopo img
{
width: 99px;
float: left;
margin-left: 17%;
}


.menu
{

display: inline-block;
}

.menu ul
{
    margin-left:4em;
}

.menu ul li
{

    display: inline-block;
    margin: 2em;
}

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

2 Respostas 2

1

Apesar de não ter postado o seu HTML e não sabermos bem o que é o quê percebi o problema e acredito que consiga ajustar isto ao seu caso:

O truque neste caso é jogar com o comprimento em relação ao elemento pai, por ex <li> em relação a <ul> e <ul> em relação a <nav> etc.. e pô-lo em %, e também jogar com max-with

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

nav {
  background-color: coral;
  width: 100%;
}
ul {
  width:100%;
  max-width: 800px;
  margin: 0 auto;
  text-align:center;
  padding:0;
  font-size:0;
}
img {
  width:60px;
}
li {
  width: 20%;
  display: inline-block;
  font-size:16px;
  border: 1px solid;
  vertical-align:middle;
}
<nav>
  <ul>
  <li>
    <img src="https://i.ytimg.com/vi/bEFyV2JCjOM/hqdefault.jpg?custom=true&w=120&h=90&jpg444=true&jpgq=90&sp=68&sigh=q79Y1ZfIk-fsdzV2xpFk6xbvbTc">
  </li>
  <li>
    olá
  </li>
  <li>
    hey
  </li>
  <li>
    hello
  </li>
  <li>
    hola
  </li>
  </ul>
</nav>

Nota que com media queries você conseguia de facto mostrar um botão de menu se a janela estivesse a menos de X px, ou o logotipo desaparecer, etc...

PS: font-size: 0 é para retirar a margem com que os elementos filhos com display:inline-block ficam. Nunca percebi bem o porquê da margem acontecer. E box-sizing: border-box; é para a border ficar para dentro do elemento e não para fora, é só pelo exemplo.

0

Dê uma olhada nesse simples exemplo: http://codepen.io/colombe/pen/YqZKxL?editors=1100

O que eu te aconselho é:

  • Não use px (pixels), use porcentagens para dar tamanho. Para textos, use EM´s.

  • Aprenda a usar display:flex no seu contenedor (isso fará que todos os elementos DENTRO desse contenedor se alinhem de forma mágica).

  • Além de por display:flex no contenedor, acrescente: flex-flow: row wrap; (isso vira mágica ao diminuir a janela do navegador).

  • Quando você diminui MUITO a janela, coloque uma media-query (ou seja, nas últimas linhas do seu CSS, ponha algo assim: @media (max-width:400px){flex-flow:column nowrap;}

  • Vc está dizendo o seguinte: quando diminua pra menos de 399, em vez de que meu menu fique em uma linha, ficará em uma coluna!!! Tudo o que estiver dentro dessa DIV contenedor, se comportará assim!!!

Te mostro outro exemplo: http://codepen.io/colombe/pen/ezmjXq

Espero ter ajudado

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .