28217 sujets

CSS et mise en forme, CSS3

DIV conteneur et scrolling verticale

Bonjour à tous,
voici mon problème :
Mon site se compose d'un div contenant un haut de page, un milieu et un pied de page:
<div id="conteneur">
<div id="contenu"></div>
<div id="piedpage"></div>
</div>


Dans certaine page du site le div contenu doit couvrir le haut de page de 200px ("position: relative;top: -200px;"), tout se passe bien sauf que le Div contenu ne s'adapte pas à la nouvelle hauteur de page et conserve sa hauteur d'avant le -200px.
En clair il y a un espage vide de 200px en bas du site ce qui provoque un scrolling vers...rien.

Bizarre non ?

Je précise qu'aucun de ses éléments n'a de height.
Code du conteneur :
div#conteneur {
width: 735px;
margin: 0 auto;
text-align: left;
}


Vous avez une solution ? Une simple explication me ferait même plaisir Smiley smile
Bonjour,

Ubik a écrit :
("position: relative;top: -200px;"), tout se passe bien sauf que le Div contenu ne s'adapte pas à la nouvelle hauteur de page et conserve sa hauteur d'avant le -200px.
En clair il y a un espage vide de 200px en bas du site ce qui provoque un scrolling vers...rien.

Bizarre non ?


Non, rien de bizarre : c'est le comportement normal d'un bloc déplacé grâce à la position relative. Le moteur de rendu agit en deux temps :
- l'élément est d'abord placé en flux (ou en flottant) comme s'il n'y avait pas de position relative. Le reste de la mise en page est établie à partir de là : ton pied de page est donc placélui aussi.
- l'élément est déplacé selon la position relative, sans aucune autre modification concernant les autres éléments : ton pied de page n'est pas affecté.

Pour résoudre le problème, affecter également le pied de page d'une position relative et du même déplacement.
Modifié par Laurent Denis (05 Sep 2005 - 09:40)
Ben justement mon pied de page sa colle très bien à la suite du texte. C'est après le pied de page que le gap de 200px se trouve.

Je viens de metter ça en ligne ça sera plus clair : ici donc.
Ubik a écrit :
Ben justement mon pied de page se colle très bien à la suite du texte. C'est après le pied de page que le gap de 200px se trouve.

Je viens de metter ça en ligne ça sera plus clair : ici donc.
re-Bonjour,

Remplace "pied de page" par "hauteur de l'élément body" dans l'explication ci-dessus : le principe est identique. Un déplacement via une position relative ne modifie pas les autres éléments après déplacement. Ton élément body mesure la hauteur qu'il aurait eu sans ce déplacement.
Désolé d'être un peu lent mais la solution c'est de donner le même déplacement à quel élément ?
Pas au Div conteneur (ça fait monter tout le site de 200px).
Je viens de simplifier la CSS pour qu'elle soit plus lisible.
Est-ce que quelqu'un peut m'aider à comprendre pourquoi IE n'accepte pas la position relative ? Et comment fixer l'espace vide sous la page laissé par le déplacement du bloc ?

La page test
La CSS

Merci beaucoup, je début encore avec les CSS.
Ok roblème résolu en jouant sur les margin du div contenu au lieu de la position relative :
div#contenu_texte {margin: -140px 0px 0px 0px;}
Sujet clos
Aller à