Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
ola a todos.
Por gentileza, alguém pode me orientar como formatar este cabeçalho.
Preciso atualizar o site da empresa onde trabalho, pois o atual já esta bem velhinho. xD.
Então formatei a imagem abaixo, via Drawter, onde fica absolutamente perfeito.
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.pizzolattiseguros.com.br/cabecalho_ideal.png&key=79f44a3037dadacfb68fd49f2632170d1ce539f5feaa8d75c2224f47f7779dee" alt="cabecalho_ideal.png" />
Mas ao copiar o código e executar localmente, fica totalmente diferente.
Os Nodes:
1 - A parte azul é um fundo que se repete por toda a largura do cabeçalho (200px h a 100% width).
2 - é o banner da empresa com 870px width;
3 - menu topo
4 - menu inferior
5 - area para telefone (será usado um jscript para rolar os telefones)
6 - imagem para serviço de atendimento online (aqueles chats free online)
7 - area para quando clicar no logo da empresa.
abaixo o código gerado pelo Drawter,
que me resulta em apenas o box de cabeçalho com o fundo azul e todas as demais divs acavaladas no canto direito ( --->).
Agradeço imensamente, se alguém puder me orientar como acertar estes posicionamento.
Meu google está com todos os links de css position e css layout em "roxinho" visitado.
Não sei mais onde pesquisar.
Grato.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#node1
{
float: left;
width: 1543px;
background-color: #BAE568;
background-image: url(cabecalho.jpg);
height: 200px;
}
#node2
{
float: left;
width: 873px;
background-image: url(logo_com_fone.png);
background-repeat: no-repeat;
margin-left: 10%;
width: 870px;
}
#node3
{
float: left;
width: 390px;
background-image: url(retangulo_superior.png);
}
#node4
{
float: left;
width: 361px;
}
#node5
{
float: left;
width: 180px;
}
#node6
{
float: left;
width: 65px;
}
#node7
{
float: left;
width: 177px;
}
</style>
</head>
<body>
<div id="node1"></div><!-- #node1 end -->
<div></div><!-- #node2 end -->
<div>click logo</div><!-- #node7 end -->
<div>menutopo</div><!-- #node3 end -->
<div>feia</div><!-- #node6 end -->
<div>box telefone</div><!-- #node5 end -->
<div>menuinferior</div><!-- #node4 end -->
</body>
</html>>
Boa tarde,
Pode fazer mais ou menos assim:
Css
* {
margin:0;
padding:0;
list-style:none;
}
#box-cabecalho{
width:100%;
height:200px;
background-color:#39F;
}
#box-banner{
width:870px;
height:auto;
min-height:190px;
overflow:hidden;
background-color:#090;
margin-left:20px;
}
#box-logo{
width:15%;
min-height:150px;
border:1px solid #CCC;
margin-left:20px;
float:left;
}
#box-informacoes{
width:78%;
min-height:150px;
float:left;
margin:2px;
padding:3px;
background-color:#F00;
}
#box-menu-topo{
background-color:#000;
color:#FFF;
width:50%;
float:right;
height:50px;
}
#box-apoio{
height:auto;
overflow:hidden;
width:100%;
background-color:#FF0;
margin:3px;
}
#box-menu-inferior{
border:1px solid #CCC;
height:100px;
width:60%;
float:left;
margin:2px;
}
#box-telefone{
border:1px solid #CCC;
height:100px;
width:25%;
float:left;
margin:2px;
}
#box-feia{
border:1px solid #CCC;
height:100px;
width:12%;
float:left;
margin:2px;
}<header id="box-cabecalho">
<aside id="box-banner">
<aside id="box-logo">
<figure id="logo">logo</figure>
</aside>
<aside id="box-informacoes">
informações
<nav id="box-menu-topo">menu-topo</nav>
<aside id="box-apoio">
<nav id="box-menu-inferior">menu-inferior</nav>
<aside id="box-telefone">telefone</aside>
<aside id="box-feia">feia</aside>
box apoio central
</aside>
</aside>
</aside>
</header>Espero que ajude.
ficou perfeito.
brigadão.
Boa tarde,
Pode fazer mais ou menos assim:
Css
* {
Html
Espero que ajude.