Problème décalage des block du menu

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 :)

A voir également:

4 réponses

Twinpics
 
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 :-)
@+
0
Azerty
 
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;
}
0
azerty
 
Petit up :(

(Je viens de voir que la personne qui avait répondu à supprimé son message)
0
azerty
 
Toujours personne? :/
0