Bonjour à tous.
J'essaie de faire un menu proprement en utilisant une liste. Jusque-là ca va. Mais lorsque je veux mettre un effet d'ombre au texte de mes boutons, c'est un plus galère. Ca fonctionne avec FF, mais IE, Safari et Chrome me font des misères. J'ai fait une recherche sur le forum et je n'ai pas trouvé la réponse. J'aimerai donc votre aide.
Voici le HTML :
Et la CSS :
Merci beaucoup pour votre aide.
Modifié par Bob33 (27 Jul 2009 - 12:46)
J'essaie de faire un menu proprement en utilisant une liste. Jusque-là ca va. Mais lorsque je veux mettre un effet d'ombre au texte de mes boutons, c'est un plus galère. Ca fonctionne avec FF, mais IE, Safari et Chrome me font des misères. J'ai fait une recherche sur le forum et je n'ai pas trouvé la réponse. J'aimerai donc votre aide.
Voici le HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Sport</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div name="site">
<img src="bandeau_bleu.jpg" />
<ul name="menu">
<li><a href="index.htm" name="acceuil"><p class=ombre><span>Acceuil</span>Acceuil</p></a></li>
<li><a href="skate.htm" name="skate"><p class=ombre><span>Skate</span>Skate</p></a></li>
<li><a href="roller.htm" name="roller"><p class=ombre><span>Roller</span>Roller</p></a></li>
<li><a href="kite.htm" name="kite"><p class=ombre><span>Kite</span>Kite</p></a></li>
<li><a href="surf.htm" name="surf"><p class=ombre><span>Surf</span>Surf</p></a></li>
<li><a href="contact.htm" name="contact"><p class=ombre><span>Contact</span>Contact</p></a></li>
</ul>
</div>
</body>Et la CSS :
body {
margin: 0;
padding: 0;
background-color: white;
text-align: center;
color: black;
}
div {
margin-left: auto;
margin-right: auto;
width: 998px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #001968;
letter-spacing:1px;
background-color: yellow;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline;
}
a {
float: left;
text-decoration: none;
border: 0;
color:#001968;
outline: none;
}
p.ombre {
color: pink;/*#aed0ff;*/
background-color: red;
}
span {
position: absolute;
color: #001968;
margin-top: -1px;
height: 46px;
}
a[name=acceuil] {
background-image: url("bouton_menu_acceuil.jpg");
width: 100px;
height: 46px;
}
a[name=skate] {
background-image: url("bouton_menu.jpg");
width: 197px;
height: 46px;
}
a[name=roller] {
background-image: url("bouton_menu.jpg");
width: 197px;
height: 46px;
}
a[name=kite] {
background-image: url("bouton_menu.jpg");
width: 197px;
height: 46px;
}
a[name=surf] {
background-image: url("bouton_menu.jpg");
width: 197px;
height: 46px;
}
a[name=contact] {
background-image: url("bouton_menu_contact.jpg");
width: 110px;
height: 46px;
}
a:link {
text-decoration: none;
border: 0;
}
a:focus {
text-decoration:none;
color:#001968;
border:0;
}
a:visited {
text-decoration:none;
color:#001968;
}
a:active {
text-decoration:none;
border:0;
}
img {
border:0;
}Merci beaucoup pour votre aide.
Modifié par Bob33 (27 Jul 2009 - 12:46)
.