28173 sujets

CSS et mise en forme, CSS3

Gabarit <div>

Bonjour,

J'essaie d'utiliser l'un des gabarits de ce site( http://css.alsacreations.com/modeles/modele5.htm )pour un site mais il me pose pb pour 2 raison:
D'une part si le contenu du conteneur du centre prend moins de place en hauteur que les contenus respectifs des conteneurs de droite et de gauche, ces derniers se superposent avec le pied de page.
D'autre part, si je met height:100% au <div> de droite ou de gauche et que leur contenu respectif n'occupe pas toute la hauteur, le <div> englobe son contenu sans occuper toute la hauteur de son conteneur

J'ai essayer en englobant les <div> gauche , centre et droite dans un conteneur nommé "milieu", mais rien n'y fait
Avez vous une piste?

Merci beaucoup
Bonjour lineTo et bienvenue sur ce forum.

lineTo a écrit :
D'une part si le contenu du conteneur du centre prend moins de place en hauteur que les contenus respectifs des conteneurs de droite et de gauche, ces derniers se superposent avec le pied de page.

Cela vient du fait que les deux colonnes des côtés sont positionnées en absolu, ce qui d'ailleurs ne me semble pas être une très bonne idée, justement à cause de problèmes possibles de superposition de blocs.

Pour rappel, les éléments positionnés en absolu sortent du flux du document et ne repoussent pas les autres éléments. Ils flottent par dessus, en quelque sorte...

Une mise en page à base de « colonnes » flottantes (propriété CSS float) me semble plus intéressante. Un exemple ici :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

a écrit :
D'autre part, si je met height:100% au <div> de droite ou de gauche et que leur contenu respectif n'occupe pas toute la hauteur, le <div> englobe son contenu sans occuper toute la hauteur de son conteneur

Donner une hauteur de 100% aux div de droite et de gauche, pourquoi pas. Mais 100% de quoi ? De quel référent ?
Il faut :
1 - un référent (le parent direct du bloc, en général) ;
2 - que ce référent ait une hauteur déterminée.
Salut mpop, et merci pour ta réponse pertinente!

Ce mettre du jour au lendemain aux entièrement en CSS n'est pas chose aisée.

a écrit :
Pour rappel, les éléments positionnés en absolu sortent du flux du document et ne repoussent pas les autres éléments. Ils flottent par dessus, en quelque sorte...

Une mise en page à base de « colonnes » flottantes (propriété CSS float) me semble plus intéressante


Merci pour cette base indispensable

a écrit :
que ce référent ait une hauteur déterminée.


J'ai essayé en mettant au div parent height="100%", ainsi qu'à <body> et <html>, mais en vain il prend la hauteur de son contenu Smiley decu

En attendant de trouver une solution plus propre j'ai englobé mes 3 <div> centraux dans un conteneur qui lui comble les trous grâce à un
background-image avec background-repeat:repeat-y...
lineTo a écrit :
En attendant de trouver une solution plus propre j'ai englobé mes 3 <div> centraux dans un conteneur qui lui comble les trous grâce à un
background-image avec background-repeat:repeat-y...

À vrai dire, c'est sans doute la solution la plus « propre » dans l'état actuel des implémentations de CSS2 par les navigateurs (qui a dit « Internet Explorer 6 » ?).
Sujet clos
Aller à