Souci avec galerie photo d'hermann

Bonjour,
Je rencontre un gros souci... je n'arrive pas à changer les vignettes car elles sont sous forme de liste que se suive...

/* liste des vignettes*/
#container a.slidea, #container a.slideb, #container a.slidec, #container a.slided, #container a.slidee,

#container a.slidef, #container a.slideg, #container a.slideh, #container a.slidei {

	background: url(p1.jpg); 

	height:80px; 

	width:80px;

	}

je voudrais que chaque vignette affiche un background différent... j'ai retenté par liste ordonnée mais ça détruit tout l'ensemble.
Merci de votre aide j'en ai grandement besoin.

a écrit :
Souci avec galerie photo d'hermann

Ah? J'étais pas au courant

Pourrais tu être plus précis sur ce que tu souhaites obtenir stp?
Une liste serait pourtant plus appropriée a priori.
J'ai l'impression qu'il te manque quelques bases.

Bonjour,

klo64 a écrit :
sous forme de liste que se suive...

Au moins trois faute de grammaire et/ou de syntaxe dans cet extrait. Ce qui rend le sens complètement opaque.
Merci de soigner un minimum l'expression.

Plus généralement, merci aussi d'apporter plus de précisions sur ton problème... du moins si tu souhaites obtenir un peu d'aide.
Modifié par Florent V. (24 Sep 2007 - 14:22)

Oui effectivement, je suis absolument débutante... lorsque je me suis inscrite sur le forum je n'avais qqs jours de CSS "derrière moi"... désolée de n'avoir donné aucune information supplémentaire.

je pense qu'en faisant ainsi je devrais y arriver:

#container a.slidea {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideb {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidec {background:url(p1.jpg); height:80px; width:80px;}

#container a.slided {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidee {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidef {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideg {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideh {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidei {background:url(p1.jpg); height:80px; width:80px;}

mon code complet :

body {

	text-align:center; 

	font: 11px Verdana, Arial, Helvetica, sans-serif, arial, sans-serif; /*un ";" en trop supprimé*/

	letter-spacing:0.05em;

	}

/* The containing box for the gallery. */

#container {

	position: relative; 

	width: 650px;  /*diminutions de la largeur*/

	height: 407px; 

	margin: 20px auto 0; 

	border: 1px solid #aaa; 

	background: #fff url(../images/back.jpg) no-repeat 75px 10px;

	}



/* Removing the list bullets and indentation - add size - and position */

#container ul {

	float:left;

	width:280px; 

	height:386px; 

	padding:0;  

	margin:5px; 

	list-style:none; 

	}

#container li {float:left;}



/* Remove the images and text from sight */

#container a.gallery span {

	position:absolute; 

	overflow:hidden; 

	width:1px; 

	height:1px; 

	top:5px; 

	left:5px; 

	background:#fff;

	}



/* Adding the thumbnail images */

#container a.gallery, #container a.gallery:visited {

	display:block; 

	color:#666666; 

	text-decoration:none; 

	border:1px solid #000; 

	margin:1px 2px 1px 2px; 

	text-align:left; 

	cursor:default;

	}

#container a.slidea {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideb {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidec {background:url(p1.jpg); height:80px; width:80px;}

#container a.slided {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidee {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidef {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideg {background:url(p1.jpg); height:80px; width:80px;}

#container a.slideh {background:url(p1.jpg); height:80px; width:80px;}

#container a.slidei {background:url(p1.jpg); height:80px; width:80px;}



/* styling the hovers */

#container a.gallery:hover {border:1px solid #fff;}

#container a.gallery:hover span {

	position:absolute; 

	width:300px;  /*valeur modifiée >  trop étroit*/

	height:400px; 

	top:0px; 

	left:340px; /*valeur modifiée*/

	color:#666666; 

	background:#fff;

	border: 1px solid #00FF00

	}
#container .barresuivantprecedent {
	float: left;
	height: 20px;
	width: 300px;
}

#container a.gallery:hover img {

	float:left; 

	margin-right:5px;

	border:1px solid #fff; 

	}

#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
#Layer2 {
	position:absolute;
	left:288px;
	top:431px;
	width:278px;
	height:31px;
	z-index:1;
}
#Layer3 {
	position:absolute;
	left:288px;
	top:445px;
	width:280px;
	height:24px;
	z-index:1;
}

-->

</style>

Merci pour le lien.
Je n'aurais pas dû appeler au loup
Le CSS est assez compliqué, si on si atèle pas de façon rigoureuse.
A très bientôt, sûrrement