Bonjour, je suis toujours occupé à survoler le liver et le chapitre consacré au survole des liens me pose problème losque je cree un menu, j'ai repris le code du livre et je l'ai comparé à celui présent sur le site, mais un problème se pose, la balise <span> qui devrait s'afficher lors du survole ne s'affiche pas.
Voici le code HTML:
Et voici le code CSS :
J'ai essayé l'affichage via Mozilla et via Explorer, mais le texte qui doit s'afficher normalement ne s'affiche pas. Où est mon erreur??
Merci
Modifié par Chaos (25 Sep 2005 - 19:31)
Voici le code HTML:
<body>
<ul id="menu">
<li><a href="#">Lien 1<span>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus ipsum dui, vulputate ut, eleifend pretium,
tristique a, velit. Morbi lacus</span></a></li>
<li><a href="#">Lien 2<span>Cras eu mi vel pede tempus dignissim. Etiam
malesuada scelerisque massa. Maecenas metus sem, consectetuer quis,
rhoncus non, euismod id, elit</span></a></li>
<li><a href="#">Lien 3<span>Cras fringilla. Integer in neque. Nulla
massa. Vestibulum eleifend mattis erat</span></a></li>
<li><a href="#">Lien 4<span>Sed bibendum vehicula sem. Donec venenatis
diam eu erat. Ut rutrum sem ut erat</span></a></li>
</ul>
</body>
Et voici le code CSS :
ul {
list-style-type: none;
margin:0;
padding:0;
position: relative; /* positionnement du menu, pour contenir des éléments positionnés */
width: 500px;
}
li {
float: left;
border-bottom: 1px solid black;
}
#menu a { /* définition de chaque bouton du menu */
width: 100px; /* largeur du bouton, modifiable à loisir */
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: #fff;
}
#menu a:hover {
color: #411;
background: #aaa;
border: 1px solid black;
border-bottom: 1px solid #555;
}
#menu a span { /* définition de la balise span incluse dans le lien <a> */
display: none;
}
#menu a:hover span { /* définition de la balise span lors du survol */
display: block;
position: absolute;
top: 23px;
left: 0;
width: 500px;
text-align: left;
color: #000;
}
J'ai essayé l'affichage via Mozilla et via Explorer, mais le texte qui doit s'afficher normalement ne s'affiche pas. Où est mon erreur??
Merci
Modifié par Chaos (25 Sep 2005 - 19:31)