Bug quando separo o conteudo

[italogabriel 0]

bug

 

bom quando tento separar e colocar mais divs umas do lado das outras acontece o bug acima, vou postar o css da box e o css completo para ver se tem algo de errado

 

#box{ border-radius:5px; border-left: 1px #E1E1E1 solid; border-right:1px #E1E1E1 solid; background-color:#F0F0F0; height:auto; width:200px; float:left; padding:5px; margin:5px; border-top:#E1E1E1 1px solid; border-bottom:#E1E1E1 1px solid; }

#box-title{ border-radius:5px; background-color:#E6E6E6; width:200px; height:20px; color:#2A2A2A; font-weight: bold; text-align:center; font-size:12px; }

#box-image{ border-radius:5px; background-color:#FFF; width:190px; height:auto; margin-left:5px; margin-right:5px; margin-top:5px; }

#box-price{ border-radius:5px; background-color:#FFF; width:190px; height:20px; margin-left:5px; margin-right:5px; margin-top:5px; }

div

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img class="centralizar" src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img class="centralizar" src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img class="centralizar" src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

agora css completo

@charset "utf-8";
/* CSS Document */

/* Parte da Estrutura */

*{
padding: 0;
margin: 0;
right: auto;
}

body{
background-image:url(../images/bg.jpg);
background-repeat:repeat;
}

#header{
background:url(../images/header_bg.jpg);
height:117px;
margin:0 auto;
}

#logo{
background:url(../images/logo.jpg);
margin-top:0px;
margin-left:250px;
width:234px;
height:117px;
float:left;
}

#clear{
clear:both;
}
.clear{
clear:both;
}

#menu-top ul{
margin: 0;
padding: 0;
float:left;
margin-left:90px;
}
#menu-top ul li{
position:relative;
float:left;
list-style-type:none;
}
#menu-top ul li a{ 
display: inline-block;
font-family:Verdana, Tahoma, sans-serif;
font-size:11px;
float:left;
text-align:left;
display: block;
color:#0067f3;
text-decoration: none;
}
#menu-top ul li a:hover{ 
font-family:Verdana, Tahoma, sans-serif;
font-size:11px;
display: block;
text-align:left;
color:#ff6600;
float:left;
text-decoration: none;
}
#menu-top ul li ul li{
display: list-item;
float: none;
color: black;
display: block;
text-decoration: none;
}

