Positionnement css

Question

jacoumbo

27 Mar 2013 à 19:19

Bonjour tous le monde voila je vous expose mon probleme je bloc un moment sur le positionnement inline-block.
voila mon code:


<body>
<div id="parent"><div id="frere">ceci est un test</div><div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Acceuil</span></a></li>
   <li class='has-sub '><a href='#'><span>Membres</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Academie</span></a></li>
         <li class='has-sub '><a href='#'><span>Naruto Battle Center</span></a></li>
		 <li class='has-sub '><a href='#'><span>Boutiques</span></a></li>
		 <li class='has-sub '><a href='#'><span>Quartier General</span></a></li>
        
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span>World</span></a>
   <ul>
   <li class='has-sub '><a href='#'><span>Forum</span></a></li>
   <li class='has-sub '><a href='#'><span>Rue du village</span></a></li>
   <li class='has-sub '><a href='#'><span>Messages Privé</span></a></li>
   <li class='has-sub '><a href='#'><span>Amis</span></a></li>
   </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Fanartoole</span></a>
   <ul><li class='has-sub '><a href='#'><span>Ajouter Un Arts</span></a></li>
   <li class='has-sub '><a href='#'><span>Administrer Vos Arts</span></a></li>
   <li class='has-sub '><a href='#'><span>Voir Votre Gallerie</span></a></li>
   <li class='has-sub '><a href='#'><span>Voir Vos Commentaires</span></a></li>
   </ul>
   </li>
     <li class='has-sub '><a href='#'><span>Fanifictions</span></a>
   <ul><li class='has-sub '><a href='#'><span>Ajouter  Une  Oeuvre</span></a></li>
   <li class='has-sub '><a href='#'><span>Administrer  Vos  Oeuvres</span></a></li>
   <li class='has-sub '><a href='#'><span>Voir Votre Receuil</span></a></li>
   <li class='has-sub '><a href='#'><span>Voir Vos Commentaires</span></a></li>
   </ul>
   </li>
</ul>
</div>
</div>
</body>
<style>
#cssmenu{
background-color: black;
width: 600px;
display: inline-block;
vertical-align: top;
}
#cssmenu ul li ul{
display: none;
border: solid black 1px;
}
#cssmenu > ul  > li > a{

width: 70px;
display:block;
border: solid red 1px;
color :white;

}
#cssmenu ul > li{
display: inline-block;

}
#cssmenu ul > li:hover ul{
display: block;
position: absolute;
border: solid black 1px;
width: 500px;
list-style-type: none;
padding: 0;
margin:0;

}
#cssmenu ul > li ul li{
border: solid black 1px;
display: block;
}
#frere{
width: 100px;
font-size: 20px;
display: inline-block;
border: solid green 2px;
}
#parent{
width: 704px;
background-color: yellow;
}
</style>

je comprend pas 3 choses:

1)pourquoi lorsqu'on change la resolution d'ecran ou qu'on reduit le zoom(en maintenant control et roulant la mollete de la souris vers l'arriere) les textes les plus longs contenues dans les bodures rouges deborde.
ceci est vraiment desagreable Smiley decu

2)en changeant la resolution d'ecran ou en reduisant le zoom (si vous regardez bien) vous verez que le fond jaune du bloc parent deborde(par exemple avec un resolution de 1024 x 768 et un zoom de 90% sur chrome on peut observé se debordement)

3)le bloc #cssmenu aussi malgré le positionnement inline-block en reduisant le zoom (inferieur a 50%) ou en changeant la resolution d'ecran le bloc #cssmenu se positionne en bas du bloc #frere

je souhaiterais que le les deux bloc reste en place(comme avec la resolution 1024 x 768) malgré le changement de resolution d'ecran et de zoom
voila j'implore toute personne de bien vouloir m'aider a resoudre mon probleme je suis bloqué dessus depuis deux jours Smiley decu

Modifié par jacoumbo (27 Mar 2013 - 19:33)

rodolpheb

27 Mar 2013 à 22:36

Bonjour,

Vous rencontrez visiblement des problèmes avec le zoom de texte qui modifie la taille du texte mais pas des conteneurs fixés en px.
Aujourd'hui ceci ne constitue plus trop une préocupation majeure puisque les navigateurs proposent par défaut un zoom global.

Cependant si vous voulez un élément de réponse, modifiez la valeur de width en 5em de #cssmenu > ul > li > a. La taille de ce bloc réagira au zoom de texte.

Je ne vois pas votre problème de gestion de taille d'écran et de zoom et je pense que vous vous égarez. A voir en fonction de votre réponse.
Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Positionnement css