Problemas com estruturas em div

natoochrno · Novembro 23, 2012

Pessoal, estou montando uma página usando apenas divs (sem nenhuma table como estrutura), é o seguinte:

Montei uma DIV principal, onde todas as outras são montadas dentro dessa.

Depois coloquei uma div topo, uma div menu em baixo do topo, uma div à esquerda com 20% da largura da div-mãe, duas divs de conteudo (uma do lado da outra, mesma largura) e uma div de rodapé.

tava tudo lindo, até eu começar a fixar as divs na div mãe.

topo, div lateral, menu e rodapé estão lindamente no lugar certo.

O problema agora são as divs de conteúdo, que não estão querendo fixar abaixo do menu... os tutoriais que eu tentei usar eram em inglês e quase nunca tinham preview de renderização do código. E eu estou fazendo no curso. "porque VOCE não PERGUNTA PRO SEU PROFESSOR, SUA ANTA?"

Ou ele não tá com paciência pra explicar o que que eu fiz e manda eu fazer tudo de novo, ou ele diz que não sabe.

Estou usando o Dreamweaver pra fazer a página,.. o código tá assim:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#DIVMAE {
    width:900px;
    padding: 0;
}
#TOP {
    width:900px;
    height:100px;
}
#MENU {
    width:900px;
    height:30px;
    padding: 0;
}
#COMENT {
    width:180px;
    height:456px;
    display: block;
    padding: 0;
}
#CONTEUDO {
    left:190px;
    width:360px;
    display: block;
    float: right;
    padding: 0;
}
#CONTINT {
    left:550px;
    width:360px;
    float:right;
    display: block;
    padding: 0;
}
#RODAPE {
    width:900px;
    height:20px;
    clear: both;
    display: block;
}
</style>
</head>
<body>
<div id="DIVMAE">
  <div id="TOP">TOPO</div>
  <div id="MENU">MENU</div>
  <div id="COMENT">COMENT</div>
  <div id="CONTEUDO">CONTEUDO</div>
  <div id="CONTINT">CONTINT</div>
  <div id="RODAPE">RODAPE</div>
</div>
</body>
</html>

Tem que ser uma página sem table como estrutura, só posso usar as divs, mas tá bem complicado... Se alguém aí pode ajudar, desde já, agradeço.

Nosreve · Novembro 23, 2012

Se eu entendi você quer colocar a div COMENT, CONTEUDO e CONTINT uma do lado da outra certo? As 3 em baixo da div MENU?

Se for isso eu modifiquei no seu codigo apenas o float: right que você colocou, coloquei tudo float: left, e tambem coloquei float: left na div COMENT que não tinha, para ir do lado dela as outras duas divs

segue o código alterado, coloquei uma cor de background em cada div só pra ficar melhor visivel, mas depois tu tira


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#DIVMAE {
    width:900px;
    padding: 0;
}
#TOP {
    width:900px;
    height:100px;
	background-color:#999999;
}
#MENU {
    width:900px;
    height:30px;
    padding: 0;
	background-color:#666;
}
#COMENT {
    width:180px;
    height:456px;
    display: block;
	float:left;
    padding: 0;
	background-color:#FF0;
}
#CONTEUDO {
    width:360px;
    display: block;
	float:left;
    padding: 0;
	background-color:#0F0;
}
#CONTINT {
    width:360px;
    display: block;
	float:left;
    padding: 0;
	background-color:#00F;
}
#RODAPE {
    width:900px;
    height:20px;
    clear: both;
    display: block;
	background-color:#0FF;
}
</style>
</head>

<body>
<div id="DIVMAE">
  <div id="TOP">TOPO</div>
  <div id="MENU">MENU</div>
  <div id="COMENT">COMENT</div>
  <div id="CONTEUDO">CONTEUDO</div>
  <div id="CONTINT">CONTINT</div>
  <div id="RODAPE">RODAPE</div>
</div>
</body>
</html>
[/codebox]

Entrar

Problemas com estruturas em div

Pergunta

natoochrno

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Nosreve

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades