dio.henrique Postado Janeiro 22, 2008 Denunciar Share Postado Janeiro 22, 2008 ..Então Galera, desculpa incomodá-los com perguntas bobas, mas queria uma ajudinha d vocês...Bom, comecei a estudar CSS e HTML agora, enfim, estou com uma duvidazinha..quero criar um Layout da seguinte maneira:Top3 ColunasBottomO problema é que quando insiro a "div" - Bottom, o espaço se aloja no lugar da coluna da direita, como se fossem uma só..Estes são meus códigos:HTML -------------------------------------------------------------------------------------------------------------<html><head><link rel=stylesheet href="estilo.css" type="text/css"><title></title></head><body> <div id="site"> <div id="topo"> <div id="picture"> <img src="maya.png" alt="Maya"> </div> <p class="vermelho2">DiO</p> </div> <div id="col1"> <p class="vermelho">Left</p> </div> <div id="col2"> <p class="vermelho">Center</p> </div> <div id="col3"> <p class="vermelho">Right</p <div id="bottom"> <p class="vermelho">Bottom</p </div></div> </div></body></html>CSS-------------------------------------------------------------------------------------------------------------------body { background-image: url("fundo.jpg")}#site { margin: 80px 0 80px 80px; width: 826px; height: 450px; border-top:1px solid #666; border-bottom:1px solid #666; border-left:1px solid #666; border-right:1px solid #666; border-color: #DCDCDC;}#topo { width: 824px; height: 100px; text-align: left; border-bottom:1px solid #666; border-color: #DCDCDC;}#col1 { width: 212px; height: 250px; float: left; text-align: center; border-bottom:1px solid #666; border-color: #DCDCDC;}#col2 { width: 400px; float: left; height: 250px; text-align: center; border-bottom:1px solid #666; border-left:1px solid #666; border-right:1px solid #666; border-color: #DCDCDC;}#col3 { width: 212px; height: 250px; float: left; text-align: center; border-bottom:1px solid #666; border-color: #DCDCDC;}#bottom { width: 824px; height: 100px; text-align: left;}.vermelho { text-align: center; margin-top: 30px; color: #FF0000;}.vermelho2 { text-align: left; margin-top: 30px; color: #FF0000;}#picture { float: left; width: 100px;}Então..se alguém quiser me dar uma dica de como criar um código melhor...agradeço desde já...!Valeuz...!! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 KaKarotto Postado Janeiro 23, 2008 Denunciar Share Postado Janeiro 23, 2008 Bom seu código Css tá imenso para só isso que quer fazer, mas pra quem está começando é completamente normal.A lógica no seu Css tá perfeita...Apenas o html está pecando, tem div que não fecha, tem paragrafo também sem fechar. Presta atenção no html...Akeleabrasssssss Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
dio.henrique
..Então Galera, desculpa incomodá-los com perguntas bobas, mas queria uma ajudinha d vocês.
..Bom, comecei a estudar CSS e HTML agora, enfim, estou com uma duvidazinha..quero criar um Layout da seguinte maneira:
Top
3 Colunas
Bottom
O problema é que quando insiro a "div" - Bottom, o espaço se aloja no lugar da coluna da direita, como se fossem uma só..
Estes são meus códigos:
HTML -------------------------------------------------------------------------------------------------------------
<html>
<head>
<link rel=stylesheet href="estilo.css" type="text/css">
<title></title>
</head>
<body>
<div id="site">
<div id="topo">
<div id="picture">
<img src="maya.png" alt="Maya">
</div>
<p class="vermelho2">DiO</p>
</div>
<div id="col1">
<p class="vermelho">Left</p>
</div>
<div id="col2">
<p class="vermelho">Center</p>
</div>
<div id="col3">
<p class="vermelho">Right</p
<div id="bottom">
<p class="vermelho">Bottom</p
</div>
</div>
</div>
</body>
</html>
CSS-------------------------------------------------------------------------------------------------------------------
body {
background-image: url("fundo.jpg")
}
#site {
margin: 80px 0 80px 80px;
width: 826px;
height: 450px;
border-top:1px solid #666;
border-bottom:1px solid #666;
border-left:1px solid #666;
border-right:1px solid #666;
border-color: #DCDCDC;
}
#topo {
width: 824px;
height: 100px;
text-align: left;
border-bottom:1px solid #666;
border-color: #DCDCDC;
}
#col1 {
width: 212px;
height: 250px;
float: left;
text-align: center;
border-bottom:1px solid #666;
border-color: #DCDCDC;
}
#col2 {
width: 400px;
float: left;
height: 250px;
text-align: center;
border-bottom:1px solid #666;
border-left:1px solid #666;
border-right:1px solid #666;
border-color: #DCDCDC;
}
#col3 {
width: 212px;
height: 250px;
float: left;
text-align: center;
border-bottom:1px solid #666;
border-color: #DCDCDC;
}
#bottom {
width: 824px;
height: 100px;
text-align: left;
}
.vermelho {
text-align: center;
margin-top: 30px;
color: #FF0000;
}
.vermelho2 {
text-align: left;
margin-top: 30px;
color: #FF0000;
}
#picture {
float: left;
width: 100px;
}
Então..se alguém quiser me dar uma dica de como criar um código melhor...agradeço desde já...!
Valeuz...!!
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.