Présentation à 2 colonnes Full CSS

[Oncle Tom]

Bon alors voilà le topo du jour.
J'ai un conteneur dans ma page de largeur fixe avec une entête, un menu/contenu (affichés sur le même niveau) et un pied de page).
En gros ça donne

+--------------------------+
| ENTETE                     |
+--------------------------+
|MENU |    CONTENU    |
+--------------------------+
| PIED                         |
+--------------------------+

Par contre voilà le dilemne : le MENU est assez long (640px mais variable selon les pages) alors que CONTENU peut ou pas être supérieur à 640 pixels (ça oscille en 250 et plus de 1000 lors de gros listings).

Alors me direz-vous, utilise la technique "float" pour positionner.
Oui mais un p'tit coup de clear:both; dans contenu fait descendre la suite du flux en dessous du bas du MENU. Pas top.

Et la technique des positions absolues, c'est cool mais MENU empiète et le PIED se retrouve en gros à mi-hauteur du menu ... pas top non plus.

Le soucis dans tous les tutos d'internet c'est que le contenu est toujours pris assez long dans les exemples pour que ça marche. Chez moi j'ai des hauteurs variables et j'aimerais que le conteneur suive la taille de la plus grande des boites (MENU si MENU > CONTENU ou CONTENU si CONTENU > MENU).

Voilou le topo :/ y'a une solution à ça ?

 

[juliofromlille]

T'as cherché partout partout ?

http://css-discuss.incutio.com/?page=AnyColumnLongest

et

http://css-discuss.incutio.com/?page=TwoColumnLayouts

Notament celui là : http://www.positioniseverything.net/sidepages/threecollongleft.html en 3 colonnes je sais mais ca doit s'adapter...

 

[Oncle Tom]

Oh super énorme ^^ ça ne faisait pas partie de mes favoris mais je vais y remédier.
Merci j'vais potasser tout ça

 

[juliofromlille]

C'est celui là le plus important à avoir dans sas favris : http://css-discuss.incutio.com/

 

[MarvinLeRouge]

Bah moi j'préfère celui-là :
http://www.alsacreations.com/articles/modeles/
(et in french en plus 8) )

 

[Oncle Tom]

Ouais bon j'ai regardé et c'est vraiment une galère monstrueuse. Leurs modèles évitent à chaque fois mon cas sachant que la meilleure méthode reste celle basée sur les float: ... manque de bol comme j'utilise des clear:both; dans ma partie contenu, retour à la case départ car ça décalle le texte ...

La propriété "min-height" est super mais IE la comprend pas ... les CSS c'est cool mais là ça pompe sévère :/

 

[SIBELIUS]

La propriété "min-height" est super mais IE la comprend pas ... les CSS c'est cool mais là ça pompe sévère :/

Salut, min-height est assez simple à simuler pour IE :
http://www.alsacreations.com/blog/index ... t-explorer

 

[Eservice]

Oui mais un p'tit coup de clear:both; dans contenu fait descendre la suite du flux en dessous du bas du MENU. Pas top.

Normal, le clear:both ramène le bloc dans le flux naturel, duquel le bloc flottant était partiellement sorti.

Et la technique des positions absolues, c'est cool mais MENU empiète et le PIED se retrouve en gros à mi-hauteur du menu ... pas top non plus.

Il faut éviter les absolute qui sortent complètement du flux naturel, ça complique le positionnement

Chez moi j'ai des hauteurs variables et j'aimerais que le conteneur suive la taille de la plus grande des boites (MENU si MENU > CONTENU ou CONTENU si CONTENU > MENU).

Et autre contrainte : le pied sous les plus haut des 2.

Alors essaye cette structure :

en CSS

#conteneur{ }
#entete { }
#menu { float:left; }
#contenu { }
#pied { clear:both; }

en html (attention : certains div peuvent être remplacés par des balises html de bloc; par exemple <ul id="menu">)

<div id="conteneur">
<div id="entete">
</div>
<div id="menu">
</div>
<div id="contenu">
</div>
<div id="pied">
</div>
</div>

 

[Oncle Tom]

Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?
Y'a pas une parade pour ça ?

J'ai la tête en vrac depuis hier à cause de tout ça >_< je plains les débutants

 

[Oncle Tom]

La propriété "min-height" est super mais IE la comprend pas ... les CSS c'est cool mais là ça pompe sévère :/

Salut, min-height est assez simple à simuler pour IE :
http://www.alsacreations.com/blog/index ... t-explorer

Par contre cette astuce me simplifie énormément la vie ^^ j'pense que je vais l'utiliser définitivement avant de sentir la corde caresser mon cou ; )

En te remerciant ^^

 

[Eservice]

Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?

le clear:both est dans le pied, pas dans le contenu

 

[yannouk]

j'ai fait une mise en page fixe 3 colones compatible a partir de ie5
Et le conteneur se redimensionne automatiquement en dessous de la plus grande des boites
si ca t'interresse contact moi par mp
A+++

 

[Oncle Tom]

Merci eservice mais si j'utilise un clear:both; dans mon #contenu, je vais revenir à nouveau dans le flux normal et repasser sous le menu non ?

le clear:both est dans le pied, pas dans le contenu

Ca j'avais compris mais dans mon contenu je l'utilise aussi car j'y positionne des éléments en float

 

[Eservice]

Ca j'avais compris mais dans mon contenu je l'utilise aussi car j'y positionne des éléments en float

Je ne crois pas qu'il soit nécessaire de faire un clear:both sur un bloc contenant des blocs flottants. Les enfants vont s'y positionner en respectant la position du parent.

Quelle est la structure de ton bloc contenu ?

 

[Oncle Tom]

Ben en fait j'utilise le float pour des images donc je suis obligé de faire un clear:both sinon les images s'empiètent méchamment.