28220 sujets

CSS et mise en forme, CSS3

[abandonné] CSS, 3 colonnes à hauteur dépendante

Bonjour à tous
Mieux vaut tard que jamais, depuis qq temps ça me chatoullait c'est décidé j'abandonne les tableaux pour le CSS Smiley smile

Premier problème, j'ai une mise en page en 3 colonnes verticales mais chacune avec un cadre visible et à l'instar du comportement des tableaux je voudrais que ces 3 colonnes aient tj la même hauteur et que cette hauteur soit forcée par la colonne qui à le plus long contenu. Le truc de base en somme, c'est élastique vers le bas mais les 3 colonnes doivent l'être de manière identique.
Le problème est certainement trés commun mais je n'ai trouvé ni exemple ni tutoriel traitant de ce point.

Les 3 div sont positionnés en absolu et calé horizontalement par des marges croissante et mes seuls options trouvées pour le moment c'est de ne mettre aucun "height" auquel cas chacune à la hauteur de son contenu. Ou bien je met une hauteur avec un overflow pour chacun mais je me retrouve fort logiquement avec 3 ascenseurs si ca déborde sur les 3.
J'ai bien tenter de mettre l'ensemble dans un DIV, sans succés, cars comme la propriété height est indiqué comme "non hérité" (sur les spec du site mediabox) je ne sais pas comment faire pour avoir cette élasticité commune et forcée vers le bas.
Si une bonne âme pouvait m'éclairer ce serait trés sympa Smiley smile
J'ai commencé à reprendre la maquette avec une mise en page en table et ça me désole Smiley smile
Modifié par seaseb (23 Aug 2005 - 09:31)
Salut,

pour ce type de mise en page, il faut utiliser le positionement flottant.

Il y a un autre paramètre à prendre en compte :
l'elasticité horizontale.

C'est à dire, est-ce que ton site à une largeur fixe ou fluide ?

Si c'est fixe, aucun problème, si c'est fluide, est-ce que tes colonnes sont de largeur fluide ou fixe (c'est à dire seule la colonne de contenu varie ou bien toutes) ?

Dans le cas où toutes les colonnes varies, c'est très très chaud, voire pas possible pour IE.
J'ai a peu de choses près le même problème que seaseb. Plutôt que de créer un second sujet pour le même problème je me permet d'exposer le miens ici aussi.

A la différence de seaseb, mon site est fait d'un menu horizontal, en-dessous un header, ensuite en-dessous une colonne pour le contenu et une colonne à droite pour d'autres choses (choix de la langue, login, last news, newsletter subsribe...) et en-dessous un footer.

Quand j'ai fait ma mise en page avec un positionnement absolu je n'arrivais pas à avoir une hauteur maximum pour mes deux colonnes et que mon footer soit repoussé également.

Alors j'ai essayé avec un positionnement relatif et pour le moment tout fonctionne bien sauf que j'arrive pas à faire afficher correctement ma colonne de droite.

Pour que vous situez mieux le problème voici les url qui peuvent vous être utiles :
- http://tests.inred.be/tech-ip/index.php
- http://tests.inred.be/tech-ip/style_website.css

L'id de la colonne de droite est right.
Bonjour,

il me semble que c'est le même problème qu'a rencontrer Vajra sur ce post.
Si je ne me trompe pas, toutes les solutions possible a ce type de mise en page y sont données.
Singer in Blue a écrit :
Moi j'ai trouvé mon bonheur Smiley smile

Merci merci Smiley cligne


Bah ça serait bien d'indiquer ce que tu as trouvé alors...

Là ça fait genre "moi j'ai trouvé, et pis pas tÔa na !" c'est pas le genre de la maison.
* C'est pour un autre site où j'avais le même prob que j'ai essayé en effectuant quelques recherches avec les mots clés d'Olivier et le post de Vajra *

D'abord au niveau de la feuille de style CSS j'ai procédé comme ceci :

div#logo {
  float: left ;
  ...
}

div#gauche {
  clear: both ;
  float: left ;
  ...
}

div#pied {
  clear: both ;
  ...
}


Ce qui a eu pour effet de mettre la division contenant le logo sur la gauche, la division contenant le header et la division contenant le menu horizontal à côté du logo.

D'abord j'ai mis un "clear: both ;" pour la colonne de gauche pour que ça annule l'effet de "float: left ;" de toute l'en-tête complète. Et j'ai remis un "float: left ;" pour que la contenu aille à côté de la colonne de gauche.

Pour que le pied soit repoussé par la plus grande zone (la colonne de gauche ou la colonne de contenu), j'ai mis un "clear: both ;" à la colonne de gauche.

Et aussi j'ai créé une second conteneur dans le premier qui contenait tout sauf le pied en mettant une image de fond pour simuler pour qu'il n'y ait pas de différence et que le fond de la colonne de gauche et du contenu aille jusqu'à la frontière avec le pied.

J'sais pas si j'ai été très clair dans mes explications mais c'est ça que j'ai fait.
bon finalement aprés moult lectures essais et expérimentations je vais être obligé pour ce site là de repasser du coté obscur de la force (des tables). En fait j'ai 3 colonnes mais uniquement délimitées par une bordure (pas une couleur de fond) et espacées de qq pixel, du coup la méthode des colonnes factices ne fonctionne pas et je n'ai pas trouvé d'alternative fiable mon navigateur cible prioritaire étant IE mais sans faire l'impasse sur firefox ou opera.
Donc bon j'aurais au moins appris qq truc et j'essais de maintenir le CSS sur un second projet mais bon ... un tantinnet frustré quand même Smiley smile
Qu'il parait loin le temps ou IE repondra un minimum aux specs et ou on pourra ignorer les IE6 encore en ciculation Smiley smile
merci pour votre aide en tt cas.
Sujet clos
Aller à