Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

IgorR

Cabeçalho com 3 colunas

Recommended Posts

Olá a todos, após um longo tempo sem usar html estou esperimentando agora suas tags novas (html5) como também do css3.

 

Estou com a seguinte dúvida, preciso dividir o cabeçalho de minha página em 3 colunas e duas seçoes.

 

A primeira linha será dividida em 3 colunas, a #1 com uma linha horizontal, a #2 com um logo e a #3 com uma segunda linha horizontal.

Na seção abaixo irá ficar o menu que ainda estou para criar.

 

Primeiramente, gostaria de saber se estou usando as tags de forma correta, header, section e aside dentro das sections.

 

Segundo, a coluna da esquerda e da direita tem que estar numa altura x, mas a tag "top"nao funciona, a logo nao fica centralizada. O que tenho que colocar no css para os asides virarem 3 colunas com a da logo centralizada e as colunas laterais numa altura específica?

 

Aqui está o codigo html

<header>
 <section id="contentWrapper">
   <div id="hcenter><a href="#"><img src="_images/logosl.png" name="logoSL" width="179" height="132" " /></a></div>
   <aside id="hleft"></aside>
 <aside id="hright"></aside>
</section>
<section>MENU</section>
 </header>

 

e aqui o css.

#contentWrapper {
width: 100%;
overflow: hidden;
}

#hcenter {
border:none;
width:200px;
height:160px;
margin: 0 20px 0 20px; 
}

#hleft {
float: left;
display:block;
   border:none;
   color:#B0B0A6;
   height:2px;
   background:#B0B0A6;
width:30%;
top:20px;
}
#hright {
float: right;
display:block;
   border:none;
   color:#B0B0A6;
   height:2px;
   background:#B0B0A6;
width:30%;
top:50px;
}

 

Antecipo a atenção de todos, obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Essas duas colunas com linha horizontal, terão algum conteúdo?

Se a resposta for não, sugiro trabalhar com uma imagem de fundo no header e pronto.

A primeira linha será dividida em 3 colunas, a #1 com uma linha horizontal, a #2 com um logo e a #3 com uma segunda linha horizontal.

Na seção abaixo irá ficar o menu que ainda estou para criar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.