Aide pour menu avec dreamweaver ou autre
cedo
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Je fais mon premier site, j'essaye de me debrouiller tout seul, mais, la, je coince...
Je veut faire un menu simple, 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
Je fais mon premier site, j'essaye de me debrouiller tout seul, mais, la, je coince...
Je veut faire un menu simple, 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 menu avec dreamweaver ou autre
- Menu déroulant excel - Guide
- Menu démarrer - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu démarrer classique - Guide
- Boot menu msi ✓ - Forum Carte-mère/mémoire
1 réponse
Bonjour,
Je crois que tu te complique un peu la tâche...
à ta place je définirait donc le layer 1 qui serait le menu
#layer1{
position:absolute;
...
}
dans lequel tu place des bouton comme ceci :
et tu définit dans ton css par exemple :
et pour gérer le survol
tu défini ensuite les propriétés de tes liens :
et normalement ton survol devrait fonctionner correctement
Je crois que tu te complique un peu la tâche...
à ta place je définirait donc le layer 1 qui serait le menu
#layer1{
position:absolute;
...
}
dans lequel tu place des bouton comme ceci :
<div id="layer1"> <div id="item"><a href="#">Rub 1</a></div> <div id="item"><a href="#">Rub 2</a></div> <div id="item"><a href="#">Rub 3</a></div> </div>
et tu définit dans ton css par exemple :
#item{
background-image:url('fond-maron.jpg');
}
et pour gérer le survol
#item:hover{
background-image:url('fond-maron-clair.jpg');
}
tu défini ensuite les propriétés de tes liens :
#item a{
font-size:12px;
color:#000000;
...
}
et normalement ton survol devrait fonctionner correctement
