Ir para conteúdo

POWERED BY:

Arquivado

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

maktub

Layout

Por , em Desenvolvimento frontend

Recommended Posts

maktub    0

maktub
Postado

Galera, estou tentando fazer um layout no formato igual da figura abaixo, mas não estou conseguindo, será que alguém pode me dar uma força nele

 

Imagem Postada

 

O código é este:

 

no htm

<div id="geral">	<div id="topo">topo</div>	<div id="banner">banner</div>	<div id="cc">		<div id="materia">materia</div>		<div id="menu">menu</div>		<div id="conteudo">conteudo</div>	</div>	<div id="parceria">parceria</div>	<div id="rodape">rodapé</div></div>
no css

body { font: 12px Verdana, Tahoma, Arial }#geral { width:770px; margin:0 auto } /*margin: 0 auto, somente para alinhar o layout ao centro*/#materia, #parceria, #menu, #conteudo { float:left }#topo, #banner, #materia, #parceria, #menu, #conteudo, #rodape { height:100px }  /*Este height ao meu ver não é necessário!*/#topo, #materia, #rodape { background:#eee } /*Background somente para identificar os divs*/#banner, #conteudo { background:#ddd } /*Background somente para identificar os divs*/#cc { width:620px; float:left } /*Englobador do #materia, #menu e #conteudo*/#materia { width:620px }#menu { width:150px }#conteudo { width:470px }#parceria { width:150px }#rodape { clear:both }

Consigo assim, mas deste jeito ai em cima não vai

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Pesquise sobre menu com abas aqui no fórum que você já vai conseguir fazer bastante coisa.Depois de pesquisar e ler, se surgirem novas dúvidas, volte a postar.[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Estude sobre montagem de layout, boas dicas:

 

- http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

- http://www.tableless.com.br/video-tutorial...tacao-de-layout

- http://www.web2ponto0.com.br/tutorial-layo...pleto-xhtmlcss/

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

maktub    0

maktub
Postado

Então, por isso não pedi do zero, criei esse mediante estudo, e queria saber como posso reconfigura-lo para ficar como o na figura

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Você quer dica ou quer que alguém monte o layout para você?

Se for só dicas, já foram dadas:

Estude sobre montagem de layout, boas dicas:

...

Pesquise sobre menu com abas aqui no fórum que você já vai conseguir fazer bastante coisa.

Depois de pesquisar e ler, se surgirem novas dúvidas, volte a postar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Surissoft.com    0

Surissoft.com
Postado

Cara, teu CSS não tinha nada do layout que você queria. :blink:

Fiz umas modificações, e ajustei pra você, só tá faltando o menu com abas em cima! Isto tu vai ter que pesquisar....

 

Sei não, mas acho que tu deveria estudar mais CSS, ta me parecendo que você não entende muito, de como montar layout com com web standards! <_<

 

 

Mas, todo caso...

 

Ai vai o código! ( E dá uma estudada apartir dele...) http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

HTML

 

<html>     <head>		          <link href="estilo.css" rel="stylesheet" type="text/css" />          <title>			               Ajuda          </title>     </head>	<body>     <div id="geral">                                     <div id="cabecalho">                   <div id="menu">                         menu                   </div>		                   <div id="chamada">                          chamada                   </div>	            </div>			           <div id="corpo">	                  <div id="materia">                          arquivo                  </div>                          <div id="conteudo">                          principal                  </div>            </div>                <div id="rodape">                   rodapé            </div>      </div>         </body></html>

CSS

 

 

body { font: 12px Verdana, Tahoma, Arial }#geral { 	width:700px; 	margin:0 auto;	float:left }#cabecalho {  	width: 700px;	height: 180px;	background:#ccc; 	}#corpo {	width:700px; 	float:left; } #menu { 	width:150px; 	background: #FFFFFF; 	margin-left: 15px; 	height: 150px;	float:left }#chamada { 	width:450px; 	background: #EEE; 	margin: 35px; 	height: 110px;	float:left }#materia { 	width:180px;	height: 300px;	background:#eee;	float:left }#conteudo { 	width:520px;  	height: 300px;	background:#ddd; 	float:left }#rodape { 	width:700px; 		height: 50px;	background:#bbb;	float:left }

Compartilhar este post

Link para o post
Compartilhar em outros sites

maktub    0

maktub
Postado

Maujor - Não expressei claramente, não quero que ninguém faça, só queria dicas como poderia reconfigurar, Obrigado.Surissoft.com - Obrigado pela força, certamente vou estuda-lo sim.

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