28173 sujets

CSS et mise en forme, CSS3

Afficher des blocs float en galerie?

Bonjour,
je souhaite afficher sur une page des miniatures d'images avec du texte en dessous. Pour celà, je créé une div image

.image
{
display: block;
padding: 5px 10px;
border:solid 2px black;
width:200px;
margin:10px;
float:left;
text-align:center;
}


dans laquelle je met mon image et mon texte.
Et en mettant mes div à la suite, la galerie a une bonne tete.
Le problème a lieu quand le texte sous la miniature comporte une ligne de plus que celles qui sont à cotés: j'ai alors un décalage en dessous.
La preuve en images:
http://img440.imageshack.us/img440/2594/galleriecssui0.th.jpg

Je voudrais savoir comment faire pour éviter ce phénomène(qui est logique d'ailleur, vu mes margin).

Merci
Modifié par KOre_TecHS (05 Apr 2007 - 22:46)
Bonsoir,

Organiser des flottants en colonnes, surtout sur plus de deux colonnes, est très très prise de tête si je me souviens de mes derniers tests. Pour mémoire, ça donnait ça :
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

Si on ne craint pas les vides mais qu'on souhaite juste avoir à chaque fois trois blocs dont les bords supérieurs sont alignés, il faudra juste mettre un clear: left; tous les trois flottants (voir deuxième page des exemples liés ci-dessus). Mais ça marche mal dans IE.

À noter qu'on pourrait aussi utiliser un display: table-cell, mais là aussi ça bloquera avec IE, donc c'est pas la peine.

Une solution simple consisterait à placer chaque groupe de trois flottants (ou plus si on veut faire quatre ou cinq colonnes) dans un div, div qui pourra être en clear: left ou encore en overflow: auto (pour contenir les flottants et éviter les problèmes de dépassement des flottants), avec une propriété conférant le layout pour IE Win.
(Mais quelque chose me dit que là tout à coup ça a l'air compliqué ?)

Sinon, avec un tableau ça peut marcher pas mal. Smiley cligne
Florent V. a écrit :
Sinon, avec un tableau ça peut marcher pas mal. Smiley cligne

Oui un tableau peut être une solution simple et fiable si le nombre de
div images par ligne reste fixe et n'est pas amené à évoluer.
Mais cela peut porter atteinte au temps d'affichage du tableau sous IE:
en effet celui-ci attend de lire la balise de fermeture </table> avant
d'afficher le tableau.
Hermann a écrit :
Mais cela peut porter atteinte au temps d'affichage du tableau sous IE:
en effet celui-ci attend de lire la balise de fermeture </table> avant
d'afficher le tableau.
Même si tu spécifies la largeur des colonnes avec des éléments colgroup et col ?
Bonjour,

Pour les allergiques aux tableaux... Smiley murf 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css"> 
#conteneur
{
	width: 500px;
	margin: 50px auto 60px;
	text-align: center ;
	position: relative;
	background: yellow ;
}

#mini
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border: 2px solid #600000 ;	
	overflow: hidden;
	height:1%;
}

#mini li
{
	float: left;
	margin: 10px;
}

#mini li img {
	border: 1px solid black; }

#mini li span
{	
	display: block;
	width: 100px;
	border: 1px solid #494949;
	background: #fff;
}
  </style>
 
</head>
 <div id="conteneur">
	<ul id="mini">	
      <li><img src="imag1.jpg" alt="" /><span>texte</span></li>
      <li><img src="imag2.jpg" alt="" /><span>texte texte</span></li>
      <li><img src="imag3.jpg" alt="" /><span>M</span></li>
      <li><img src="imag4.jpg" alt="" /><span> texte texte texte texte</span></li>
      <li><img src="imag5.jpg" alt="" /><span>texte texte texte texte texte texte </span></li>
      <li><img src="imag6.jpg" alt="" /><span>texte</span></li>
    </ul>	
  </div>

</body>
</html>


Avec peut être un commentaire conditionnel pour diminuer le margin des images pour ie6, histoire de retomber sur la même mise en page.
Julien Royer a écrit :
Même si tu spécifies la largeur des colonnes avec des éléments colgroup et col ?

Ah ça j'en sais rien et à vrai dire je ne me suis jamais servi de ces attributs.
Pourquoi, tu as entendu parlé d'un rapport entre Colgroup/col et la lecture du tableau par IE?
Modifié par Hermann (06 Apr 2007 - 12:32)
Hermann a écrit :
Ah ça j'en sais rien et à vrai dire je ne me suis jamais servi de ces attributs.
Pourquoi, tu as entendu parlé d'un rapport entre Colgroup/col et la lecture du tableau par IE?
En fait ce sont théoriquement des éléments qui servent entre autres à permettre un rendu incrémental des tableaux. Mais je ne connais pas leur degré d'implémentation.
Merci pour les réponses.(désolé pour le retard, j'avais d'autres projets en cours)

Alors j'avais pensé à faire des divs 3 par trois et faire un clear left. Mais vu comment je génère le HTML par php, ca me ferait trop de travail en plus. Smiley rolleyes
Je vais donc tenter le tableau pour l'instant(meme si j'aime pas trop Smiley smile ), et essayer de comprendre la méthode de ghost

Encore merci, je vous tient au courant
Sujet clos
Aller à