28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Voilà je souhaiterais afficher des miniatures dans un bloc prédéfini. J'ai réussi puisque mes miniatures s'affichent bien les unes à côtés des autres (3 au maximu), en revanche, lorsqu'il n'y en a 5 : 3 dans une ligne et deux dans l'autre, elle ne se positionne pas correctement...

Voici mon code HTML :

<div id="catalogue_conteneur_series">
      <? echo $resume;?>
      <br /><br />		
<?
$req_couv=mysql_query($sql_couv) or die (mysql_error());
while ($couv=mysql_fetch_array($req_couv)) 
{					       
        $couv_manga=$couv['couverture'];
?>
	<img src="<? echo $couv_manga?>" height="100" width="90">
<? } ?>
</div>


Et ici le css :

 #catalogue_conteneur_series {
	position:relative;
	top:40px;
	left:0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:11px;
	text-align:justify;
	margin:0 0 0 0;
	padding:0 0 0 0; 
	width:370px;
}


J'espère que vous comprenez d'où vient mon problème parce que je ne sais pas si je suis très claire.

Merci d'avance pour votre aide et bonne fin de journée Smiley cligne

Aurélie
Modifié par lilie507 (12 Feb 2006 - 22:37)
Déjà, ça serait sympa de donner de l'HTML et pas de l'HTML + PHP. On s'y retrouverait déjà mieux... Smiley biggol

Et pis, avec une page ou alors une capture d'écran, ça parlerait aussi un peu plus. Parce que "ne se positionne pas correctement", c'est un poil vague Smiley sweatdrop

Enfin :
	position:relative;
	top:40px;
	left:0px;

Suis pas sûr que ça soit indispensable, ou que ça ne puisse pas te jouer des tours... Je ne sais pas ce que tu veux faire exactement, mais est-ce qu'un margin-top: 40px; ne suffirait pas ?
Pour des images plus espacées :
Il faut savoir que les images (balise <img ... /> sont des éléments de type en-ligne. C'est à dire qu'une image se comporte exactement comme un caractère (une lettre) dans un paragraphe.

C'est d'ailleurs ce qui explique ton problème ! Ton conteneur était en text-align: justify;. Du coup, tes trois premiers "mots" sont répartis sur toute la largeur de la ligne, tandis que tes deux derniers "mots" (fin du paragraphe) sont alignés à gauche. Remplace tes cinq images par 5 mots avec à peu près la même longueur, et tu verras que c'est exactement la meême chose.

Maintenant, pour ton problème, on a donc deux solutions :

Solution n°1 :
On garde le comportement par défaut des images (elles sont traitées comme des caractères), et pour les espacer on rajoute des espaces. Comme en HTML les espaces consécutifs sont supprimés (le navigateur n'en affiche qu'un), on peut utiliser des espaces insécables (&nbsp;).
<img ... /> &nbsp;&nbsp;&nbsp; <img ... /> &nbsp;&nbsp;&nbsp; <img ... />

Pas super élégant, mais pas bien méchant.

Solution n°2 :
On va dire aux images de se comporter comme des éléments de type bloc, ce qui nous permettra de leur attribuer des marges (qui ne seraient pas prises en compte par des éléments de type en-ligne).
#catalogue_conteneur_series img {
	display: block;
	float: left;
	margin: 10px 14px; /* 10px en haut et en bas, 14 à gauche et à droite */
}

Attention, comme on a utilisé la propriété float: left, les éléments flottés (les images) vont sortir du flux normal de leur conteneur, qui ne s'étendra pas en hauteur pour les contenir (dans les navigateurs respectant à peu près correctement les CSS).

Donc on se reportera à cette page pour en savoir plus sur cet effet secondaire indésirable :

Test : éléments flottants qui dépassent de l'élément parent
Modifié par mpop (21 Feb 2006 - 19:34)
Merci beaucoup mpop je comprend beaucoup mieux d'ou provenait le problème de mes images et de savoir ce petit truc je pense que je vais faire beaucoup moins d'erreur maintenant Smiley cligne ou que tout du moins je vais enfin comprendre d'où elles viennent !

J'ai opté pour la solution
overflow:auto;

qui marche très bien Smiley smile

Merci beaucoup et bonne fin de soirée!

Aurélie
Modifié par lilie507 (12 Feb 2006 - 22:38)
lilie507 a écrit :
J'ai opté pour la solution
overflow:auto;

qui marche très bien Smiley smile

Il faudra que je tanne Laurent Denis pour avoir ses sources sur ce sujet Smiley biggrin
Edit : d'autant plus que j'ai constaté un bug d'affichage avec FF 1.0...
Modifié par mpop (14 Feb 2006 - 00:08)