28220 sujets

CSS et mise en forme, CSS3

[resolu] Menu qui sort du cadre de son conteneur

Bonjour a tous, j'ai un probleme un peu tordu. ma page se presente de la maniere suivante :
- un cadre globale qui contient toute la page, avec une bordure grise
- le haut de ce cadre est pris par un enete / barre de navigation
- le reste se divise en 2 : menu a gauche et texte a droite.

voici donc, simplifie, le code de ma page :


<div id=cadre>
  <div id=entete>
  </div>
  <div id=contenu>
    <div id=menu>
    </div>
    <div id=texte>
    </div>
  </div>
</div>


avec le css suivant :


#entete{}

#cadre
{
  position:absolute;
  left:9px;
  top:9px;
  border:3px solid gray;
}

#contenu
{
  margin-left:10px;
  margin-top:30px;
  padding-right:12px;
}

#menu
{
  float:left;
  top:13px;
  left:16px;
  width:169px;
}
#texte
{
  margin-left:190px;
}


vous aurez note que le cadre global est en position absolute, ce qui est curieux a premiere vue. Or, il se trouve justement que si je ne fais pas cela, lorsque le texte de la page arrive "moins bas" que le menu, la brodure grise s'arrete juste en dessous du texte et donc le menu "depasse" du cadre, ce qui est assez disgracieux. ce que je ne comprends pas, vu que le menu est a l'interieur de ca cadre. cela m'empeche d'ajouter un texte de license a la suite de ce cadre gris, puisque le cadre etant en absolute, le texte que j'ajoute "en dehors" demarre don au debut de la page.

Voila, si quelqu'un voit de quoi il s'agit, merci beaucoup !!
Modifié par jobherzt (19 Nov 2005 - 18:55)
Salut,

Ahhh...Les joies du positionnement. Que ton #menu déborde si tu ne mets pas le #cadre en absolu, c'est logique puisqu'en déclarant ton #menu en flottant, il sort du flux de la page.
Si la hauteur de ton #menu est fixe, une solution est d'attribuer une hauteur minimum au #contenu en dessous de laquelle il ne descendra pas. Inutile alors de positionner ton #cadre en absolu, donc souci résolu. Tu peux aussi ne pas faire flotter ton #menu et positionner alors ton #texte en relatif avec une marge négative en hauteur équivalente à la taille du #menu.
Sinon je ne vois pas...

Smiley cligne
en fait, je comprends assez bien pourquoi le fait de mettre le menu en float le fait depasser du cadre. ce que je comprends moins, c'est pourquoi ca ne le fait pas quand le cadre est en absolu ! comme souvent en informatique, le fait que ca marche pose autant de question que quand ca marche pas ... Smiley cligne

oui, parce que si le fait de mettre le menu en float l'extrait du rapport contenant / contenu, cela devrait aussi se produire quand le cadre est en absolu ( ya pas de raison .. ), si j'ai bien tout compris comment ca marche. or, dans ce cas, si le texte est trop petit, le cadre se cale sur la taille du menu, donc tout marche. je vais essayer ton idee de donner une hauteur minimum au cadre ( je suppose qu'un height:taille_du_menu_et_des_poussieres suffit ???? ).

simple, mais il fallait y penser !! merci beaucoup ..
Modifié par jobherzt (18 Nov 2005 - 01:43)
salut,
j'ai essaye de rajouter un height:560px; dans mon #contenu, mais du coup la hauteur de ce contenu est fixe, donc probleme inverse, si le texte devient trop long il depasse !!

je tourne en rond..........
Re,

Je parlais d'une hauteur minimum et non fixe, donc "min-height" en CSS, mais sous IE tu devras utiliser "height" sachant qu'il étirera le contenu si nécessaire...enfin c'est ce qu'il fait toujours Smiley fache

Pour en revenir au positionnement, le fait de mettre ton cadre en absolu, le met en position d'influencer a taille de ton menu puisqu'il sort du flux lui-aussi. Relis le tuto :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Tiens-moi au courant. Smiley smile
Ok, pigé, j'ai fait des recherches sur min-height, et j'ai trouve un bidouillage relativement moche mais qui a l'air de fonctionner pour IE. en fait, j'en ai trouve plusieurs, et je ne sais pas lequel marche le mieux. je ferais 2 3 test.

en tout cas merci beaucoup !!
Sujet clos
Aller à