Publicado em 9 de mai.

Estrutura CSS doida

Pessoal to com uma dúvida horrível.

Estou com um site e uma única div do site está dando um trabalho enorme.

Enquanto era para estar assim (1):

/applications/core/interface/imageproxy/imageproxy.php?img=http://img821.imageshack.us/img821/8238/55136360.gif&key=c4df03e8de3e0e83a6193882c7dcd90e5ed8edd10c67d37946da68d1e35e8b3f" alt="55136360.gif" />

está assim (2):

/applications/core/interface/imageproxy/imageproxy.php?img=http://img689.imageshack.us/img689/5619/80053751.gif&key=5454e72efc24f0399171d8c642e31e7ea3c3f362487b1394e75e7d94984c4c91" alt="80053751.gif" />

o interessante é que quando deixo a DIV ENQUETE em cima da DIV PARCEIROS ele fica correto (como mostrado na imagem 2), mas quando deixo ao contrário (que é assim que deve ficar) volta pra bagaceira da imagem 1

Segue o código das duas divs e da parte do HTML:

CSS

 .enquete {
display: block;
float: right;
width: 228px; height: 80px; margin-right: 15px; margin-top: 15px;
background-color: #fff;

border: 1px; border-style:solid; border-color:#999; }

.parceiros {
clear: both;
float: right;
position: relative; font-align: center;
width: 228px; height: 110px; vertical-align: text-bottom; margin-right: 15px; margin-top: 15px;
background-color: #fff;

border: 1px; border-style:solid; border-color:#999; }

HTML

<div class="enquete">
<div class="cab_destaques">Enquete</div>

ooioioi

</div>

<div class="parceiros">
<div class="cab_destaques">Parceiros</div>
<img src="imagens/parceiros/imagem.gif" width="220" height="73" /></div>

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Nandel· 9 de mai.

Posta o html completo.

Leandro Vale· 9 de mai.

>
Posta o html completo.

<!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>Title</title>

<link rel="icon" type="image/png" href="icon.png" />

<link rel="stylesheet" type="text/css" href="css/paginas.css"/>
<link rel="stylesheet" type="text/css" href="css/box.css" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('.boxgrid.caption').hover(function(){
 $(".cover", this).stop().animate({top:'110px'},{queue:false,duration:160});
 }, function() {
 $(".cover", this).stop().animate({top:'120px'},{queue:false,duration:160});
 });
 });
	</script>
</head>

<body>
<div class="cab"></div>
<div class="container">
<div class="conteudo_cab">
<div class="logo"> <a href="index.html" title="Página inicial" /> <img src="imagens/logo.png" alt="Logo" width="362" height="95"/></a> </div> <!-- logo !-->
<div class="menu"></div>
</div> <!-- conteudo cabeçalho !-->
<div class="banner">
 <div class="banner"> <img src="imagens/banner/1.jpg" width="900" height="374""/></div>
</div>
<div class="main">
<div class="cont_1">

	<div class="conte_1_quadros">
<div class="boxgrid caption">
<a href="#" title="teste" /> <img src="imagens/bg1.jpg" alt="bg1" /> </a>
<div class="cover boxcaption">Agende um treinamento conosco</div>
</div>
	<div class="boxgrid caption">
	<div class="cover boxcaption">Cursos Realizados</div>
 </div>

<div class="boxgrid caption">
<div class="cover boxcaption">Agende um treinamento conosco</div>
</div>

<div class="boxgrid caption">
<div class="cover boxcaption">Classificados
</div>
</div>

</div>
</div> <!---- Quadros !---->

<div class="destaques">
<div class="cab_destaques"> Destaques</div>
</div> <!-- destaques !-->

<div class="enquete">
<div class="cab_destaques">Enquete</div>

ooioioi

</div>

<div class="parceiros">
<div class="cab_destaques">Parceiros</div>
<img src="imagens/parceiros/par.gif" width="220" height="73" /></div>

<div class="middlee">
<div class="cab_middle"><img src="imagens/cert_online.gif" width="95" height="40" />
 <hr/>
</div>

</div> <!-- middle !-->

<div class="middled">
 <div class="cab_middle"><img src="imagens/objetvs.gif" width="95" height="40" />
 <hr/><br>
 </div>
 oi
</div> <!-- middle !-->

<div class="proximos">
<div class="prox_div"><img src="imagens/pro_cur.gif" width="180" height="19" /><hr/>
</div>

</div> <!-- Próximos Cursos !-->
</div>
</div>

</body>
</html>

Jhony ZaM· 10 de mai.

Pow mano, copiei seu codigo pra testar e taus pra ver oq tem de errado, o problema é que nao entendi o que voce quer voce postou imagens e me confundiu mais ainda, =/ tenta me explicar eu mecho uito com css e posso te ajudar hehe beleza abraco.

Leandro Vale· 10 de mai.

>
Pow mano, copiei seu codigo pra testar e taus pra ver oq tem de errado, o problema é que nao entendi o que voce quer voce postou imagens e me confundiu mais ainda, =/ tenta me explicar eu mecho uito com css e posso te ajudar hehe beleza abraco.

