Publicado em 11 de jan.

Bug de Div aumentar verticalmente

Bom dia galera! Fiz meu portfólio, e resolvi deixar ele nos padrões web, então resolvi faze-lo em tableless (é meu primeiro travabalho c/ tableless). Só que, No FF3 e G.Chrome fica tudo ok, mas no IE, 1div aumenta seu comprimento vertical, e eu já tentei várias coisas mas não deu certo. http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Visualização no FF http://img157.imagevenue.com/img.php?image...K_122_881lo.JPG

Visualização no IE http://img104.imagevenue.com/img.php?image...O_122_113lo.JPG

O CSS

/ CSS Document /
* { padding:0; margin:0;}
body {

	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #254D66;
}

#geral{
	background-image:url(images/fundo.jpg);
	background-repeat:no-repeat;
	background-color:#186C98;
	width:1000px;
	height:800px;
	position:relative;
	vertical-align:top;
}
#logo{
float:left;
	width:143px;
	height:141px;
	position:relative;
	top:0px;
	left:828px;
	display:inline;
}
#logo2{
float:left;
	width:225px;
	height:45px;
	position:relative;
	top:2px;
	left:-110px;
	display:inline;
}
#lastworks{
float:left;
	width:112px;
	height:23px;
	position:relative;
	top:160px;
	left:-310px;
	display:inline;
}
#box_site{
float:left;
	width:545px;
	height:244px;
	position:relative;
	top:189px;
	left:-310px;
	display:inline;
	background-color:#254D66;
	border-color:#006699;
}

 #box_site2{
 float:left;
 width:545px;
 height:244px;
 position:relative;
 top:109px;
 left:58px;
 display:inline;
 background-color:#254D66;
 border-color:#006699;
 }

#box_desc{
float:right;
	width:230px;
	height:170px;
	position:relative;
	top:15px;
	left:-15px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	display:inline;
}

 #box_desc2{
 float:right;
 width:230px;
 height:170px;
 position:relative;
 top:120px;
 left:-15px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFFFFF;
 display:inline;
 }

.box_logo{
float:right;
	width:282px;
	height:50px;
	position:relative;
	top:-55px;
	left:125px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FFFFFF;
	display:inline;
}

 .box_logo2{
 float:right;
 width:282px;
 height:50px;
 position:relative;
 top:-120px;
 left:-105px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:24px;
 color:#FFFFFF;
 display:inline;
 }

.box_status{
float:right;
	width:64px;
	height:27px;
	position:relative;
	top:-55px;
	left:600px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FFFFFF;
	display:inline;
}
 .box_status2{
 float:right;
 width:64px;
 height:27px;
 position:relative;
 top:-135px;
 left:370px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:24px;
 color:#FFFFFF;
 display:inline;
 }

.box_setas{
float:right;
	width:115px;
	height:110px;
	position:relative;
	top:10px;
	left:240px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	display:inline;
}

 .box_setas2{
 float:right;
 width:115px;
 height:110px;
 position:relative;
 top:-60px;
 left:10px;
 font-size:12px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 display:inline;
 }

O Site

