Longueur des DIV avec des CSS

[ludoanimation]

Salut,

Je viens d'essayer de changer l'ordre de mon source avec des DIV et des CSS. au début j'avais des problemes de largeur et de centrage maintenant résolus.

Maintenant voila ce qui se passe :

j'ai un cadre, un haut, une partie centrale avec 3 colones (menu , corps , ...) et un pied .

ce que je voudrait faire : aligner la hauteur des DIV du cadre et du menu avec la hauteur du corps (qui elle est variable en fonction du contenu) ou avec la hauteur de la page si le corps ne remplit pas toute la page.

Ce que j'obtient : pour le cadre soit je fixe sa hauteur a 100% et il fait la hauteur de la page mais si le corps est plus long lorsque je scrool il depasse du cadresoit je ne fixe pas la hauteur et il est tout petit (1 ligne). Pour le menu, et bien il s'arrete, apres la dernière ligne de menu.

 

[nikoshr]

L'article Faux columns de A List Apart devrait t'intéresser.

 

[ludoanimation]

Merci,

J'ai tout lu, et presque tout compris, mais ce n'est qu'un subterfuge a l'aide d'une image qui fait croire a des fonds de couleur et des bordures.

Ce que je cherche c'est a adapter la hauteur de mes div ... si quelqu'un a une idee

 

[Kmacleod]

J'ai ce même problème

un div qui contient du texte et une image en float.
Evidement l'image sort du div si le texte est trop court, j'ai "comblé par des saut de lignes ... en attendant

 

[George Abitbol]

Kmacleod : rajoute à la suite de ton texte un bloc avec clear:both (ou left, ou right, selon le float de ton image)

Fred

 

[Kmacleod]

Kmacleod : rajoute à la suite de ton texte un bloc avec clear:both (ou left, ou right, selon le float de ton image)

Fred

Ca ne fonctionne que sous IE, avec Mozilla l'image deborde toujours

 

[George Abitbol]

Etonnant, j'utilise pourtant ce truc... On peut voir la page ?

Fred

 

[Kmacleod]

C'est une page de test ;-)

-http://phortail.org/_introduction.html

le css est en interne pour avoir tout les elements dans le même source

 

[George Abitbol]

<div class="toto">Lorem ipsum dolor sit amet,<div style="clear:left;line-height:0;">&</div></div>

Le line-height est juste là pour éviter d'avoir un blanc sous l'image.

Au passage, ton clear:right aurait dû être un clear:left, mais en le laissant sur ce div, tout le texte passait dessous (ça annule le float, en fait).

Fred

 

[Kmacleod]

Impecable Fred ;-)
En fait le clear n'est pas utile, ce que je veux c'est du texte avec à coté une image (eventuellement).
Je mets celà en ligne, ce sera plus clair

 

[SIBELIUS]

Apparemment, le clear both ne fonctionne pas partout :

Je suis allé faire un tour sur OpenWeb.

http://openweb.eu.org/articles/initiati ... 1.html#ex3

Par contre, en ayant testé le code fourni sur IE6 et Firebird, je n'ai pas du tout le résultat visuel proposé par Openweb.

Le texte de la partie gauche... disparaît sur IE6 !!! Aperçu : http://www.alsacreations.com/articles/c ... lules2.htm

Bref, la question reste toujours d'actualité... pour avoir deux blocs qui s'étirent l'un par rapport à l'autre :
- clear both : ne fonctionne pas correctement sur IE6
- mettre les blocs à 100% de hauteur dans un conteneur vide : ne fonctionne pas
- tricher en utilisant le background du conteneur : ça me semble être la meilleure solution à l'heure actuelle : http://www.alsacreations.com/articles/cellules/