28220 sujets

CSS et mise en forme, CSS3

Listes en colonnes

Pages :
Bonjour,

J'aimerais créer ce genre de liste:
Liste 1 Liste2 Liste3
- item1 - item1 - item1
- item2 - item2 - item2
- item3 - item3
- item4

J'ai donc décidé d'utiliser les listes descriptives:

<dl>
   <dt>Liste 1
      <dd>item1</dd>
      <dd>item2</dd>
   </dt>
</dl>
etc...

et en mettant dans CSS:

dt{
    display: inline;
}


Le problème est que quand je ne met pas les <dd>, ca marche très bien mais si je les mets, ma liste se fait de haut en bas:
Liste 1
- item1
- item2
- item3
Liste2
- item1
etc...
Y'a deux trucs bien dans la vie, face à ce genre de chose:
- les tableaux, faits pour ça.
- 3 bêtes listes <ul> faites pour ça, avec 3 titres <hN> faits pour ça, et un bête float sur leurs conteneurs respectifs.
Y'a un truc casse-bonbons, ce sont les listes de définition, pas du tout faites pour ça, et nettement moins accessibles. Mais bon, elles sont à la mode. Y'aka attendre que ça passe.
Modifié par Laurent Denis (05 Jul 2005 - 18:42)
C'est pas que les listes sont à la mode, c'est que pour faire une liste, il vaux mieux utiliser la balise faite pour faire des listes non?
Au delà de l'aspect visuel, qui ne nous permet pas de juger du balisage à adopter.

Quel est le contenu à baliser ?

Pour faire ce que tu veux :
3 <dl> avec les 3 <dt> et les <dd> correspondant avec float: left; sur les <dl>

Par ailleurs, le <dt> n'englobe pas les <dd>, <dt> ne peut contenu qu'un élément en ligne et doit contenir le titre de la définition qui suit et non l'englober.

Pour la version avec listes non ordonnées, 3 <div> en float: left; avec 1 titre de niveau et une balise <ul> par div

Et pour la version tableau si toute fois c'est adapté, y a rien à faire niveau CSS
Modifié par Olivier (05 Jul 2005 - 18:53)
C'est pas interessant un screenshot, il nous faut ton code HTML et CSS

Mieux un exemple en ligne.

Et si tu fais comme je te l'ai indiqué, ça fonctionnera.
J'avais deja essayé avec les div, mais le resultat me genere une autre erreur.
Au lie d'avoir mes liste dans le block "competences", ce block est vide, mes listes se mettent en dessous et se melangent au block suivant.
Voila l'URL: mon_site

PS : j'ai un deuxieme probleme d'affichage, c'est sous IE, ma photo depasse du cadre...
Olivier, l'homme qui connait les numéro de la faq par coeur Smiley langue

Entre ça et raphael qui connait les pages de son bouquin .. je me sens bien démuni Smiley biggol
TriadPtale a écrit :
Olivier, l'homme qui connait les numéro de la faq par coeur Smiley langue

Entre ça et raphael qui connait les pages de son bouquin .. je me sens bien démuni Smiley biggol


T'es fou où quoi ? Smiley langue
Je fais click molette sur le lien FAQ du menu, ctrl+f (le champs recherche est pas utilisable, faudra que je m'en occupe un de ces 4) et je cherche float, active, etc et je tombe sur le lien qui va bien ! au pire F3 pour passer au suivant Smiley cligne
globe_dk a écrit :
Mais vous trouver pas la solution du spacer un peu "bricolage"?


Ahh bah oui un peu s'il n'y a pas d'élément pour faire office du dit spacer, mais à vouloir le beurre et l'argent du beurre on n'a plus rien Smiley smile

Par contre, pour défendre son utilisation pas forcément si bricolage.
Si tu visualises la page sans CSS, le <hr> fera un bon séparateur de tes catégories et finalement, ça sera pas si mal de l'avoir ajouté Smiley smile

Sinon, tu as la solution de l'overflow (ajouté dans la FAQ si j'ai bonne mémoire) qui elle même si sans ajouter de balisage est en fait un peu plus bricolage car pas très très logique au niveau du comportement Smiley smile
Modifié par Olivier (05 Jul 2005 - 19:35)
Je crois en fait qu'il fonctionne pas tout a fait comme sous FF...
Sinon, pour ma photo, si j'utilise un <hr> invisible pour ne pas que mon image depasse, j'ai un trop grand espace en dessous de celle ci...
Invisble avec visibility ?

Le mieux est de le faire disparaitre comme ceci :

position: absolute;
top: -5555px;

:)
TriadPtale a écrit :
D'après ce que j'ai compris, l'overflow ne fonctionne pas sous ie Smiley smile


Pas grave vu qu'IE étend le bloc conteneur au niveau des float Smiley cligne
Pages :
Sujet clos
Aller à