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)
CODE
<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>
<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 :
CODE
.cellule_sommaire
{
font-size: small;
clear: left;
padding-bottom: 5px;
}
.colonne{
width: 48%;
float: left;
border-color: #f40;
border-style: solid;}
{
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 !
