labarique Posté 29 Avril 2008 Partager Posté 29 Avril 2008 (modifié) Bonjour, j'ai un souci pour la mise en page de mon site web : je ne parviens pas à coder proprement un affichage sous formes de colonnes. Mon problème est le suivant : j'aimerais réussir à définir une class .colonne de façon à ce qu'elle me permette d'afficher le contenu choisi sous formes de colonnes. A priori, ça a l'air simple, la seule contrainte étant qu'il ne doit pas y avoir de class .colonnedroite et .colonnegauche, puisque la class est intégrée dans une boucle SPIP (qui reproduira donc plusieurs fois : div class="colonne"). Pour info : il y a 4 éléments qui vont être ainsi affichés. Voici mon code html (qui simule le résultat produit par SPIP) <div class="cellule_sommaire"><H2>CONNAISSANCES</H2><div class="colonne"><span class="entete">Article scientifique</span><ul class="connaissances"> <li>Article 1</li> <li>Article 1</li> <li>Article 1</li></ul></div><div class="colonne"><span class="entete">Sites Web</span><ul class="sites"> <li>Article 1</li> <li>Article 1</li></ul></div><div class="colonne"><span class="entete">Autres documents</span><ul class="livres"> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li></ul></div><div class="colonne"><span class="entete">Encyclopédie</span><ul class="encyclo"> <li>Article 1</li> <li>Article 2</li> <li>Article 3</li></ul></div></div> Et le code CSS afférent : .cellule_sommaire{ font-size: small; clear: left; padding-bottom: 5px;}.colonne{ width: 48%; float: left; border-color: #f40; border-style: solid;} En l'état, la colonne 1 et 2 s'alignent bien côte à côte, mais comme la colonne 2 est plus courte, la colonne 3 vient se mettre juste en dessous d'elle, touchant le bord de la colonne 1. Du coup, la colonne 4 se met sous la colonne 3 mais aligné avec la colonne 1, ce qui donne un grand vide entre le bas de la colonne 1 et le haut de la colonne 4. xxxxx-COLONNE 1-xxxxxx-COLONNE2 - xxxx xxxxx-Texte1-xxxxxxxxxx - Texte 2 - xxxxx xxxxx-Texte 1-xxxxxxxxx - Texte2 - xxxxxx xxxxx-Texte 1-xxxxxxxxx - COLONNE 3 -xxx xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx xxxxxxxxxxxxxxxxxxxxx - Texte3-xxxxxxxx xxxxxxxxxxxxxxxxxxxx - Texte 3 - xxxxxxx xxxxx-COLONNE 4-xxxxxxxxxxxxxxxxxxxxx xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxx xxxxx-Texte 4 -xxxxxxxxxxxxxxxxxxxxxx Si je mets clear:left dans .colonne, alors les balises s'alignent les unes sur les autres . Quelqu'un aurait-il une idée ? D'avance merci ! Modifié 29 Avril 2008 par labarique Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ifmy Posté 29 Avril 2008 Partager Posté 29 Avril 2008 Ajoutez clear: right et non left Lien vers le commentaire Partager sur d’autres sites More sharing options...
labarique Posté 30 Avril 2008 Auteur Partager Posté 30 Avril 2008 Non, cela ne fonctionne pas non plus. Mais merci pour la suggestion... Je continue à chercher... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Ifmy Posté 30 Avril 2008 Partager Posté 30 Avril 2008 les colonnes doivent être en float: left et clear: right. aucune raison que cela ne fonction pas. WooT si 48*2 = 96 100-96 = 4 Il ne reste que 4 % de l'espace dispo à la 3eme colonne qui mesure 48 % Vous dites qu'en clear left elles sont les une sur les autres ? je peux voir le reste de la css ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant