28173 sujets

CSS et mise en forme, CSS3

Je cherche à redessiner mon blog (http://blog.tcrouzet.com) en trois colonnes.

Je veux une maquette totalement liquide.

Mais la colonne centrale qui contiendra les articles principaux ne devra pas, par exemple, dépasser les 500px de large, car la lecture du texte deviendrait pénible.

Sur IE, j’ai trouvé une solution : http://tcrouzet.com/test/test.php

Sur FireFox, j’utilise max-width pour la colonne centrale mais je n’ai pas trouvé le moyen de laisser grandir infiniment les colonnes latérales.

Sous IE, j’y parviens avec du JavaScript dans la déclaration CSS, voir le code du fichier lié.

Je sais que ce n’est pas idéal.

Si quelqu’un a une meilleure solution, je suis preneur.
tcrouzet a écrit :
Sur FireFox, j’utilise max-width pour la colonne centrale mais je n’ai pas trouvé le moyen de laisser grandir infiniment les colonnes latérales.

« laisser grandir infiniment les colonnes latérales » ?
J'ai du mal à suivre, là.

Sinon, pour l'utilisation de max-width : si le but est de restreindre la longueur des lignes de texte, il pourra être intéressant de faire un max-width en EM. Par exemple avec un max-width: 32em qui correspondra à près de 500px de large pour une taille de texte normale. Si on diminue la taille du texte dans la feuille de style, on mettra plutôt dans les 40em.
Modifié par Florent V. (05 Jun 2007 - 11:33)
En ouvrant sur IE http://tcrouzet.com/test/test.php, regardez les colonnes de gauche et de droite. Elles s'élargissent indéfiniment et vienne toujours toucher la colonne centrale quelle que soit sa largeur.

Sous FireFox, les colonnes s'élargissent aussi indéfiniment puisqu'elles sont en width:25% mais elles n'occupent pas tout l'espace à gauche et à droite. Un blanc de plus en plus large se crée. C'est cela que je voudrais éviter tout en limitant la taille supérieure de la colonne centrale.

En fait je veux toujours occuper 100% de l'écran mais avec une colonne centrale toujours lisible.

Pour le passage en em je suis d'accord... ce n'est pas un soucis.
Modifié par tcrouzet (05 Jun 2007 - 11:53)
Là, ça devient tout de suite assez pointu. En gros, tu veux obtenir un comportement que tu obtiens dans IE grâce à Javascript, en effectuant des calculs à partir de la largeur de la page. Une solution serait donc d'utiliser Javascript pour tous les navigateurs, pas juste pour IE.

Il faudrait voir aussi ce qu'on peut faire avec un tableau dont seule la cellule centrale aurait une largeur spécifiée...
Avec des tableaux, c'est possible... mais bon pas très uptodate.
100% JavaScript ça doit le faire aussi, mais j'espère encore que quelqu'un a une solution géniale et purement CSS.