28220 sujets

CSS et mise en forme, CSS3

Eviter les tableaux :(

Pages :
Bonjour !
Dans le but d'eviter un tableau pour une gallerie d'image, j'ai essayé de me servir de float:left; sur des div pour afficher mes articles, appréciant l'effet du contenu sorti du flux (le fait qu'il redescende en fonction de la taille du conteneur) je m'entete a me servir de ce procédé, seulement ... impossible de laisser centrer la ligne .. J'avais laissé ca de coté Smiley ohwell je my replonge :'( quelqu'un a - t'il une solution ? voici mon code, ainsi qu'une illustration du rendu ^^

<style>
	div.container {
    	background-color: #D7E7F2;
   		border: 1px solid #287CB1;
	}
	div.spacer {
 		clear: both;
 	}
 	div.float {
 		float: left;
 	}
	div.float p {
 		text-align: center;
  	}
</style>
<div class="container">
	<div class="spacer">&nbsp;</div>
	<div class="float">
 		<img src="image1.gif" width="100" height="100" alt="image 1" /><br />
 		<p>légende 1</p>
 	</div>
	<div class="float">
 		<img src="image2.gif" width="100" height="100" alt="image 2" /><br />
 		<p>légende 2</p>
	</div>
	<div class="float">
 		<img src="image3.gif" width="100" height="100" alt="image 3" /><br />
 		<p>légende 3</p>
	</div>
	<div class="spacer">&nbsp;</div>
</div>


http://siris.nexenservices.com/julien/ex.jpg
Modifié par Goodgod (26 Apr 2005 - 11:48)
Goodgod a écrit :
pas de réponse oO ?
C'est infaisable ou trop complexe ? peut-etre stupide ^^" ?


Bonjour,
Peut-être simplement es-tu trop impatient, ça fait moins d'une heure que tu as posté? Smiley cligne
Connais-tu les listes de définitions (<dl>), une présentation sur Pompage.net est disponible, une des utilisations est une galerie d'images.
Modifié par Igor (26 Apr 2005 - 12:50)
Désolé de mon empressement ^^"

Igor :
Pour ce qui est de ton lien, il correspond a faire ce que j'ai, avec des listes plutots que des div mais ne m'apporte aucune solution quand au centrage de ces listes dans un conteneur, puisque ces <dl> sont en float:left; ^^

Maxwell :
je crois que ton lien va enfin m'apporter une solution !
Je regarde plus amplement ca, et reviendrai confirmer et marquer comme résolu le sujet. Merci
Toujours moi ^^
malhereusement non, le lien donné a toujours le même problème que ma gallerie, si on reduit a peine la fenetre et provoque juste la mise a la ligne d'un div, la ligne en question souffre d'une grande marge vide sur la droite Smiley ohwell

Quelqu'un aurait-il une autre solution ?
En gros, tu ne veux pas que les cases passent à la ligne au redimensionement de la fenetre ?

Si c'est ça (sinon, je capte rien du tout à ton problème), tu met tes images dans un conteneur, et tu met une taille à ton conteneur.
Olivier a écrit :

Si c'est ça (sinon, je capte rien du tout à ton problème), tu met tes images dans un conteneur, et tu met une taille à ton conteneur.


+1
même solution...
Bonjour ;
ben tu inclus tes 3 floats dans une boite de 300px de large, avec un margin auto :
div.boite {
width: 300px;
margin: auto;
}

Ta "boite" commence apres "container", et se finit juste avant...
(et je viens de tester, ça marche... pense à mettre [résolu], ensuite...)
ps : 300 px, parce que c'est la valeur de tes 3 images, sinon, faut changer...)
Modifié par Macpom (26 Apr 2005 - 14:51)
le fait est que pour l'exemple, j'ai trois boites, mais cette galerie a pour but de permettre aux grandes résolutions d'afficher autant de blocs par ligne que possible, en fait mon centeneur est a 90% de son conteneur ^^
En principes, ça doit aussi bien marché avec les pourcentages que les largeurs fixes : il faut donner une largeur, pour que "margin: auto" fonctionne.
ok, oui, ça coince : tes 3 boites se replacent à droite, dans la nouvelle créée, ce qui n'avance donc à rien, de cette façon...
Modifié par Macpom (26 Apr 2005 - 15:33)
voila ^^"

Je lutte depuis des jours sur ce problème et au plus j'avance, et plus je me dit qu'il n'existe pas de solutions Smiley ohwell est-il possible d'arriver a un résultat similaire sans utiliser le float ? par exemple en mettant mes div en display:inline ?
display marcherait si tu avais des listes, mais dès que tu utilises le <br /> pour revenir à la ligne, ça te remet tout à la ligne ; solution bâtarde : faire une liste de tes images, "display : inline;", puis la ligne d'en dessous, les légendes, mais ça se croiserait lors des redimensionnements...
Modifié par Macpom (26 Apr 2005 - 15:49)
En fin, une chose tout de même : tu peux éviter tes "spacer" en mettant du padding, ça fera des balises en moins dans le champs...
Pages :
Sujet clos
Aller à