28173 sujets

CSS et mise en forme, CSS3

Coucou a tous Smiley smile

Je viens de me mettre au css, j'ai pas mal bosser le sujet mais j'ai encore beaucoup de lacunes.

Depuis quelques jours, je stagne totalement sur des soucis d'alignements.

Je souhaite construire une grosse liste ou j'ai 5 éléments par ligne et je ne parviens pas a avoir quelques chose de correctement aligné.

Si j'ai 2 éléments par ligne j'ai aucun soucis pour constituer des listes correctement alignée mais dès que j'en ai plus (de 3 à 8 ), c'est la cata total..

Ceux que à terme j'aimerai aboutir en css(pas le design mais la liste) : http://www.allliance.com/test/aide2.html

Ce que j'ai actuellement : http://www.allliance.com/test/aide.html

Dans le premier cas, j'ai une liste proprement alignée et centrée sur la page avec titre etc..
Je ne parviens pas à faire la même chose en css des que ça dépasse 2 élements à lister ..

Si quelqu'un accepte de prendre un peu de temps, j'aimerai bien des explications car une liste avec autant d'éléments je ne sais meme pas comment on peut faire ça et de plus je rencontre très régulièrement des soucis d'alignement, de débordement et je connais pas de techniques ou méthodes pour y faire face.

Merci pour vos réponses par avance ^^

------------------------------------
Testé uniquement pour firefox pour le moment
Modifié par ludd (14 Feb 2007 - 15:32)
Bonjour,

Un tableau me semble parfaitement adapté à ce type d'organisation de données en lignes et colonnes.

Note au cas où : non, les tableaux c'est pas le mal. Il s'agit juste de les employer à bon escient.
J'ai lu cette note quelquepart ^^
J'ai aussi beaucoup lu que le css permettait de faire des page sans tableaux et que s'en était son plus gros avantage.

ça va à contre sens tout ça ...
Comment déterminer quand utiliser un tableau et quand ne pas les utiliser ?

Dans tous les cas merci d'avoir répondu ^^
ludd a écrit :
J'ai aussi beaucoup lu que le css permettait de faire des page sans tableaux et que s'en était son plus gros avantage.

Non, les CSS permettent de faire des mises en page sans balancer plein d'attributs de mise en forme directement dans le code HTML. Ça n'empêche pas d'utiliser des tableaux, tableaux que l'on pourra mettre en forme via CSS.
Bien sûr, on oppose souvent la conception « moderne » qui sépare la structure (HTML) de la mise en forme (CSS), contrairement à ce que l'on faisait historiquement avec les tableaux de mise en forme imbriqués dans tous les sens. De fait, on peut réaliser des mises en page complètes sans utiliser le moindre tableau, en positionnant des éléments (si besoin des conteneurs neutres div, mais ça n'a rien d'obligatoire) avec des propriétés CSS.

Mais les CSS ne banissent pas automatiquement les tableaux, et il reste des cas où l'utilisation d'un tableau de mise en forme reste avantageuse.

ludd a écrit :
ça va à contre sens tout ça ...

Non, il s'agit d'application pragmatique et réfléchie des outils disponibles. Les tableaux de mise en forme sont mis de côté car ils posent souvent certains problèmes pour, entre autre, l'accessibilité des contenus et la possibilité de retoucher l'aspect graphique sans modifier les pages HTML. Mais cela ne veut pas dire qu'il faille éradiquer les tableaux des pages HTML. Ce forum, par exemple, utilise des tableaux, en nombre limité et de manière bien pensée pour éviter certains problèmes d'accessibilité.

ludd a écrit :
Comment déterminer quand utiliser un tableau et quand ne pas les utiliser ?

C'est simple : on utilisera un tableau quand c'est la meilleure solution. Smiley cligne

Concrètement :
- pour présenter des données ou des informations organisées en lignes et colonnes, on utilisera un tableau ;
- lorsqu'un type de mise en page n'est réalisable de manière fiable et robuste (en l'état actuel des implémentations de CSS 2 par les différents navigateurs) qu'avec un tableau, on utilisera un tableau (et on évitera de bidouiller de la mise en page CSS pour obtenir un résultat peu satisfaisant et peu fiable...).

Dans ton cas, on pourrait discuter longtemps pour savoir si ça relève du premier point (informations en lignes et en colonnes...), mais en tout cas ça relève assurément du deuxième point : pas de prise de tête inutile et non productive.