Problème décalage des block du menu
Azerty
-
azerty -
azerty -
Bonjour,
Voila j'ai sur mon site une barre de menu horizontale découpé en plusieurs block, le problème c'est que quand je dézoom dans mon navigateur ou que je vais sur mon site sur un pc portable 10 pouces la taille des block, que j'ai pourtant défini, change.
Du coup soit j'augmente la largeur de mon menu mais dans ce cas le dernier block dépasse le bord de la page soit je ne fait rien et le dernier block passe a la ligne suivane !
Bref c'est assez ennuyeux, si quelqu'un à une idée je suis preneur.
Merci de m'avoir lu :)
Voila j'ai sur mon site une barre de menu horizontale découpé en plusieurs block, le problème c'est que quand je dézoom dans mon navigateur ou que je vais sur mon site sur un pc portable 10 pouces la taille des block, que j'ai pourtant défini, change.
Du coup soit j'augmente la largeur de mon menu mais dans ce cas le dernier block dépasse le bord de la page soit je ne fait rien et le dernier block passe a la ligne suivane !
Bref c'est assez ennuyeux, si quelqu'un à une idée je suis preneur.
Merci de m'avoir lu :)
A voir également:
- Problème décalage des block du menu
- Block breaker - Accueil - Services en ligne
- Menu déroulant excel - Guide
- Code block - Télécharger - Langages
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
4 réponses
Bonjour,
Les dimensions des blocs sont données en valeur fixe (pixel) ou en valeur relative (%, em) ?
Quand se pose un tel problème, le mieux c'est de joindre le code (extrait) HTML/CSS qui pose souci, dans ton cas le menu horizontal :-)
@+
Les dimensions des blocs sont données en valeur fixe (pixel) ou en valeur relative (%, em) ?
Quand se pose un tel problème, le mieux c'est de joindre le code (extrait) HTML/CSS qui pose souci, dans ton cas le menu horizontal :-)
@+
Bonjour, merci d'avoir répondu.
Voici mon code HTML:
<!-- Menu -->
<div id="menu2">
<ul id="menu">
<li>
<a href="xxx">xxx</a>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
</div>
Et mon code CSS
/* menu */
#menu2
{
width: 1024px;
height: 40px;
position: absolute;
margin-left: 0px;
margin-top: 350px;
/*border: 1px solid black;*/
}
#menu, #menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 40px;
text-align : center;
}
#menu /* Ensemble du menu */
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}
#menu a /* Contenu des listes */
{
display : block;
padding : 0;
background : #c3c3c2;
color : #000;
text-decoration : none;
width : 144px;
}
#menu li /* Elements des listes */
{
float : left;
border : 1px solid #000;
}
#menu li ul /* Sous-listes */
{
position: absolute; /
width: 144px;
left: -999em;
}
#menu li ul li /* Éléments de sous-listes */
{
border : 1px solid #000;
}
#menu li ul ul
{
margin : -41px 0 0 99px ;
border : 1px solid #fff ;
}
#menu a:hover
{
color: #000;
background: #f0f5f0;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}
Voici mon code HTML:
<!-- Menu -->
<div id="menu2">
<ul id="menu">
<li>
<a href="xxx">xxx</a>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
<li>
<a href="">xxx</a>
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</li>
</div>
Et mon code CSS
/* menu */
#menu2
{
width: 1024px;
height: 40px;
position: absolute;
margin-left: 0px;
margin-top: 350px;
/*border: 1px solid black;*/
}
#menu, #menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 40px;
text-align : center;
}
#menu /* Ensemble du menu */
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}
#menu a /* Contenu des listes */
{
display : block;
padding : 0;
background : #c3c3c2;
color : #000;
text-decoration : none;
width : 144px;
}
#menu li /* Elements des listes */
{
float : left;
border : 1px solid #000;
}
#menu li ul /* Sous-listes */
{
position: absolute; /
width: 144px;
left: -999em;
}
#menu li ul li /* Éléments de sous-listes */
{
border : 1px solid #000;
}
#menu li ul ul
{
margin : -41px 0 0 99px ;
border : 1px solid #fff ;
}
#menu a:hover
{
color: #000;
background: #f0f5f0;
}
#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}