28234 sujets

CSS et mise en forme, CSS3

PB avec votre tuto Menu graphique animé - CSS3

Bonjour,
désolée j'ai trouvé un topic qui parle exactement de ce problème, en 2012, mais il n'a pas été résolu ou pour moi non.
Ci joint le tuto: http://www.alsacreations.com/xmedia/tuto/exemples/transitions/menu2.html#

Mon pb: Lorsque je survole mon image, elle se décale bien, mais les liens dessous ne sont pas clicables, bien que reconnus comme liens. Pourquoi je n'arrive pas à les atteindre ? ou ais-je fait une erreur ?
Je suis sur firefox 24. Safari 6.0.5

Help !

Ci joint le html, et css: (Il est très court)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu graphique animé</title>
<link href="menu-images.css" rel="stylesheet" type="text/css">
</head>

<body>

<ul id="menu">

<li>
<ul>
<li><a href="page1.html">Sousliste 1</a></li>
<a href="page1.html"><li>Sousliste 1b</a></li>
</ul>
<img src= "img/fleur.jpg" alt="" class="img-menu"/>
</li>


<li>
<ul>
<li >Sousliste 2</li>
<li >Sousliste 2b</li>
</ul>
<img src= "img/oiseau.jpg" alt="" class="img-menu"/>
</li>

<li>
<ul>
<li >Sousliste 3</li>
</ul>
<img src= "img/arrosoir.jpg" alt="" class="img-menu"/></li>

<li>
<ul>
<li>Sousliste 4</li>
</ul>
<img src= "img/fille.jpg" alt="" class="img-menu"/>

</ul>

</body>
</html>


.................................

body {
    margin: 250px;
    background: pink;
    color: #fff;
    font: 1em "din",arial;
    }
	
.img-menu {
	position:absolute;
    left: 0;
    top: 0;
		  border: none;
		  -moz-transition-property: padding-left;
			-moz-transition-duration: .5s;
			-moz-transition-timing-function: ease-out;}	

img:hover, img:focus {
			padding-left:140px;
		}
		
a {			
			color:green;
			text-decoration:none;	
		}
		  	
ul {   
		  margin: 0;
		  padding: 0;
		list-style:none;
		}
		
	  
#menu>li {
		  position: relative;
			display: inline-block;
			vertical-align: top;
			background:#777;
			color: #fff;
	
      height: 200px;
      width: 200px;
      margin: 0;
      padding: 0;
			overflow: hidden;
		}
			
li ul {
      font-size: 0.85em;
      margin: 8px;
      line-height: 1.4;
	  list-style:none;
    }



Voici comment ça s'affiche lors du survol de la première liste: il n'y a pas la main pour pouvoir cliquer. Je suis perdue Smiley fache Smiley fache Smiley biggol
Smiley fache Smiley fache Smiley fache Smiley fache
Modifié par 6l20 (28 Sep 2013 - 08:36)
Coucou, je viens de te corriger ton intégration tu trouveras la solution ici :
http://jsfiddle.net/WjvXc/

Explicatif :
• En hover tu as mis un padding-left, ce qui crée du contenu qui pousse vers la gauche, du coups la taille de l'image s'aggrandit du padding-left que tu lui donne ce qui provoque le fais de ne pas pouvoir cliquer sur les tiens.

Solution :
Changer ta façon de faire l'hover + correctif animation.
Tu trouveras ça sur le jsFiddle.

Bonne journée
Sujet clos
Aller à