28220 sujets

CSS et mise en forme, CSS3

Enfin.... mon dernier probleme avant que mon site soit quasiment opérationel.

j'ai fait une boite présentant des produits en ligne, il y a une seule ligne et 3 produits sur cette ligne.

l'ensemble de ces produits et dans un cadre contenant un fond et une bordure.

voila j'explique maintenant ou et le probleme.

Des que je passe le conteneur du produit en float pour avoir chacun de mes produits en ligne le conteneur d'encadrement perd ca hauteur. et les produits se retrouve pas dans le cadre. (c'est pas facile a expliquer)

voici le code html


<div class="titrepprod">
	<h3>Les internautes ayant acheté ont également acheté</h3>
<?php
    while ($var = tep_db_fetch_array($var_query)) {
               echo '<div class="ayantacheter">
<a href="#">[IMAGE PRODUIT]</a><br /><a href="#">[NON PRODUIT]</a></div>';
		
      }
	?>
</div>


et voici le code CSS



.titrepprod{
padding: 0px 0px 5px 0px;
border: 2px double #C8A79E;
background: url(images/fond.jpg);
}

.titrepprod h3{
background: url(images/cadre.jpg);
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-align: center;
}

/* Boite Ayant acheter DEBUT */
.ayantacheter {
background-color: #F5F4D9;
width: 160px;
text-align: center;
margin: 10px 11px 10px 11px;
padding: 10px 0px 10px 0px;
border: 2px dotted #FFFF99;
float: left;
}

.ayantacheter a img{
border: 1px solid #A46242;
background-color: FDFFD8;
}
/* Boite Ayant acheter FIN */



Si vous pouviez me donner un peu d'aide... car je n'arrive pas a comprendre pourquoi les <div> ayantacheter ne sont pas prix pour l'encadrement du conteneur global titreprod*

Merci d'avance

++
fab
Modifié par fab27 (06 Apr 2005 - 03:29)
c'est normal ça, un float fait sortir la boite de son flux, alors le conteneur parent prend la hauteur minimale...

Si tu veux un bordure sur la partie extérieure, rajoute un div qui fait le clear: both; afin de remettre le flux en normal avant la fermeture du conteneur parent.
Ok j'ai rajouté cela et effectivement ca marche mieux Smiley lol

je ne connaissais pas cette option, qui est fort sympathique d'ailleurs et tres utile.

Encore merci

++
fab
Administrateur
Fab27, crois-tu vraiment que le titre "Encore une question" est pertinent et indique de quoi parle ton sujet ?
Moi je ne crois pas Smiley decu

Pourrais-tu faire un réel effort à l'avenir pour éviter les titres qui ne veulent rien dire ? Merci d'avance.