#home a{
background:url(../images/home.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;	
}
#home a:hover{
background:url(../images/home.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#home2 a{
background:url(../images/home.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#servicos a{
background:url(../images/servico.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#servicos a:hover{
background:url(../images/servico.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}
#servicos2 a{
background:url(../images/servico.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}

#quem a{
background:url(../images/quem.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#quem a:hover{
background:url(../images/quem.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#quem2 a{
background:url(../images/quem.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#contato a{
background:url(../images/contato.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#contato a:hover{
background:url(../images/contato.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#contato2 a{
background:url(../images/contato.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}

#orcamento a{
background:url(../images/orcamento.png) no-repeat top;
text-indent:-9000px;
width:119px;
height:117px;
}
#orcamento a:hover{
background:url(../images/orcamento.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;
}
#orcamento2 a{
background:url(../images/orcamento.png) 0px 113px ;
text-indent:-9000px;
width:119px;
height:117px;	
}

#content{
height:900px;
widht:50px;
background-color:#FFF;
}

#nav-container{ 
margin:0 auto; 
width:980px; 
min-width:800px; 
background:#FFF; 
box-shadow:0 0 2px #CCC; 
}

#container{ 
margin:0 auto;
width:930px; 
}

#conteudo{	
margin: 0; 
padding: 20px 0 30px 0; 
text-align: justify; 
color: #555; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #555;
line-height:19px;
}

#box{ border-radius:5px; border-left: 1px #E1E1E1 solid; border-right:1px #E1E1E1 solid; background-color:#F0F0F0; height:auto; width:200px; float:left; padding:5px; margin:5px; border-top:#E1E1E1 1px solid; border-bottom:#E1E1E1 1px solid; }

#box-title{ border-radius:5px; background-color:#E6E6E6; width:200px; height:20px; color:#2A2A2A; font-weight: bold; text-align:center; font-size:12px; }

#box-image{ border-radius:5px; background-color:#FFF; width:190px; height:auto; margin-left:5px; margin-right:5px; margin-top:5px; }

#box-price{ border-radius:5px; background-color:#FFF; width:190px; height:20px; margin-left:5px; margin-right:5px; margin-top:5px; }

#footer{
margin-top:30px;
line-height:30px;
background:#333;
color:#999;
text-align:center;
font-family:Verdana, Arial;
font-size: 11px;
}
/* ------------------------------------------------------ */
/* Necessários */

.centralizar{display: block; margin-left: auto; margin-right: auto }

hr { border: 1px dashed #EDEDED; margin: 5px; }

h1,h2,h3,h4,h5 { font-weight:400 }

h1 { font-size: 28px; padding: 10px 0 0; font-weight:700; }
h2 { font-size: 24px; padding: 10px 0 5px; }
h2 small { font-size:16px; }
h3 { font-size: 20px; padding: 0 0 0 7px; }
h4 { font-size: 19px; padding: 10px 0 5px 7px; font-family: 'PT Sans', Arial, Helvetica, sans-serif; color:#369; }
h5 { font-size: 19px; padding: 10px 0 5px 7px; font-family: 'PT Sans', Arial, Helvetica, sans-serif; color:#C03; }

/* ------------------------------------------------------ */
/* Slideshow */
				  				  
#slides{
widht:537px;
height:266px;
margin:0 auto;
overflow:hidden;
}

p{
text-align:center;
}

/* ------------------------------------------------------ */

por favor, se tivesem como ajudar!!, só falta isso para eu finalizar o website

 

[Diéssica 140]

Tem que limpar os floats.

 

Clearfix.

A solução mais simples é determinar

 

overflow: auto;

 

no elemento que compreende os produtos (acho que é o #content, no seu caso).

 

Tem várias soluções talvez até melhores na internet:

:seta: http://nicolasgallagher.com/micro-clearfix-hack/

:seta: http://www.positioniseverything.net/easyclearing.html

:seta: http://www.quirksmode.org/css/clearing.html

[italogabriel 0]

eu adicionei

<div style="clear:both;"></div> no final do código e funcionou

como eu já possuia o clear:both; como div mudei o style para <div id="clear"></div> e ficou perfeito!! o codigo HTML ficou assim

 

HTML

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>

<div id="box">
<div id="box-title">Notebook Dell 15 Polegadas</div>
<div id="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div id="box-price">Comprar</div>
</div>
<div id="clear"></div>
<hr/>

meu código ta limpo? sem aquelas gambiarras e tudo mais?

 

tem como examinar meu css e ver se ta tudo ok? se tem alguma coisa errada ou alguma gambiarra?

[William Bruno 1501]

um erro do seu código é q vc está duplicando IDs. ID é um identificador único.

 

Use classes neste caso.

[italogabriel 0]

porém preciso deles para adicionar mais produtos!, isto torna incorreto?, pois não vou programar o script que chama os produtos da db ainda

[William Bruno 1501]

está incorreto sim cara. Use classes:

<div class="box">
<div class="box-title">Notebook Dell 15 Polegadas</div>
<div class="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div class="box-price">Comprar</div>
</div>
 
<div class="box">
<div class="box-title">Notebook Dell 15 Polegadas</div>
<div class="box-image"><img src="images/images.jpg" width="119" height="118" /></div>
<div class="box-price">Comprar</div>
</div>

e ai vc troca no css:

.box{ ... }
 
.box-title { ... }

entendeu ?

vc não pode repetir IDs, por isso use classes.

[italogabriel 0]

William você é foda heauehae, entendi cara, putz chega parei pra pensar fez todo sentido agora, muito obrigado!!!!!!

 

@edit, deu na mesma, deu o mesmo bug ai tive que usar o clear:both; msm rs, mais sua dica foi muito boa cara, usar class em vez de div, po, muito melhor