28172 sujets

CSS et mise en forme, CSS3

Alterner des éléments en colonne : gauche - droite

Bonjour,

j'ai une liste (ul > li) d'articles (des intros d'articles pour être précis et de longueurs variables) que je voudrais afficher en 2 colonnes et les alterner : un à gauche, un à droite.

il faut que les éléments s'imbriquent les uns à la suite des autres, sans espace verticaux.

je souhaiterais trouver une solution entièrement en CSS (et élégante, si possible).

n'hésitez pas à me demander plus de renseignements!



Merci d'avance.

Martin
Salut,

Si les éléments avaient une taille fixe, j'utiliserais un positionnement flottant:
li { float:left; }

Mais cela ne serait joli que si les éléments ont la même hauteur et la même largeur. Si le contenu est à peu près toujours de la même longueur, peut-être peux-tu fixer la taille des li ?
Bonjour,

J'avais aussi pensé à utiliser "float". Voici ce que je propose comme piste de réflexion :
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>sans titre</title>
    <style>
	ul {
		width: 600px;
		margin: 0 auto;
		border: 1px solid gray;
		padding: 10px;
		overflow: hidden;
		font: normal 14px verdana,arial,helvetica,sans-serif
	}
	li {
		list-style: none;
		clear: both
	}
	p.gau, p.dro {
		margin: 0;
		text-align: left;
		width: 50%;
		padding: 3px 0
	}
	.gau {
		float: left;
		background: #f2f2f2
	}
	.dro {
		float: right;
		background: #ccc
	}
    </style>
  </head>
  <body>
	<div>
		<ul>
			<li><p class="gau">1e li côté gauche</p><p class="dro">1e li côté droit</p></li>
			<li><p class="gau">2e li côté gauche</p><p class="dro">2e li côté droit</p></li>
			<li><p class="gau">3e li côté gauche</p><p class="dro">3e li côté droit</p></li>
			<li><p class="gau">4e li côté gauche</p><p class="dro">4e li côté droit</p></li>
			<li><p class="gau">5e li côté gauche</p><p class="dro">5e li côté droit</p></li>
			<li><p class="gau">6e li côté gauche</p><p class="dro">6e li côté droit</p></li>
		</ul>
	</div>
  </body>
</html>
mais je ne sais pas si j'ai bien compris l'objectif ...
Merci pour vos réponses!

J'avais aussi pensé aux floats mais pour l'instant je n'arrive pas au rendu souhaité : en effet, dans un soucis de dynamisme, nous mettons volontairement des textes plus ou moins long avec ou sans image. Cela évite une lecture trop monotone.

Le but est vraiment que les textes s'imbriquent les uns dans les autres.

voici le rendu souhaité upload/38834-photo.JPG
Modifié par ptitutus (10 Dec 2012 - 17:20)
Administrateur
Bonjour,

avec float, le (début du) 4e item ne remontera pas plus haut que le bas du 1er donc c'est râpé (avec pour code HTML 6 items dans une liste). (EDIT: ou alors tu n'auras pas l'alternance gauche-droite-gauche-etc)
Le plus simple est vraiment de faire 2 colonnes (1 2 3) à gauche et (4 5 6) à droite, que ce soit avec 2 listes ou pour les navigateurs les plus récents du multi-column layout (voir caniuse.com)
Modifié par Felipe (10 Dec 2012 - 18:08)
@Felipe : j'utilise déjà la méthode que préconise, c'est à dire deux colonnes remplies séparément.

Je voudrais trouver une solution plus plus élégante.
La soluce CSS la plus proche est column count:2;

Il existe un js pour IE.

autrement , ça se gére 100% en javascript.

Je n'ai pas de liens vers des ressources sous la souris, mais c'est du déjà vu sur le forum.

++
Bonjour, Bonjour !

je viens de regarder la propriété "column-count" ici... et c'est du css3 Smiley decu

Je préfère m'abstenir du CSS3 en ce qui concerne la mise en page, je trouve ça un peu risqué pour l'instant.
Administrateur
Felipe a écrit :
ou pour les navigateurs les plus récents du multi-column layout (voir caniuse.com)

http://caniuse.com/#feat=multicolumn fonctionne dans tous les navigateurs mais aucun IE sauf IE10.
Et soit les utilisateurs d'IE verront ton contenu sur 1 colonne, soit les utilisateurs d'IE sans JS verront ton contenu sur 1 colonne (grâce au js dont parlait gc-nomade).

ptitutus a écrit :
Je voudrais trouver une solution plus plus élégante.

En CSS3 ... et IE < 10 n'en veut pas nativement. IE ne permet pas l'élégance Smiley cligne
Merci Felipe! Smiley smile

Je me doutais bien qu'avec IE, il me serait difficile d'arriver à une résultat propre et sans JS... :'(
Bonjour!

j'ai réussi à réaliser l'aternance gauche - droite en décalé :
upload/38834-Sanstitre2.png

j'ai simplement défini la largeur de mes "li" à 50% du "ul" et ai fait floater à droite un "li" sur deux (avec un "clear : right;").


cependant, dans le cas où le premier élément de la colonne de gauche est moins haut que celui de droite, l'affichage n'est plus bon :
upload/38834-Sanstitre3.png

et dans ce cas là, si je mets les élément de gauche en "float:left; clear:left;", l'affichage est celui souhaité... jusqu'à ce qu'on ajoute un article... et ainsi de suite.

Quelqu'un aurait une idée?

D'avance merci !

Martin
bonsoir,

tu peut servir column a tous et faire aussi du float pour IE, si l'un ne marche pas , l'autre prend le relais avec le défaut que tu indiques.
les difference selon ce que le navigateur comprend:
column, ils se positionnent les uns sur les autres
float, affichage en alternace gauche/droite, avec le flottant passant a la ligne apres sous le dernier element dans le flux qui le précède.

http://dabblet.com/gist/4741775
Bonsoir gc-nomade,

Ca semble être une très bonne piste, merci beaucoup!
J'ai commencé des tests et j'ai une réaction étrange : ça me coupe un titre sur deux colonnes mais je n'abandonne pas!

je pense que c'est dût au fait que j'utilise des li et pas des div

je reviens vite clore le sujet dès que j'ai trouvé la solution.

Merci,

Martin
Sujet clos
Aller à