Problème avec Display:inline;

Bonjour à tous !

Bon voici mon problème:
J'ai une div contenant une photo et un paragraphe, tous les trois ( la div , l'image et le paragraphe ) ont l'attribut block. Jusque là tout fonctionne normalement.
Maintenant comme chaque div représente une photo , je veux qu'elles se mettent les unes à coté des autres jusq'au bout, puis continuer sur la ligne suivante , j'y ajoute donc " display : inline;" et là , c'est la catastrophe , ca fait n'importe quoi . . . Enfin ca fait n'importe quoi sur Opera et Firefox , avec IE ca donne le résultat que je veux.
Voici mon code ( Ne vous inquitez pas c'est du RoR ) :

<div class="appercut">
	<%= link_to image_tag(@chemin_vignette[photo], :alt => photo, :border =>"0"), :action => 'affiche_photo',:photo_nom => photo,:chemin_photo => @chemin_photo[photo]%>
	<p><%= photo %></p>
</div>

Ce qui me génére ca :

<div class="appercut">
	<a href="/admin/affiche_photo?photo_nom=100_3013&amp;chemin_photo=http%3A%2F%2Fcaptainflex.free.fr%2Fphotos%2FDublin%2FAvec_Margaux%2F100_3013.JPG"><img alt="100_3013" border="0" src="http://captainflex.free.fr/vignettes/Dublin/Avec_Margaux/100_3013.JPG" /></a>
	<p>100_3013</p>
</div>

et voici mon CSS :

div.appercut{
	display: inline;
	width: 4.5em;
	margin: 0.2em;
	border : 1px solid blue;
	text-align: center;
}
div.appercut img{
	display:block;
	width:3em;
}
div.appercut p{
	display:block;
	width:auto;
}

Vous pouvez voir ce que ca donne ici :

http://westelynck.ath.cx/admin/photos?chemin=%2Fhome%2Fjr%2FsitesWEB%2Fintranet%2Fpublic%2Fimages%2Fphotos%2FDublin%2FHowth_19.05.07%2F

Quelqu'un aurait une idée ?

Merci d'avance !

Bonjour,

Un élément en affichage de type en-ligne n'est pas censé contenir des éléments de type bloc, et ne peut pas être formaté comme un bloc (hauteur, largeur...).

La solution idéale serait d'utiliser display: inline-block, malheureusement :
- mal implémenté par IE ;
- pas du tout implémenté par Firefox ( ).

On devra donc se rabattre sur le positionnement flottant :

div.appercut {
	float: left;
	width: 90px;
	height: 120px;
	margin: 4px;
	text-align: center;
	border: 1px solid blue;
}

On peut tester ce que ça donne sans préciser de largeur (meilleure adaptation lors du redimensionnement du texte) ou avec une hauteur en EM plutôt qu'en pixels (voire une hauteur minimale avec min-height au lieu de height.

Avertissement d'ordre général :
Sauf exeception, ne pas utiliser les EM pour la largeur des blocs, les marges et les padding horizontaux, etc. Testes pour voir ce que donne l'agrandissement des caractères sur ta page : tout fout le camp. Notamment à cause de ceci :

div.corps {
	margin-left:12em;
	margin-right:12em;
}

C'est une bêtise à corriger en priorité.
On peut faire ceci :

div.corps {
	margin-left: 15%;
	margin-right: 15%;
}

C'est déjà beaucoup mieux.

Sinon, si on utilise les flottants, il faudra s'intéresser à ceci :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Modifié par Florent V. (26 May 2007 - 11:17)

ok merci beaucoup pour ta réponse. J'pensais pas à ca ! Dommage pour le inline-block ! =)

Bon bah tant pis avec Firefox pas moyen d'avoir un bon rendu , c'est la lutte . . . Donc , j'vais faire deux CSS un pour IE et un pour opera . . . Mais firefox tant pis ils n'ont qu'on à se mettre à jour !

Captainflex a écrit :
Bon bah tant pis avec Firefox pas moyen d'avoir un bon rendu , c'est la lutte

Avec inline-block ?

Avec les flottants, c'est tout à fait gérable.