DREAMWEAVER
Résolu
domie31
Messages postés
53
Statut
Membre
-
skyz1 Messages postés 11 Statut Membre -
skyz1 Messages postés 11 Statut Membre -
Bonjour,
Je réalise une interface avec un menu horizontal haut (genre barre de navigation).
Dans ce menu il y a 2 types d'images
1ère image = noire
2ème image = noire avec une flèche haute au centre
Je souhaite insérer dans un calque sur l'image noire un TITRE qui changera de couleur sur le hover.
Je veux que mon image noire avec flèche et mon titre hover s'affichent en même temps, mais que mon image noire avec flèche ne s'affiche pas quand je pointe sur l'image noire.
Merci pour vos réponses.
Cordialement,
Domie
Je réalise une interface avec un menu horizontal haut (genre barre de navigation).
Dans ce menu il y a 2 types d'images
1ère image = noire
2ème image = noire avec une flèche haute au centre
Je souhaite insérer dans un calque sur l'image noire un TITRE qui changera de couleur sur le hover.
Je veux que mon image noire avec flèche et mon titre hover s'affichent en même temps, mais que mon image noire avec flèche ne s'affiche pas quand je pointe sur l'image noire.
Merci pour vos réponses.
Cordialement,
Domie
Configuration: Windows XP Firefox 3.0.13
4 réponses
-
Bonjour,
Quelques pistes :
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
http://www.siteduzero.com/tutoriel-3-37440-un-menu-horizontal.html
Et si tu ne veux pas t'embêter :
http://cssmenumaker.com/ -
-
salut domie voila le code pour ce que tu souhaite faire a toi maintenant de l'adapter par rapport a ton contenue
<!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=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
}
/*debut css menu */
ul#en-tete
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(imgs/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#en-tete li
{
display:block;
float:left;
margin:0;
padding:0;
}
/* texte par defaut des lien du menu*/
ul#en-tete li a
{
display:block;
float:left;
color:#FFF;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
/*hover du menu avec image et texte qui change de couleur */
ul#en-tete li a:hover
{
color: #F60;
height:22px;
background:transparent url(imgs/nav_bg.png) 0px -30px no-repeat;
}
ul#en-tete li a.current
{
display:inline;
height:22px;
background:transparent url(imgs/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
-->
</style></head>
<body>
<div><ul id='en-tete'>
<li class="button"><a class='current' href="#">ACCUEIL</a></li>
<li class="button"><a href="#">test</a></li>
<li class="button"><a href="#">test</a></li>
<li class="button"><a href="#">test</a></li>
<li class="button"><a href="#">test</a></li>
</ul></div>
</body>
</html> -
Ravi d'avoir pu t'aider et maintenant que tu as pu faire ton menu tu sais comment proceder pour creer un menu horizontal avec ou sans image je pense que tu sais deja comment creer un vertical c'est le meme principe ya que le display qui change mais pour sa je te laisse chercher un peu ya qu'en s'exercant que l'on y arrive
