28172 sujets

CSS et mise en forme, CSS3

Centrer x colonnes de largeurs differentes

Bonjour a tous,

Je viens faire appel a vos connaissances car malgré mes recherches je n'ai pas trouvé mon bonheur.

Je cherche a avoir un conteneur dans lequel je voudrais mettre images et/ou paragraphes texte et que suivant le nombre d'images ou de paragraphes, le tout s'aligne et se centre sur ma page.

L'etat actuel des choses: en html j'ai un bloc "conteneur", pere de "x" div "colonne":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		<link href="style.css" rel="styleSheet" type="text/css"/>
	</head>

	<body>

		<div id="contenu">
			
			<div class="conteneur">
				<div class="colonne">texte 1</div>
				<div class="colonne">
					<img src="img1.jpg" alt="illustration"/>
				</div>
				<div class="colonne">texte 2 blablabla ...... sgdf sdfg sdf sdfgsdfgdsf sdfgdsfgergerg ergergsdfgsdfg ergergdfgdsfg ergergd fgdfge rgergerger</div>
				<div class="colonne">
					<img src="img2.jpg" alt="illustration"/>
				</div>
			</div>
							
			<div class="espace"></div>

		</div>

	</body>

</html>


en css j'ai ceci :

body {background:#456;width:800px;margin-left:0;margin-right:0;margin:auto;}

#contenu{border:3px solid #345; margin:5px 5px 5px 5px;background: #789}

.conteneur{text-align:center;width:100%;margin-left:auto;height:1%;}

.colonne{display:inline-block; text-align:left; width:150px; padding:10px; background:#eee;}

.espace{clear:both;}


j'arrive à un centrage de mes colonnes, mais
- mes images sortent de leurs div si j'ai trop de colonnes
- j'ai une largeur de colonne fixée dans le css

J'aimerais adapter la largeur des colonnes et des images suivant le nombre de colonnes qu'il y aurait dans le conteneur.


J'effectue mes tests sous un Mac avec Firefox 3 pour l'instant. Le but final sera de faire tourner sous FF 3 et IE7

Voila j'espere avoir été clair dans mes explications
Merci d'avance
Modifié par zoowy (21 Jul 2008 - 13:09)
Bonjour,

display: inline-block ne marchera pas:
- sur Firefox 2;
- sur IE 6 et 7 s'il n'est pas utilisé sur des éléments de type en-ligne (par exemple des SPAN).
On peut tricher un peu mais le résultat n'est pas garanti et peut éventuellement (voire presque automatiquement pour Firefox 2) être casse-gueule.

La solution la plus simple à l'heure actuelle est d'utiliser un tableau.
Bonjour, et merci pour ta reponse.

J'ai bien lu l'article parlant des nouveautés CSS dont display:inline-block mais je pensais qu'il serait geré par IE7.... merci pour la précision.

Je craignais la réponse des tableaux et bien c'est en plein dans le mille. Il n'y a vraiment aucune gestion dynamique avec les CSS? autrechose qu'une taille en pixels, centimetres, pourcentage?
Sujet clos
Aller à