Aide pour mon menu
cedo
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Pour mon premier site, j'essaye de me debrouiller seul, mais, la...
Je veut faire un menu dans un calque avec des blocs qui changent d'image au passage de la souris, mais le probleme, c'est que ca decale tout vers le bas...: exemple ici http://cedopolice.free.fr/
Le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:51px;
top:30px;
width:130px;
height:72px;
z-index:1;
}
-->
</style>
<link href="css/menumarron.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<link href="menumarron.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menumarron" id="Layer1"><a href="travail a domicile/travail-a-domicile.html">Menu</a><br />
<a href="travail a domicile/Gerez des rencontres.html">menu1</a><br />
<a href="travail a domicile/Créez votre boutique.html">menu2</a></div>
</body>
</html>
le fichier css:
.menumarron {
font-family: "Trebuchet MS";
font-size: 12px;
display: block;
text-align: left;
color: #FFFFFF;
width: 130px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(normalbouton%20copie.png);
vertical-align: middle;
line-height: 24px;
}
.menumarron :hover {
font-family: "Trebuchet MS";
font-size: 12px;
display: block;
text-align: left;
color: #FFFFFF;
width: 130px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(normalboutonhover%20copie.png);
vertical-align: middle;
line-height:24px;
Vous avez une idée qui pourrait m'aider?
En vous remerciant d'avance, cedo
Pour mon premier site, j'essaye de me debrouiller seul, mais, la...
Je veut faire un menu dans un calque avec des blocs qui changent d'image au passage de la souris, mais le probleme, c'est que ca decale tout vers le bas...: exemple ici http://cedopolice.free.fr/
Le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:51px;
top:30px;
width:130px;
height:72px;
z-index:1;
}
-->
</style>
<link href="css/menumarron.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<link href="menumarron.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menumarron" id="Layer1"><a href="travail a domicile/travail-a-domicile.html">Menu</a><br />
<a href="travail a domicile/Gerez des rencontres.html">menu1</a><br />
<a href="travail a domicile/Créez votre boutique.html">menu2</a></div>
</body>
</html>
le fichier css:
.menumarron {
font-family: "Trebuchet MS";
font-size: 12px;
display: block;
text-align: left;
color: #FFFFFF;
width: 130px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(normalbouton%20copie.png);
vertical-align: middle;
line-height: 24px;
}
.menumarron :hover {
font-family: "Trebuchet MS";
font-size: 12px;
display: block;
text-align: left;
color: #FFFFFF;
width: 130px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(normalboutonhover%20copie.png);
vertical-align: middle;
line-height:24px;
Vous avez une idée qui pourrait m'aider?
En vous remerciant d'avance, cedo
A voir également:
- Aide pour mon menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
1 réponse
Bonjour,
En fait, tu as fabriqué un truc qui ne sert à rien.
Tous les styles pour les liens sont identiques.
et
Il ne faut pas d'espace avant le “ : ”
Tu devrais faire autrement.
Sers-toi des <a> pour placer ton image en arrière-plan.
Et c'est ces <a> qui recevront le display : block; une largeur, une hauteur et une hauteur de ligne identique à la hauteur.
Il est courant de trouver des menus fabriqués dans des listes.
++
Évite les espaces ou accents dans les noms de fichiers ou dossiers.
Trouve des noms plus explicites que “Layer1”.
--
En fait, tu as fabriqué un truc qui ne sert à rien.
Tous les styles pour les liens sont identiques.
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}équivaut àa {
color: #FFFFFF;
text-decoration: none;
}
et
.menumarron :hover {
font-family: "Trebuchet MS";
font-size: 12px;
display: block;
text-align: left;
color: #FFFFFF;
width: 130px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(normalboutonhover%20copie.png);
/* vertical-align: middle; ne sert à rien */
line-height:24px;
}équivaut à.menumarron :hover {
}ou à n'importe quoi d'autre.
Il ne faut pas d'espace avant le “ : ”
Tu devrais faire autrement.
Sers-toi des <a> pour placer ton image en arrière-plan.
Et c'est ces <a> qui recevront le display : block; une largeur, une hauteur et une hauteur de ligne identique à la hauteur.
Il est courant de trouver des menus fabriqués dans des listes.
++
Évite les espaces ou accents dans les noms de fichiers ou dossiers.
Trouve des noms plus explicites que “Layer1”.
--