28172 sujets

CSS et mise en forme, CSS3

Div fixée dans colonne : empecher superposition avec le footer

Bonjour à tous,

j'ai construis un site avec une div qui descend en même tant que la page, pour ce j'utilise :

.menu2{
	margin:20px 0 0 20px;
	position:absolute;
	top:200px;
	width:310px;
}

html>body .menu2 {
	position: fixed;
}


Cela fonctionne bien mais j'ai un souci, si on descend tout en bas de page, la div vient se positionner par dessus mon footer.

Je vous invite à regarder mon shéma :
http://img5.hostingpics.net/thumbs/mini_64909001.jpg
En vert j'ai mis le mouvement souhaité, en rouge le mouvement actuel !

Merci de m'indiquer comment faire pour que ma div menu2 ne puisse pas descendre sous la div CONTENT ( menu2 + contenu) et ainsi ne pourra plus se superpositioner sur la div footer.

EDIT : J'essaie d'éviter l'utilisation de JS... car j'ai vu que cela pourrait être une éventuelle solution.

Enfin merci à tous pour vos contributions, il s'agit de mon premier message sur alsa en 2 ans car j'ai toujours trouvé les ressources nécessaires sans avoir à demander !
Modifié par wildben (07 Jan 2010 - 13:57)
Salut,

Vu le peu d'éléments fournis, pas évident de répondre. As tu pensé à mettre une marge inférieure minimum de la hauteur minimum de ton pied de page ? Tu pourrais déja commencer par regarder de ce côté là.
Bonjour, je met en ligne ma page complète, tu verras en défilent en bas les div se superpose :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
#header{border:#000 1px solid}

#cadre1{border:#000 1px solid; 	top:200px;  width:310px; float:left;}
html>body #cadre1 {position: fixed;}

#cadre2{
	border:#000 1px solid;
	width:500px;
	float:right;
}

#footer{border:#000 1px solid}
</style>
</head>

<body>
<div id="header">Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. </div>

<br /><br />

<div id="content">

<div id="cadre1">Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. </div>



<div id="cadre2">Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. </div>

</div>

<div style="clear:both"></div>
<br /><br />
<div id="footer">Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Integer facilisis sagittis mauris, in posuere urna tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque lectus id quam dictum sollicitudin. Sed dolor tellus, porta eu varius sed, gravida sed sapien. Nam sit amet lorem vitae leo vulputate tempus sed vel magna. Morbi commodo risus volutpat metus ultrices tincidunt. Suspendisse sed nisl porttitor eros hendrerit consectetur ac congue ipsum. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. Donec ante ipsum, malesuada eu ultricies eget, laoreet nec lorem. Nulla facilisi. Nullam ullamcorper feugiat dapibus. Sed accumsan pharetra nibh, vel tempus quam commodo a. Aliquam id lectus felis, ut feugiat nulla. Vestibulum egestas pellentesque dui, in egestas nisl pulvinar in. Donec gravida mi sed turpis molestie cursus. Praesent tincidunt odio sed tortor sollicitudin luctus. Vestibulum mollis mauris ac metus facilisis vulputate non in metus. Nulla porttitor massa at eros aliquet at ornare arcu viverra. Proin feugiat venenatis odio, non consectetur velit commodo vel. Nunc eget metus lectus. Aenean rhoncus dapibus dolor vitae accumsan. </div>
</body>
</html>


Désolé il y a beaucoup de texte car on doit faire apparaitre la scroll bar !

Merci.
Sujet clos
Aller à