Image au survol dans une liste verticale - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Image au survol dans une liste verticale

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Image au survol dans une liste verticale (Lu 1425 fois)

Image au survol dans une liste verticale
« sur: le 28-12-2013 a 17:54:24 »

Chrishardy
Membre récent

Hors-Ligne

Messages: 2

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>
<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>
</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

Rapporter au modérateur

Re:Image au survol dans une liste verticale
« Répondre #1 sur: le 28-12-2013 a 21:30:33 »

Soundboy39
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 153

Webmaster Freelance - Creation et Gestion

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...

Rapporter au modérateur

MO'WebCreation - Création et gestion de sites web
Réseaux sociaux : Facebook - Google +

Re:Image au survol dans une liste verticale
« Répondre #2 sur: le 28-12-2013 a 21:53:34 »

Chrishardy
Membre récent

Hors-Ligne

Messages: 2

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