Bonjour,
Ma question se porterait sur le tutoriel pour faire un menu avec commentaires en survol. Je souhaite réaliser le même à deux différences près :
1/ Des images plutôt que des commentaires (ce qui ne pose pas de problème)
2/ Que l'image apparaisse à droite et non au-dessous.
Comme un exemple vaut mieux qu'un discours, je voudrais grosso-modo réaliser quelque chose qui soit similaire au menu de la page d'accueil de ce site : Ici. Quand on passe la souris sur les liens à droite, l'image au centre se modifie. Et ceci sans javascript. Le code source est un peu brouillon, mais la méthode utilisée est la même que dans le tutoriel d'Alsa (me semble-t-il).
J'ai donc repris le tutoriel d'Alsacréations, et tout se passe bien jusqu'au moment où il s'agit de dire où doit s'afficher le span. J'obtiens ceci : test (ne faites bien évidemment pas attention à l'esthétique ni aux images, c'est juste pour faire des tests).
Vous voyez, je voudrais que les photos s'affichent correctement à droite du menu. Mais j'ai beau essayer de changer l'attribut position, le mettre en absolute, en relative, etc, et les valeurs, je n'y arrive pas
Mon Html est simple :
Et mon CSS n'est pas moins simple :
C'est dans la dernière accolade que tout se joue je pense (le a:hover span)
Merci d'avance pour votre aide, et félicitations pour ce très beau et bon site.
Soledad
Modifié par Soledad (06 Jul 2007 - 22:48)
Ma question se porterait sur le tutoriel pour faire un menu avec commentaires en survol. Je souhaite réaliser le même à deux différences près :
1/ Des images plutôt que des commentaires (ce qui ne pose pas de problème)
2/ Que l'image apparaisse à droite et non au-dessous.
Comme un exemple vaut mieux qu'un discours, je voudrais grosso-modo réaliser quelque chose qui soit similaire au menu de la page d'accueil de ce site : Ici. Quand on passe la souris sur les liens à droite, l'image au centre se modifie. Et ceci sans javascript. Le code source est un peu brouillon, mais la méthode utilisée est la même que dans le tutoriel d'Alsa (me semble-t-il).
J'ai donc repris le tutoriel d'Alsacréations, et tout se passe bien jusqu'au moment où il s'agit de dire où doit s'afficher le span. J'obtiens ceci : test (ne faites bien évidemment pas attention à l'esthétique ni aux images, c'est juste pour faire des tests).
Vous voyez, je voudrais que les photos s'affichent correctement à droite du menu. Mais j'ai beau essayer de changer l'attribut position, le mettre en absolute, en relative, etc, et les valeurs, je n'y arrive pas
Mon Html est simple :
<body>
<div id="conteneur">
<ul class="menu">
<li><a href="">Menu 1<span><img src="img/1.jpg"></span></a></li>
<li><a href="">Menu 2<span><img src="img/2.jpg"></span></a></li>
<li><a href="">Menu 3<span><img src="img/3.jpg"></span></a></li>
<li><a href="">Menu 4<span><img src="img/4.jpg"></span></a></li>
<li><a href="">Menu 5<span><img src="img/5.jpg"></span></a></li>
<li><a href="">Menu 6<span><img src="img/6.jpg"></span></a></li>
</ul>
</div>
</body>Et mon CSS n'est pas moins simple :
body {
text-align:center;
}
#conteneur {
width: 750px;
height: 600px;
background-color: #CCCCCC;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
text-align:left;
}
ul {
list-style-type: none;
margin:0;
padding:0;
}
.menu li {
margin: 0 0 5px 0 ;
padding: 0;
}
.menu li a {
display:block;
width: 131px;
height: 48px;
text-align: center;
border: 1px solid #fff;
text-decoration: none;
color: #000;
background: url(img/bouton.gif) no-repeat 0 0 ;
color: #FFFFFF;
border:0;
}
.menu li a:hover {
background: url(img/bouton.gif) no-repeat 0 -48px ;
}
.menu a span {
display: none;
}
.menu a:hover span {
display: block;
border-top: 1px solid gray;
color: #000;
/* et là j'ai essayé un peu toutes les possibilités pour tenter de placer l'image correctement... */
}C'est dans la dernière accolade que tout se joue je pense (le a:hover span)
Merci d'avance pour votre aide, et félicitations pour ce très beau et bon site.
Soledad
Modifié par Soledad (06 Jul 2007 - 22:48)