28172 sujets

CSS et mise en forme, CSS3

Positionnement du menu selon les résoltuions

Bonjour,
sur mon site (actuellement en local) j'ai le menu horizontal qui volontairement n'est pas centré. Il est légèrement décalé vers la droite.
Le problème est que je n'arrive pas à faire suivre le menu selon les résolutions. Comment faire en sorte qu'il reste toujours au même endroit ?
Actuellement, je le décale en margin-left:32%
Je précise que le fond du menu est directement l'image fixe du background de <body>
Ce même background est centré comme suit : background-position : center top;
Je mets le code du menu :

#catmenu 
{ 
width:700px; 
height:39px; 
margin:0 0 0 32%; 
} 
 
#catmenu ul 
{ 
  font-size:1em; 
  list-style:none; 
  margin:0; 
  padding:0; 
} 
 
#catmenu li 
{ 
  float:left; 
  border-bottom:0; 
} 
 
#catmenu li a 
{ 
font-weight:bold; 
font-size:120%; 
color:#FF8D4F; 
margin-left:.5em; 
display:block; 
padding:10px 10px 10px 10px; 
} 
 
#catmenu li.current-cat a 
{ 
  background:url(../../../photos/fond-active.jpg) repeat-x; 
  color:#C82929; 
  margin-left:.5em; 
  display:block; 
  font-weight:bold; 
  padding:10px 10px 10px 10px; 
   
   
} 
 
#catmenu li a:hover 
{ 
  background:url(../../../photos/fond-active.jpg) repeat-x; 
color:#FF796F; 
text-decoration:underline; 
padding:10px 10px 10px 10px; 
 
} 
 
#catmenu ul li ul 
{ 
  display:none; 
}


Le code du background :

body
{
background:url(../../../photos/banniere-copie_02.jpg) no-repeat;
background-position:center top;
color:#151515;
font-family:"Trebuchet MS", Verdana, sans-serif;
font-size:80%;
line-height:1.4;
text-align:left;
margin:0;
padding:0;
overflow-X:hidden;
}

Merci à quiconque pourra m'aider, une fois ce problème résolu je pourrai mettre le site en ligne.
Modifié par defranci (31 May 2010 - 11:35)
Salut,

Le fait de positionner ton menu à l'aide d'une marge à gauche en pourcentage provoque ce décalage, car 32% de 1024 pixels de large ne correspondent bien sur pas à 32% de 1920 pixels de large.
Pour que ton menu soit toujours au même emplacement il faut que tu utilise une marge avec une valeur dans une unité fixe, à savoir le pixel. A toi de trouver la valeur qui correspond au décalage que tu souhaite. Smiley smile
Sujet clos
Aller à