Problemas com dimensionamento e posicionamento de elementos.
Olá pessoal.
Eu estou com alguns problemas ao desenvolver um layout para o meu site. Não sou um desenvolvedor profissional propriamente dito, sou meio novato nessa área.
É o seguinte: eu quero que os boxes da minha página - #besqinicial, #bloco0, #adsense3 - fiquem alinhados e quero que a div #principal ajuste sua altura de acordo com os conteúdos. O div #besqinicial deve ficar à esquerda e o div #bloco0 deve ficar no centro e à direita. O problema é que usando posicionamento relativo (position: relative) para a div #bloco0, quando a altura da div #besqinicial aumenta, #bloco0 desce deixando um espaço acima. Quando uso posicionamento absoluto, a div #principal encolhe e não se ajusta à altura dos elementos-filhos. Usando-se float:left em div #besqinicial, as divs dentro da div #bloco0 (#slides, #destaques, #coluna1, #coluna2) ficam bagunçadas, fora do lugar no lado esquerdo.
O código vai abaixo, desculpe se estiver meio porco. Agradeço desde já.
<html>
<head>
<title>Meu site</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div id="geral">
<div id="cabecalho">
<div id="menucorp"></div>
<div id="bloco">
<div id="logo"></div>
<div id="adsense1"></div>
</div>
<div id="barranav">
</div>
</div>
<div id="principal">
<div id="besqinicial">
<div id="adsense2"></div>
</div>
<div id="bloco0">
<div id="bloco1">
<div id="slides"></div>
<div id="destaques"></div>
</div>
<div id="bloco2">
<div id="coluna1">
<div class="categoria">
<div class="etiqueta">
<span>Notícias</span>
</div>
<div class="itens">
<div class="item">
<a href="#teste">
<img src="vs.jpg"/>
<b>Titulo do item</b><br>
<span>Lancado novo Motorola Moto G 2014 no pais</span>
</a>
</div>
<div class="item">
<a href="#teste">
<img src="iphone_6.png"/>
<b>Titulo do item</b><br>
<span>Lancado novo iPhone 6 da Apple. Com tela retina. Deve chagar ao pais em breve;</span>
</a>
</div>
<div class="item">
<a href="#teste">
<img src="yt.png"/>
<b>Titulo do item</b><br>
<span>A FT preparou para voce um exclusivo tutorial ensinando metodos para baixar videos do maior site do genero no mundo</span>
</a>
</div>
</div>
</div>
<div class="categoria">
<div class="etiqueta">
<span>Noticias</span>
</div>
<div class="itens">
<div class="item">
<a href="#teste">
<img src="vs.jpg"/>
<b>Titulo do item</b><br>
<span>Lancado novo Motorola Moto G 2014 no pais</span>
</a>
</div>
<div class="item">
<a href="#teste">
<img src="iphone_6.png"/>
<b>Titulo do item</b><br>
<span>Lancado novo iPhone 6 da Apple. Com tela retina. Deve chagar ao pais em breve;</span>
</a>
</div>
<div class="item">
<a href="#teste">
<img src="yt.png"/>
<b>Titulo do item</b><br>
<span>A FT preparou para voce um exclusivo tutorial ensinando metodos para baixar videos do maior site do genero no mundo</span>
</a>
</div>
</div>
</div>
</div>
<div id="coluna2"></div>
</div>
<div id="adsense3"></div>
<div style="clear:both;"></div>
</div>
<!--APENAS PÁGINA INICIAL FIM-->
<!--APENAS POSTAGENS-->
<div id="conteudo">
<div id="titulo"></div>
<div id="compartilhar"></div>
<div id="corpo">
<div id="imagem">
<div id="legenda"></div>
</div>
</div>
<div id="sugestoes"></div>
</div>
<div id="barraesq"></div>
<div id="barradir"></div>
<!--APENAS POSTAGENS FIM-->
</div>
<div id="rodape"></div>
</div>
</body>
<html>body{
margin: 0px 0px 0px 0px;
padding: 0px;
background-color: grey;
clear:both;
}
#geral{
align: center;
width: 1024px;
height: auto;
margin: auto;
padding: 0px;
background-color: white;
}
#menucorp{
width: 1024px;
height: 40px;
}
#bloco{
width: 1024px;
height: 80px;
margin: 0px;
padding: 0px;
background-color: white;
}
#barranav{
width: 1024px;
height: 40px;
margin: 0px;
padding: 0px;
background-color: green;
}
#principal{
display: block;
position: relative;
width: 984px;
height: auto;
margin: 0px;
padding: 20px;
}/*#besqinicial, #slides, #destaques, .bloco1{
margin-bottom: auto !important;
}*/
#besqinicial{
position: relative;
width: 300px;
height: auto;
margin: 0px;
padding: 0px;
overflow: visible;
}
#adsense2{
position: relative;
width: 300px;
height: 600px;
background-color: lightblue;
}
#bloco0{
position: absolute;
width: 664px;
height: auto;
margin: 0px;
padding: 0px;
top: 20px;
left: 340px;
}
#bloco1{
display: block;
position: relative;
width: 664px;
height: auto;
}#slides, #destaques{
display: block;
position: relative;
height: 287px;
margin: 0px;
}
#slides{
top: 0px;
left: 0px;
float: left;
width: 430px;
background-color: pink;
}
#destaques{
margin-left: 450px;
width: 214px;
background-color: lightgreen;
}
#bloco2{
display: block;
position: relative;
width: 664px;
height: auto;
}#coluna1, #coluna2, .categoria, .etiqueta, .itens, .item, .item a{
width: 322px;
}#coluna1, #coluna2{
display: block;
position: relative;
height: auto;
}
#coluna1{
background-color: ;
float: left;
}
#coluna2{
background-color: lightgrey;
margin-left: 20px;
}
.categoria{
display: block;
margin: 0px;
padding: 0px;
}
.etiqueta{
display: block;
height: 20px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
background-color: ;
}.etiqueta span{
height: 20px;
margin: auto;
margin-top: 10px;
font-family: Candara;
font-size: 20;
color: orange;
text-align: left;
}
.itens{
width: 322px;
margin: 0px 0px 0px 0px;
}.item a{
display: block;
width: 100%;
height: 70px;
margin: 0px 0px 10px 0px;
padding: 0px;
font-family: Calibri;
font-size: 12;
color: grey;
text-align: justify;
text-decoration: none;
}.item a:hover{
color: green !important;
}.item a img{
float: left;
width: 100px;
height: 70px;
margin: 0px;
margin-right: 10px;
border: solid 1px grey;
z-index: 1;
}.item a:hover img{
margin: -1px 9px 0px -1px;
border-width: 2px;
border-color: green;
}Discussão (2)
Carregando comentários...