Décalage de mon menu ! reso ecran
Bonjours ,
J'ai remarquer que mon menu se décaler en changeant la resolution de mon ecran , c'est à dire , il est bien centrer quand je suis
en 1680 mais le menu se décale quand j'applique la resoltion 1024 . Je comprend pas , depuis hier , j'essaye de trouver la
solution pour que mon menu reste centrer mais je trouve pas ,
Voici le code de mon menu.css pour vous aider :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale et centrée</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
}
.hovermenu ul{
font: bold 16px arial;
padding-left: 0%;
margin-left: 38%;
text-align : center;
height: 0%;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 0% 0.5em;
text-decoration: none;
float : left;
color: black;
background-color: #C0C0C0;
border: 1px solid #000000;
}
.hovermenu ul li a:hover{
background-color: #996600;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
}
</style>
Et celui du html :
<div class="hovermenu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="Parcours.html">Parcours</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="cv.html">Mon CV</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
Voila mes codes pour mon menu.
Que faut t'il changer ou bien rajouter svp?
Je commence a désespérer. =(
J'ai remarquer que mon menu se décaler en changeant la resolution de mon ecran , c'est à dire , il est bien centrer quand je suis
en 1680 mais le menu se décale quand j'applique la resoltion 1024 . Je comprend pas , depuis hier , j'essaye de trouver la
solution pour que mon menu reste centrer mais je trouve pas ,
Voici le code de mon menu.css pour vous aider :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale et centrée</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
}
.hovermenu ul{
font: bold 16px arial;
padding-left: 0%;
margin-left: 38%;
text-align : center;
height: 0%;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 0% 0.5em;
text-decoration: none;
float : left;
color: black;
background-color: #C0C0C0;
border: 1px solid #000000;
}
.hovermenu ul li a:hover{
background-color: #996600;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
}
</style>
Et celui du html :
<div class="hovermenu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="Parcours.html">Parcours</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="cv.html">Mon CV</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
Voila mes codes pour mon menu.
Que faut t'il changer ou bien rajouter svp?
Je commence a désespérer. =(
Configuration: Windows XP Firefox 3.0.11
10 réponses
-
Bonjour,
De primes abord, je dirais qu'il y a quand même quelques mélanges "suspects" entre % et autres (principalement dans ton padding)... et puis height:0%; me parait plus qu'étrange.
A part ça je ne vois rien de particulier dans tes bouts de code... essaye déjà de "cleaner" un peu ce que je viens de citer ! Si ça ne marche pas, on va retrousser nos manches ! ;)
-
Donc voila j'ai bien changer mon code est sa reste toujours pareil : voici le probleme en image ,
-------> http://www.sebastien-audiovisuel.com/menu.jpg
Et voici le code css :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale et centrée</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
}
.hovermenu ul{
font: bold 16px arial;
padding-left: 0px;
margin-left: 38%;
text-align : center;
height: 100%;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 0px 0.5em;
text-decoration: none;
float : left;
color: black;
background-color: #C0C0C0;
border: 1px solid #000000;
}
.hovermenu ul li a:hover{
background-color: #996600;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
}
</style>
code html :
<div class="hovermenu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="Parcours.html">Parcours</a></li>
<li><a href="projet.html">Projets</a></li>
<li><a href="cv.html">Mon CV</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
=( -
up svp
-
up
-
Et si tu enlevais ton margin-left ?
-
je vien de l'enlevez et mon bloc menu c'est déplacer à droite cette fois ci .
toujours pas centrer =( -
Et en faisant : margin:0 auto 0; ?
-
toujours pas , voici le code aprés changements :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale et centrée</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
width: 100%;
margin: auto;
text-align: center;
}
.hovermenu ul{
font: bold 16px arial;
padding-left: 0px;
text-align : center;
height: 100%;
width: 100%;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 0px 0.5em;
text-decoration: none;
float : left;
color: black;
background-color: #C0C0C0;
border: 1px solid #000000;
}
.hovermenu ul li a:hover{
background-color: #996600;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
}
</style>
Mais ceci reste toujours pareil , apars que cette fois-ci c'est vers la gauche que mon menu se place. -
Merci pour ton aide , j'ai enfin trouver le probleme , il me sufit que j'enleve le float: left du :
.hovermenu ul li a{
padding: 0px 0.5em;
text-decoration: none;
float : left;
color: black;
background-color: #C0C0C0;
border: 1px solid #000000;
}
Voila merci pour tout vos réponse et votre aide , je peut enfin continuer mon site tranquillement =) -
Ah bah voilà ! ^^
De rien, content que tu aies résolu ton problème !
Bonne continuation. ;)
