formatação de cabeçalho
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>Discussão (2)
Carregando comentários...