Aller au contenu

position: fixed qui m'en veux


Aenoa
Aller à la solution Solutionné par Ernestine,

Sujets conseillés

bonjour ! Joyeux noyel !



J'ai actuellement un soucis avec mon code HTML et CSS. Je désire qu'une div soit visible lors du scroll si jamais la page est très grande en hauteur. Cela marche parfaitement avec l'attribut "position: fixed".



toutefois, si la page n'est pas assez grande en hauteur, ça casse tout =/


voici deux screenshots (en pièce jointe). Le 1er est lorsque ça scroll, le second lorsque c'est trop court.



voici mon code css:



#left_container
{
float: left;
clear: left;
width:411px;
border-radius: 10px;
border: #333333 thin solid;
background: url('images/tainted.png') repeat;
position:fixed;
padding: 5px;
}

#right_container
{
float: right;
clear: right;
width: 490px;
border-radius: 10px;
background: url('images/tainted.png') repeat;
border: #333333 thin solid;
padding: 5px;
}

#footer
{
clear: both;
font-size: 12px;
text-align: center;
background: url('images/tainted.png') repeat;
margin-top: 10px;
padding: 10px;
color: whitesmoke;
border-radius: 10px;
border: #333333 thin solid;
}



Ma question est donc: comment (soit) forcer la footer a respecter l'espace de la div "left_container", (soit) comment faire avoir la propriété "position: fixed" uniquement si la page est trop grande? sans JS de préférence, le html étant du XSL




Merci d'avance :)


post-31413-0-00422300-1356474047_thumb.j

post-31413-0-29456600-1356474051_thumb.j

Lien vers le commentaire
Partager sur d’autres sites

  • Solution

Salut,



Tu peux tout simplement mettre un min-height sur #right_container, avec, pour valeur de ce min-height, la hauteur de #left_container. Cela repoussera donc le footer sous cette hauteur smile.gif



Si ce n'est pas possible de mettre ce min-height directement sur #right_container (pour des raisons de design/décoration), alors tu peux l'englober dans un div parent, et c'est sur ce div parent que tu appliqueras le min-height.



Par ailleurs, tu peux virer le float left sur #left_container : il ne sert à rien, puisqu'il est en position fixed.



Inutile également de mettre un float right sur #right_container : il serait plus judicieux de le laisser dans le flux (avec un margin-left pour le placer sur la droite). Partant de là, si tu retires tous les float, tu peux aussi dans la foulée retirer tous les clear.


Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...