dei uma limpada, realmente botei coisa desncessária... rsrssr

o seguinte é que gostaria que minha estrutura ficasse organizada como na figura 1.

mas ela está desorganizando como na figura 2.

VEJA AI SE ESTÁ MELHOR:

<body>
<div class="cab"></div>
<div class="container">
<div class="conteudo_cab">
<div class="logo"> Logo </div>

<div class="menu"></div>
</div> <!-- conteudo cabeçalho !-->
<div class="banner">
 <div class="banner"> Banner principal aqui </div>
</div>
<div class="main">
<div class="cont_1">

 <div class="conte_1_quadros">
<div class="boxgrid caption">Agende um treinamento conosco</div>
</div>
 <div class="boxgrid caption">
 <div class="cover boxcaption">Cursos Realizados</div>
 </div>

<div class="boxgrid caption">
<div class="cover boxcaption">Agende um treinamento conosco</div>
</div>

<div class="boxgrid caption">
<div class="cover boxcaption">Classificados
</div>
</div>

</div>
</div> <!---- Quadros !---->

<div class="destaques">
<div class="cab_destaques"> Destaques</div>
</div> <!-- destaques !-->

<div class="enquete">
<div class="cab_destaques">Enquete</div>

ooioioi

</div>

<div class="parceiros">
<div class="cab_destaques">Parceiros</div></div>

<div class="middlee">
<div class="cab_middle"><hr/>
</div>
Quado 1</div> <!-- middle !-->

<div class="middled">
 <div class="cab_middle"><hr/><br>
 </div>

Quadro 2 </div>

<div class="proximos">
<div class="prox_div">PRÓXIMOS CURSOS<hr/>
</div>

Curso 1

</div> <!-- Próximos Cursos !-->
</div>
</div>

</body>
</html>

O CSS:

/ --------------------------------------------------------------- INICIAL /

.cont_1 { / grade das 4 opções situada na home /

display: block; width: 625px; height: 330px; float: left;
background-color: #ccc; margin-left: 15px; margin-right: 10px;
}

.cont_1_quadros {
width: 625px; height: 330px;
margin-left: auto;
margin-right: auto;
}

.destaques {
display: block;
float: right;
position: relative;
width: 228px; margin-right: 15px;
background-color: #eae6e6;
border: 1px; border-style:solid; border-color:#999;
height: 237px;

 }

.cab_destaques { / cabeçalho de todos os quadros detaques /

width: 228px; height: 20px; background-color: #3b3a3a;
font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: #FFF;
padding-top: 5px; text-align: right;
}

.cab_destaques li {
display: inline; margin-left: 5px; margin-right: 10px; }

.enquete {
display: block;
float: right;
width: 228px; height: 80px; margin-right: 15px; margin-top: 15px;
background-color: #fff;

border: 1px; border-style:solid; border-color:#999; }

.parceiros {
clear: both;
float: right;
position: relative; text-align: center;
width: 228px; height: 110px; vertical-align: text-bottom; margin-right: 15px; margin-top: 15px;
background-color: #fff;

border: 1px; border-style:solid; border-color:#999; }

.depoimentos {
clear: both; float: right; position: relative; text-align: center;
width: 228px; height: 100%; margin-right: 15px; margin-top: 15px;

background-color: #fff; border: 1px; border-style:solid; border-color:#999; }

 .int_depo {
display: block; width: 218px; height: 100%; margin-right: 15px; margin-top: 15px; font: 10px "verdana"; color: #000; text-align: justify;

margin: auto; margin-top: 5px; margin-bottom: 5px; }

.middled {
display: block; width: 290px; height: 100px; float: left;
background-color: #fff;
margin-left: 17px; margin-top: 10px;
font-size: 10px; text-align: justify; font-family: Verdana, Geneva, sans-serif;
}

.middlee {
display: block; width: 290px; height: 100px; float: left;
background-color: #fff;
margin-left: 17px; margin-top: 10px;
font-size: 10px; font-family: Verdana, Geneva, sans-serif; text-align: justify;
}

.cab_middle {
width: 290px; height: 51px;
float: left; position: relative;
font-family: Verdana, Geneva, sans-serif; font-size: 18px;
background-image: url(../imagens/arrow_left.gif);

background-repeat: no-repeat;background-position: right center; }

.cab_middle hr { / linhas do cabeçalho middle /
border-top: thin; margin-top: 4px; }

.proximos { /próximos cursos /
display: block; float: left; width: 620px; height: 130px;
background-color: #fff; margin-left: 15px; margin-right: 10px; margin-top: 10px; }

.proximos hr {

width: 100%; border-top: thin; color: #666; text-align: left;
 }

.prox_div {

width: 625px; height: auto; }

.item { width: 624px; height: 70px; background-color: #a0b14a }

.item_2 { width: 587px; height: 70px; background-color: #e7e3d9;
 font: 14px "Verdana"; Color: #666; text-transform: uppercase; font-weight: bold; }

Giovani· 13 de mai.

Galera, uma dica, é mais fácil postar link :D