Discussion :

[lafouin]

Bonjours tout le monde,

J'ai un petit probléme avec un effet que je voudrais avoir sur cette page :

http://untildeath.free.fr/septcordes.html

Sous Firefox j'ai l'effet voulus, (petit décalage vers la gauche et encadrement qui passe au gris) mais sous IE rien ni décalage ni changement de cadre.

Je pense que cela viens de ma css, c'est la 1er fois que j'essaye de faire un site avec ca donc ^^ voila quand meme le code qui coince sous IE et marche sous Firefox:

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
div#miniature  a img
		{	
 
			text-align: center;
			border: 0.1em solid #ffffff;
			margin-bottom : 5px;
			float: right;
		}	
		div#miniature  a:hover img
		{	
 
			text-align: center;
			border: 0.1em solid #605f5f;
			margin-right : 10px;
			margin-bottom : 5px;
			float: right;
		}

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="miniature">
<a href="#" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')">
      <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne">
</a>
</div>
 
<div id="miniature">
<a href="#" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')">
<img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne">
</a>
</div>

Merci d'avance !

[AlphaYoDa]

Salut,

Essaie de le faire en donnant une classe au lien et en jouant sur celle-ci, c'est peut-être un problème d'adressage.

Personnellement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
/* CSS RollOver */
a.rollOver:hover img { filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; }

Modifie pour essayer, celui-ci ajoute de la transparence à l'image

[blueice]

Pourquoi mettre des divs de partout ?
Et puis un id ne peut se répéter, tu dois utiliser une classe
Essaye comme ca, je n'ai pas testé...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.miniature  a img 
      {    
         text-align: center; 
         border: 0.1em solid #ffffff; 
         margin-bottom : 5px; 
         float: right; 
      }    
.miniature  a:hover img 
      {    
 
         text-align: center; 
         border: 0.1em solid #605f5f; 
         margin-right : 10px; 
         margin-bottom : 5px; 
         float: right; 
      }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<a href="#" class="miniature" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')"> 
      <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a> 
 
 
<a href="#" class="miniature" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')"> 
<img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a>

[lafouin]

Pourquoi mettre des divs de partout ?
Et puis un id ne peut se répéter, tu dois utiliser une classe
Essaye comme ca, je n'ai pas testé...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.miniature  a img 
      {    
         text-align: center; 
         border: 0.1em solid #ffffff; 
         margin-bottom : 5px; 
         float: right; 
      }    
.miniature  a:hover img 
      {    
 
         text-align: center; 
         border: 0.1em solid #605f5f; 
         margin-right : 10px; 
         margin-bottom : 5px; 
         float: right; 
      }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<a href="#" class="miniature" onclick="ouvrir(750,1006,'miniatures/g_folk_7c_tete.html')"> 
      <img src="images/folk_7c_a.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a> 
 
 
<a href="#" class="miniature" onclick="ouvrir(750,500,'miniatures/g_folk_7c_sillet.html')"> 
<img src="images/folk_7c_b.jpg" alt="Guitare Sept Cordes Benoît de Bretagne"> 
</a>

J'ai encore beaucoup a apprendre des css et j'suis sur que la css que j'ai fait la est trés mauvaise :s j'essayerai d'amélioré ca tout de meme !

Sinon, impéccable ! les deux marchent parfaitement ! Merci à vous deux !

[AlphaYoDa]

Une 'tite guitare en guise de bonne volonté ?



PS: juste par rapport à l'effet de décaler la vignette à gauche.. je ne trouve pas ça très joli ,)

Bonne suite !

[leFred]

Bonjour, je me permets de reprendre ce fil car j'ai un problème similaire;

j'affecte une image a deux effets (up et down) de 200px de large, le but etant d'afficher l'une ou l'autre partie de l'image;(j'affecte cette image via un background dans un autre fichier css car c'est un png transparent) voici le code

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.btnCaddie span{
	display:block;
	position:absolute;
	overflow:hidden;
	float:left;
	width:100px;
	height:29px;
	top:0px;
	left:0px;
	cursor:pointer;
 
}
 
.btnCaddie a:hover span{
	left:-106px;
	padding-left:106px;
}

et le html (qui est en fait une génération via php):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div class='addCart'>
	<div class='btnCaddie'>
		<a href='#'><span></span></a>
	</div>
</div>

ça marche nickel sous FF mais pas IE et le plus étonnant c'est que j'ai fait cet effet sur mon menu et pas moyen de le reproduire; pour voir c'est ici c'est le bouton "commander"

Merci de votre aide

[leFred]

Bon je viens de voir que le hover est bien pris en compte (je lui rajoute une bordure et ça la rajoute effectivement), mais ça ne me décale pas mon image pour obtenir l'effet désiré ?