Página distorce ao remover bordas

[caiohaag 0]

Oi pessoal.

Estou estudando html e css.

A pessoa que me ensinou deu a dica de colocar bordas vermelhas nos itens para eu enxergar os tamanhos de cada coisa durante a edição do css, porém eu fiz este projeto, e na hora de remover as bordas ele distorce.

Se alguém puder me dar uma luz de porque isso está acontecendo, eu fico agradecido.

 

https://github.com/caiohaag/polo360

 

Att.

Caio Haag

[dougtop 31]

Eu fiz a seguinte alteração no seu código html

<!-- Antes:

<h1>Polo 360 - My Kind of Business Blog</h1>
	<nav id="menu">
    <h1>Menu Principal</h1> 

Depois: -->

<h1 class="logo"></h1>
	<nav id="menu">
    <h1></h1> <!-- essa tag pode até ser retirada -->

Removi o conteúdo dos H1 já que você não está precisando mostra-los e criei uma class "logo" para que seu estilo do logo fique desvinculado do estilo do h1.

 

No arquivo css também houve modificação:

h1.logo {
    background: url(../_imagens/logo.png) no-repeat;
    height: 76px;
    width: 300px;
    text-indent: 9999px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;
    margin-top: 35px;
  	float: left;
}

h1{
	/* aqui entra qualquer estilo que você queira aplica à futuros H1 */
}

Pronto, agora se você tirar as bordas, nada de "estranho" acontecerá.

 

Aproveita e coloca no topo do arquivo css a instrução de reset para evitar problemas com margins, padding e outras propriedades que o navegador estiliza por padrão. É só colar esse código:

 

*{
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  box-sizing:border-box
}

 

Abraços!

[caiohaag 0]

Oi Doug.

Obrigado, funcionou.

Sobre o conteúdo no h1 do logo, me falaram que é padrão colocar o texto mesmo sem aparecer por motivos de SEO.

Tem algo a ver?

[dougtop 31]

3 minutos atrás, caiohaag disse:

Tem algo a ver?

 

Sim, faz sentido! Pode colocar o texto! Testei aqui e funcionou de boa com o conteúdo dentro do h1 do logo.

[dougtop 31]

Se você me permite, tenho uma sugestão de melhoria para o seu cabeçalho. Ao invés de usar os elementos flutuantes, use a propriedade float mesmo para organizar o layout. Deixe a propriedade position (absolute/relative) apenas para quando não tiver outro jeito (minha opinião).

 

Dessa forma eu mudaria no seu css:

nav#menu ul {
    /* list-style: none; */
    float: right;
    margin-top: 50px;
    /* position: absolute; */
    /* top: 34px; */
    /* right: 0px; */
}

header#cabecalho {
    /* position: relative; */
    border: 1px solid red;
    height: 137px;
    width: 940px;
    margin: 0px auto;
}

Abraços!

[caiohaag 0]

Realmente parece bem melhor.

Eu ainda não compreendi muito bem o comportamento do "position", estava só seguindo um tutorial.

Já o float eu entendo.

[dougtop 31]

Cara, tem um site muito bom mesmo que ensina css focado à criação de layout e ele fala sobre a propriedade position: http://pt-br.learnlayout.com/position.html

 

Se você clicar na home do site, vai ver que ele tem 19 páginas explicando as técnicas de criação com css! Vale muito à pena ver todas elas!

 

Abraço