<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>David Asbahr Pedoneze Personal Portfólio - contato@davidpedoneze.com - Wellcome</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="geral">
	<div id="logo"><img src="images/logo.jpg" alt="David Pedoneze Portfólio" width="143" height="141" /></div>
	<div id="logo2"><img src="images/dp.jpg" alt="davidpedoneze.com" width="225" height="45" /></div>
	<div id="lastworks"><img src="images/lastworks.jpg" alt="LastWorks" width="112" height="23" /></div>
	<!-- BOX de exibição do site 01 -->
	<div id="box_site"><img src="images/boxh.jpg" width="544" height="4" alt="" /><img src="images/boxv.jpg" width="4" height="236" alt="" /><img src="images/site_mb.jpg" alt="Móveis Brazão" width="536" height="236" border="0" align="top" /></div>
	<div id="box_desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br />
 <br />
 <br />
 <br />
 <a href="#"><img src="images/more.jpg" alt="more" width="38" height="11" border="0" align="right" /></a><br />
	</div>
	<div class="box_logo">Móveis Brazão </div>
	<div class="box_setas"><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/prog.jpg" alt="Programação" width="81" height="17" /><br />
 <br /><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/anim.jpg" alt="Programação" width="57" height="17" /><br />
 <br /><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/design.jpg" alt="Programação" width="38" height="16" /></div>
	<div class="box_status"><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/on.jpg" alt="online" width="34" height="14" /></div>
	<!-- FIM BOX 01
 BOX exibição do site 02 -->

	<div id="box_site2"><img src="images/boxh.jpg" width="544" height="4" alt="" /><img src="images/boxv.jpg" width="4" height="236" alt="" /><img src="images/site_bw.jpg" alt="Móveis Brazão" width="536" height="236" border="0" align="top" /></div>
	<div id="box_desc2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br />
 <br />
 <br />
 <br />
 <a href="#"><img src="images/more.jpg" alt="more" width="38" height="11" border="0" align="right" /></a><br />
 </div>
	<div class="box_logo2">Best Way</div>
	<div class="box_setas2"><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/prog.jpg" alt="Programação" width="81" height="17" /><br />
 <br /><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/anim.jpg" alt="Programação" width="57" height="17" /><br />
 <br /><img src="images/ok.jpg" alt="ok" width="25" height="27" /><img src="images/design.jpg" alt="Programação" width="38" height="16" /></div>
	<div class="box_status2"><img src="images/x.jpg" alt="ok" width="25" height="27" /><img src="images/off.jpg" alt="online" width="39" height="14" /></div>

</div>
</body>
</html>

-- Códigos Validados pelo w3.org --

Bem, como é meu primeiro tabalho, se verem algo errado no code postem ae se possível :D

vlws xD

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carlos Designer· 11 de jan.

Opa!

então ONeW,

Acho que você usou muito position relative, talvez isso que esteja causando esses problemas.

Seu site esta um pouco mal estruturado, eu faria da seguinte maneira:

Separaria o topo do resto do conteudo com uma div de altura que vai ate o cabeçalho "last works".

"lastworks" é uma imagem, então você pode aplicar um margin-botton nela para afastar a parte inferior.

Na parte dos trabalhos:

Crie uma div que contera todos os dados do trabalhos (foto e descrição)

Flutue a imagem do trabalho a esquerda e para por aquela borda azul nem precisa usar uma div de container da imagem, use a propriedade border da propria imagem e aplique a borda.

Crie uma div que contera os dados do trabalho e flutue a esquerda ou direita e para ajustar as distancias entre os elementos use margem, não position top ou afins.

O titulo do trabalho você pode colocar num cabeçalho h1.

A lista de coisas que você fez (programação, animação etc) use uma lista ul flutuada a esquerda.

A descrição do trabalho coloque em uma div também flutuado a esquerda.

Aquele botão "more" coloque numa div logo abaixo da div de descrião.

Para elementos que a formatação se repete use sempre classes ao invés de id's, um caso é esse contem a imagem e descrição dos trabalhos que é sempre igual.

Evite o uso excessivo de position relative, eu só uso em casos extremos.

Bom, é isso espero que as dicas lhe ajudem!

Aprendiz CSS· 12 de jan.

não li o seu post inteiro, mas observeri algumas coisas

todos os position são mesmo necessários?

o IE tem a particularidade de aumentar a div para o conteudo "caber" dentro dela..

por isso ocorre o seu problema

tente apenas a critério de teste usar o overflow: auto

verá o que acontecerá

abraço

ONeW· 23 de jan.

valeu galera, eu to vendo isso agora, porque fiquei muito sem tempo, mas eu to com uma dúvida, como vou cadastrar todos os trampos em um BD, eu irei fazer um laço de repeticao p/ mostrar os trabalhos, como posso fazer para que o bloco abaixo tome posicao de referencia do bloco acima?

-- edit 01

comecei usar margin para posicionar, no FF ficou certinho, mas no IE todo zuado, ele não entende as margens left e right, aumenta todas...

-- edit 02

E outra, posicionem embasado de margin o "davidpedoneze.com" e embaixo fui posicionar o LASTWORKS, mas ele não pega como 0 a margin do brownser e sim o final da img davidpedoneze.com! neste caso eu não posso usar position:absolute ?!?