Titre: Image au survol dans une liste verticale
Posté par: Chrishardy le le 28-12-2013 a 17:54:24
Bonjour à tous !
Je vous soumet un problème que je pensais résoudre facilement.
Mais non !!!?
J'essais d'afficher une image au survol de la souris dans une liste de liens verticaux voir ici --> http://chrishardy1957.free.fr/testsite/index.html
Mais comme vous pouvez constater je n'arrive pas à faire en sorte que les liens ne s'écartent pas pour laisser la place à l'image.
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet" type="text/css" />
<title>Galerie (Essai)</title>
</head>
<body>
<div id="contenant">
<div id="menu">
<ul id="onglets">
<li class="active accueil"><a href="index.html"> ACCUEIL </a></li>
<li class="news"><a href="news.html"> NEWS </a></li>
<li class="partners"><a href="partners.html"> PARTNERS </a></li>
<li class="contact"><a href="contact.html"> CONTACT </a></li>
</ul>
</div>
<div id="page">
<div id="cale"> </div>
<h1>GALERIE DE PHOTOS D'ARTISTES</h1><br />
<h3>Sélection d'artistes</h3>
<div id="colonne_gauche">
<h2></h2>
<ul id="phot_gauche">
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
</ul>
</div><!-- colonne_gauche -->
<div id="colonne_droite">
<h2></h2>
<ul id="phot_droite">
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
<li class="photographes"><a href="#">Artiste n°1</a></li>
</ul>
</div><!-- colonne_droite -->
</div>
</div>
</body>
</html>
Et le CSS :
.photographes a:hover {
display:block;
color:#f00213;
background-image: url(artistes/miniatures/mini_nogues.jpg);
background-repeat : no-repeat;
height: 200px;
width: auto;
margin: auto;
}
Malgré de nombreuses recherches je n'arrive pas à trouver la réponse à ce problème qui parait pourtant idiot !!!
Voici le site qui m'a inspiré cet essai : http://www.younggalleryphoto.com/photography.html
La solution du "onmousover" "onmouseout" comme sur ce site est un peu dépassé je présume ?
Si quelqu'un avait un peu de temps à me consacrer ce serait sympa !
Merci par avance !
Christian |
Titre: Re:Image au survol dans une liste verticale
Posté par: Soundboy39 le le 28-12-2013 a 21:30:33
Le solution rapide et efficace à ton problème :
Code:
.photographes a:hover {
background: url("artistes/miniatures/mini_nogues.jpg") no-repeat scroll center top rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
display: block;
height: 200px;
margin: auto;
width: auto;
}
|
|
Sinon d'un point de vue global il y a pas mal d'améliorations à apportées, pour commercer je te conseil d'utiliser un background de taille identique pour les liens au repos ce sera plus esthétique... |
Titre: Re:Image au survol dans une liste verticale
Posté par: Chrishardy le le 28-12-2013 a 21:53:34
Merci Soundboy39 pour cette réponse rapide !
En fait je cherche à afficher les images miniatures à droite ou à gauche des colonnes de liens sans que cela occasionne un déplacement ou le masquage des liens en question.
Je crois que je me suis fourvoyé et que je n'arriverais à rien de bien si mes miniatures ne sont pas dans le html !
Je reviendrais vers vous si je ne trouve pas la solution à mon problème.
Si je trouve je posterais ma solution !
Merci.
Christian |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|