Ir para conteúdo

POWERED BY:

Arquivado

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

Fatimamaria

estrutura

Por , em Desenvolvimento frontend

Recommended Posts

Fatimamaria    0

Fatimamaria
Postado

Olá pessoas

 

 

Será que poderiam dar uma ajudinha? Queria saber se podem me ajudar a elaborar uma estrutura nos parametros desta figura: Estrutura (layout)

 

To tentando fazer mas só consigo fazer os quadros do lado do outro, veja:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Teste</title><style type="text/css">p { margin: 0 0 15px 0; }#geral { background-color: #CCCCCC;	width: 770px; font: 7.5pt Verdana, Tahoma, Arial; }#topo {	background-color: #CC8000;	height: 100px;	font: 7.5pt Verdana, Tahoma, Arial; }#menu, #lateral { width: 100px;	background-color: #CCCCCC;	padding: 10px;	font: 7.5pt Verdana, Tahoma, Arial; }#menu { float: left; } #lateral { float: right; } #conteudo {	background-color: #FFFFFF; margin: 0 100px; padding: 10px; font: 7.5pt Verdana, Tahoma, Arial; }#rodape { background-color: #CC8000; height: 30px; clear: both;	font: 7.5pt Verdana, Tahoma, Arial; }</style></head><body><div id="geral"><div id="topo"><h1>Topo</h1></div><div id="menu"><p>teste para o menu</p></div><div id="lateral"><p>teste lateral</p></div><div id="conteudo"><p>teste para conteudo.</p><p>pulando linha</p></div><div id="rodape"><h3>rodap</h3></div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz Henrique    1

Luiz Henrique
Postado

Fiz rapidão to sem tempo, mas fiz compreendível, ta bem simples, só tem que rever os tamanhos mas a estrutura css dele é essa

#geral {width:770px;}#topo {width:770px;}#banner {width:770px;}#centro {width:770px;} #esquerdo {} #esquerdo_materias {width:570px;} #esquerdo_menu {width:100px; float:left;} #esquerdo_destaque {width:470px;float:left;} #parceria {width:1000px;float:left;}#rodape {width:770px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fatimamaria    0

Fatimamaria
Postado

Olá graffittero,

 

Dei uma alterada, eliminei mais dois campos, só uma dúvida, quando eu abro ele no IE fica configurado certinho, mas no FF cada quadro se mistura. De alguma forma tem como bloquear isso? na lateral direita o quatro não sobe fica uma parte cinza para preencher

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Teste</title><style type="text/css">p { margin: 0 0 15px 0; }#geral {width:770px; background-color: #CCCCCC; font: 7.5pt Verdana, Tahoma, Arial;}#topo {width:770px; background-color: #CC8000;  height: 100px;  font: 7.5pt Verdana, Tahoma, Arial; }#banner {width:770px; background-color: #CC7600;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#centro {width:770px; background-color: #CC5600;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#esquerdo { background-color: #CC5600;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#esquerdo_materias {width: 620px; background-color: #CC4600;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#esquerdo_menu {width:150px; float:left; background-color: #CC3300;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#esquerdo_destaque {width:470px; float:left; background-color: #ffffff;  height: 100px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }#parceria {width:150px; background-color: #cc3399;  height:100px;  font: 7.5pt; Trebuchet Ms", Verdana, Tahoma, Arial; }#rodape {width:770px; background-color: #886699;  height: 50px;  font: 7.5pt "Trebuchet Ms", Verdana, Tahoma, Arial; }</style></head><body><div id="geral"><div id="topo"><h1>Topo</h1></div><div id="banner"><p>banner</p></div><div id="esquerdo_materias"><h3>esquerdo matérias</h3></div><div id="esquerdo_menu"><h3>esquerdo menu</h3></div><div id="esquerdo_destaque"><h3>esquerdo destaque</h3></div><div id="parceria"><h3>esquerdo parceria</h3></div><div id="rodape"><h3>rodapé</h3></div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Fatimamaria, você chegou a ler aqueles artigos do Bruno que eu indiquei?

Entrou no site do maujor?

 

As respostas para as suas dúvidas estavam nesses links!!!

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fatimamaria    0

Fatimamaria
Postado

Oi gio!

 

Eu si sim, aliais, estou achando bastante matérias sobre tableless e css, as vezes fico na dúvida, mas depois de procurar quando não acho eu posto aqui, mesmo assim são bem atenciosos comigo.

 

aproveitando, deixa eu fazer uma pergunta boba, esta é a maneira correta de inserir um include?:

 

<div id="topo"><!--#include file="../includes/header.asp" --></div>

sabe por que eu pergunto?, bom quando eu insiro o include, a pagina chama certinho, mas o div de baixo atropela o include.

 

nessa inclusão estou usando um tamanho para o topo do site de 770 de largura por 100 de altura, porém mesmo eu indicando a altura na css o topo (onde esta armazenado as fotos fica desconfigurado... não sei se estou fazendo besteira

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fatimamaria    0

Fatimamaria
Postado

É dessa forma que insere o include sim, só estava em dúvida se é correto fazer assim direto por que desconfigurou no FF, mas no IE abre certinho, da uma olhada: Meu Website de teste

 

Obs: o topo que é o include esta em tabela pois ainda não desvendei o mistério de como interpreta-lo após cortar as fatias e exportar pelo fireworks, mas só para ter uma idéia como ficou, logo abaixo outro include só que este será para o banner

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fatimamaria    0

Fatimamaria
Postado

pois é, comecei fazer no braço mesmo, pois se deixar o FW sóo cria tabela, que aliais ja poderia mudar não é mesmo?Assim que terminar se tiver erro eu posto aqui.

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