Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
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?
>
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.
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!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.
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
Eu fiz a seguinte alteração no seu código html
<!-- Antes:
Depois: -->
h1.logo {
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:
*{