Ir para conteúdo

POWERED BY:

Arquivado

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

barogana

formatação de cabeçalho

Por , em Desenvolvimento frontend

Recommended Posts

barogana    0

barogana
Postado

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.

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

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;
}

Html

<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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

barogana    0

barogana
Postado

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;
}

Html

<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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito