28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de blocs dans une colonne

Hello les forumeux,
j'viens de m'inscrire en me disant que je trouverai peut-être une solution ici. J'suis un nouveau converti aux CSS2 après avoir été longtemps adepte de l'intégration en <table>.

Ma question (illustrée) est la suivante :
Dans un site en plusieurs colonnes positionnées en relatif + float, je dois présenter une liste de produits.
Chaque produit va être présenté dans 1 div (?) où on affichera son nom, son prix, sa photo.

Je souhaiterai, comme dans l'illustration, présenter cette liste de produits en blocs (1 bloc = 1 produit) et que ces blocs soient séparés de 50 pixels. Mais je voudrais surtout utiliser qu'un seul type de bloc (1 seul div) pour que les blocs situés à gauche soient collés à gauche et inversement que ceux de droite soient collés à droite...

Vous comprendrez mieux avec l'image ci-dessous.

upload/5399-probleme.jpg

Pourquoi est ce que je souhaite garder un seul type de bloc ?
Car mes blocs produits seront générés depuis une base php qui ne fera que les positionner les uns à la suite des autres.
En gros, comment en 1seul div je peux placer mes blocs indifférement à gauche et à droite tout en conservant un espace de 50 pixels entre 2 blocs positionnés sur une même ligne...

Merci d'avance pour vos éventuelles solutions.

a+
Modifié par Jules75 (02 Mar 2006 - 14:01)
A priori, j'ai bien l'impression que je vasi être obligé d'adopter ce que je ne souhaitais pas faire : à savoir, un margin left et right quitte à ne pas aligner mes blocs avec le contenu texte du dessus...

Qu'en pensez-vous ?
Salut,

J'aurais une solution simple, avec une marge négative, mais après un rapide essai je vois que ça marche avec tous les navigateurs... sauf IE !

Si j'ai le temps ce soir, je verrai si je trouve une possibilité pour ce dernier.
A+
Avec une classe

div.produitGauche{
   float:left;
}

et une autre

div.produitDroit{
   float:right;
}

et une génération en php, tu as juste à alterner le style pour les produits.
et tous les deux produits, tu ajoutes ca :

<hr class="separation" />

qui possède le style suivant : 

hr.separation{
   visibility:hidden;
   clear:both;
}



J'ai pas testé (je vais le faire si j'ai le temps) mais ca doit pouvoir fonctionner Smiley cligne
Bon bah finalement j'ai eu du temps juste là ! Smiley biggol

donc va voir le lien suivant : http://zonezand.free.fr/bordel/bloc.html

j'ai donc créer une div centrale qui contient les div latérales. J'ai respecté ce que j'ai expliqué dans le post précédent, par contre les noms des classes et des identifiants ont changé.

dans l'exemple, la div "global" a une taille de 250px et chaque bloc une taille de 100px donc en toute logique la marge centrale est de 50px.

si tu veux la meme marge entre le haut et le bas, joue avec les propriétés des <hr>.
Resalut,

En fait, IE c'était rien, il fallait juste une largeur.

La liste suivante (avec des div se serait le même principe)
<ul id="produits">
	<li>produit 1</li>
	<li>produit 2</li>
	<li>produit 3</li>
	<li>produit 4</li>
	<li>produit 5</li>
</ul>

et en CSS
#produits, #produits li {
	margin: 0;
	padding: 0;
}
#produits li {
	display: inline; /* pour bug IE */
	float: left;
	margin-bottom: 20px;
	width:200px;
	height:200px;
	background:red;
	margin-left:50px;
}
#produits {
	margin-left: -50px;
	width: 500px;
	margin-top: 30px;
}

Bon après faut voir comment intégrer ça à ton site.

Je l'ai intégré par exemple sur un gabarit classique, ICI
J'ai testé cette page avec IE 5.0, 5.5, 6, Opera et FF. Aucun problème sur ceux ci.

Bye
Modifié par Alan (01 Mar 2006 - 22:21)
Alan, c'est très classe, très propre !

c'est super, c'était vraiment ce que je cherchais à faire....
J'avais également pensé aux listes sans approfondir.

En tout cas, je te remercie bcp !

merci également à tous les autres pour vos propositions.
Je vous presenterai le site quand il sera terminé (une jolie boutique en ligne).

Merci !
Au final, j'ai fait des div plutôt qu'une liste.
C'est plus propre quand on a plusieurs variables à inclure.
En tout cas, merci bcp !

a+
Salut,
De rien.
Pour répondre à ta question, il faut éditer ton premier message et indiquer dans son titre que le sujet est Résolu

Bonne continuation Smiley smile
Sujet clos
Aller à