28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un problème pour positionner en CSS un nombre variable de colonnes de hauteur variable au centre.

La mise en page générale contient déjà des flottants pour les colonnes gauches et droites. La largeur globale doit pouvoir être fluide ou fixée.

Il s'agit donc de placer dans la partie "contenu" n colonnes de largeur fixe et de hauteur variable. Cet ensemble de colonnes doit être centré dans le contenu (ou être réparti sur tout l'espace).
Sous ces colonnes, il y a la suite du contenu qui doit donc être poussé par les colonnes du dessus.

En gros, on peut souhaiter arriver à quelque-chose de proche de la page d'accueil de Eyrolles au niveau des 3 autres ouvrages à la une. Eyrolles utilise un tableau à cet endroit :
<table id="autres" summary="Les 3 autres ouvrages &agrave; la une.">
Smiley decu Ce que je me refuse catégoriquement.

Merci d'avance
Modifié par nicolas.charlot (29 Jan 2006 - 10:18)
La seule solution trouvée pour le moment était de créer un div de hauteur suffisante et de largeur fixe.
La largeur est certe fixe, mais dépend donc logiquement du nombre de colonnes. C'est la que ça devient vraiment "barbare", puisque pour chaque possibilité, une classe définie la largeur...
Pour le centrage, la largeur étant fixée, un petit margin: 0 auto, et le tour est joué.

Deux gros problèmes :
- Pas très propre
- Rendu inadapté, car si les colonnes sont petites, il y a un espace pouvant être énorme jusqu'au contenu
Bonjour,

nicolas.charlot a écrit :
Eyrolles utilise un tableau à cet endroit :
<table id="autres" summary="Les 3 autres ouvrages &agrave; la une.">
Smiley decu Ce que je me refuse catégoriquement.


Mais qu'il va pourtant falloir te résoudre à faire, sans états d'âmes, car c'est, à l'usage, la solution la plus pertinente et la plus efficace Smiley cligne
Laurent Denis a écrit :
c'est, à l'usage, la solution la plus pertinente et la plus efficace Smiley cligne


Mais est-ce la seule ?

N'y a-t'il réellement aucune solution (compatible) via les CSS ?
Tu peux également utiliser:
- float, avec diverses difficultés de centrage, de largeurs, de marges, etc.
- display:table-cell, mais non implémenté par IE Windows
- display:inline-block, mais non implémenté par FF et inopérant pour ce cas dans IE.

Au bout du compte, un tableau de présentation du type de celui utilisé pour Eyrolles te prendra quelques minutes de codage, là où les solutions ci-dessus te prendront quelques heures finalement assez frustrantes Smiley cligne
Modifié par Laurent Denis (29 Jan 2006 - 10:39)
Dans la solution actuelle, c'est évidemment les flottants que j'ai utilisé, mais comme je disais, il y a effectivement des problèmes de largeur et de hauteur.

Bon, c'est entendu, j'oublie de suite la mention tableless...