Estrutura CSS doida

Leandro Vale · Maio 9, 2011

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):

está assim (2):

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> 
<!-- parceiros !-->

Nandel · Maio 9, 2011

Posta o html completo.

Leandro Vale · Maio 9, 2011

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>

<!-- ícone navegador !-->
<link rel="icon" type="image/png" href="icon.png"  />
<!-- externos !-->
<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> 
<!-- parceiros !-->
<div class="middlee">
<div class="cab_middle"><img src="imagens/cert_online.gif" width="95" height="40" />
 <hr/>
</div>
oi
</div> <!-- middle !-->

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

<!-- Próximos Cursos !-->
<div class="proximos">
<div class="prox_div"><img src="imagens/pro_cur.gif" width="180" height="19" /><hr/>
</div>
oi
</div>  <!-- Próximos Cursos !-->
</div>
</div>
<!---- container !---->
</body>
</html>

Jhony ZaM · Maio 10, 2011

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 · Maio 10, 2011

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> 
<!-- parceiros !-->

<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> <!-- middle !-->

<!-- Próximos Cursos !-->
<div class="proximos">
<div class="prox_div">PRÓXIMOS CURSOS<hr/>
</div>
Curso 1
</div>  <!-- Próximos Cursos !-->
</div>
</div>
<!---- container !---->
</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 · Maio 13, 2011

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

Entrar

Arquivado

Estrutura CSS doida

Recommended Posts

Leandro Vale 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nandel 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Vale 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhony ZaM 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Leandro Vale 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante