Ir para conteúdo

POWERED BY:

Arquivado

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

CarlosAdriano

Problemas com dimensionamento e posicionamento de elementos.

Por , em Desenvolvimento frontend

Recommended Posts

CarlosAdriano    0

CarlosAdriano
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Adicione:

 

#principal { overflow: auto; }
Vc não deve usar nem relative e nem absolute. Apenas float e margin.

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