Galerie photo à modifier aide CSS

Bonjour, j'ai pêché un code pour faire une galerie photo : le code est :

HTML :

<div id="gallery">
<em id="thumbs">
<a href="#nogo">
<img src="image1.jpg" title="test" alt=""></a>
<a href="#nogo">
<img src="image2.jpg" title="mouahaha" alt=""></a>
<a href="#nogo">
<img src="image3.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image4.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image5.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image6.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image7.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image8.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image9.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image10.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image11.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image12.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image13.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image14.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image15.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image16.jpgg" title="" alt=""></a>
<a href="#nogo">
<img src="image17.jpg" title="" alt=""></a>
<a href="#nogo">
<img src="image18.jpg" title="" alt=""></a>
</em>
</div>

CSS :

body {
background-color: #ffffff
}
#gallery {
position: relative;
width: 750px;
}
#thumbs {
width: 180px;
float: left;
}
#thumbs a {
display: block;
float: right;
margin: 0 0 5px 5px;
width: 50px;
height: 50px;
border: 0px solid #000;
}
#thumbs a img {
width: 50px;
height: 50px;
border: 0;
}
#thumbs a:hover {
border-color: #ddd;
}
#thumbs a:hover img {
position: absolute;
width: auto;
height: auto;
left: 185px;
top: 0;
border: 1px solid #333;
}

Le résultat donne http://radservebeer.free.fr/tuto/css.alsacreations.com/effectcss/photo_simple.htm

Le code marche impeccable mais j'aimerai changer le CSS afin que ma galerie de photo soit centrée et que les photos agrandies apparaissent en dessous car mes photos sont du format 1500 par 500 donc les mettre sur la ligne du dessous est plus adapté.
Merci de vos réponses, je donnerais plus de précision si c'est nécessaire !
Bonne aprem !

PS voila un schéma de ce que j'aimerai avoir : http://www.glowfoto.com/static_image/02-122026L/6133/jpg/07/2010/img4/glowfoto

Je vous remercie de votre aide

Hello jiims et bienvenue,

pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises [ code] ... ici ton code [ /code] (sans espace après le crochet ouvrant) pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

Ensuite ton code pose problème car il ne permet pas de naviguer au clavier (tabulations). Il faudrait remplacer les a:hover par a:hover, a:focus, a:active

Pour ce qui est du centrage il suffit de lire les tutos qui vont bien.

Veuillez excuser ma présentation mais je n'étais pas encore au courant ! Pardonnez moi.
Pour le centrage ce n'est pas le probleme : j'aimerai vraiment que ce soit comme ici :http://www.glowfoto.com/static_image/02-122026L/6133/jpg/07/2010/img4/glowfoto
Donc un simple <div></div> ne fait pas l'affaire : il faut que l'image agrandie soit centrée elle aussi et que les mosaïques soient en longueur et non en hauteur.
Ou ais-je mal compris ?
En tous cas merci de ta réponse !

Bonjour,

Le fonctionnement de cette galerie d'image n'est pas terrible. Il y a plusieurs défauts importants:
1. Les images en grand format sont toutes chargées en même temps, ce qui est très lourd.
2. L'affichage repose sur la pseudo-classe :hover en CSS, donc sur le survol avec le pointeur de la souris. Ça veut dire que sur un périphérique tactile par exemple, la galerie d'image n'est pas utilisable du tout.
3. Par ailleurs, je ne suis pas fan des interfaces qui affichent de nouveaux contenus au survol. Je préfère que ça soit une action pleinement maitrisée, donc plutôt un clic.

Il y a un tutoriel pour une galerie d'image simple ici:
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
Et un autre pour une galerie qui reste simple en apparence, mais un peu plus avancée:
http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

Les deux demandent des notions de JavaScript. Le copier-coller sans comprendre n'est pas recommandé.

Pour la mise en forme exacte de la galerie d'image, eh bien on fait un peu ce qu'on veut avec les styles CSS. Si nécessaire, réviser le positionnement CSS.

Je me lance dans tout ça demain Merci !

Attends, désolé mais cette galerie utilise du java script, la mienne n'en utilisait pas. Je ne veux pas de java désolé ! Merci comme même ! Pourtant si tu me proposes d'autres galeries différentes sans Hover je suis a 100% partant mais pour le moment c'est celle la la plus adaptée malgré le HOVER...
Pour le positionnement je sais tout ça et pourtant... Si tu pouvais me donner le code modifié ce serait génial !
Merci !

jiims a écrit :
Je ne veux pas de java désolé !

Pas de problème, tu as parfaitement le droit de faire des erreurs de jugement, personne ne t'en voudra.

jiims a écrit :
d'autres galeries différentes sans Hover je suis a 100% partant

Tu peux effectivement faire une galerie sans utiliser :hover et sans utiliser JavaScript. Par exemple si tu regardes Flickr, tu as une galerie dont le fonctionnement de base utilise tout simplement des pages HTML multiples (une pour les vignettes, une page pour chaque image en grand). Exemple:
http://www.flickr.com/photos/fvsch/sets/72157624259004843/
(Il y a aussi des fonctions qui utilisent JavaScript, mais le fonctionnement de base ne repose pas dessus.)

jiims a écrit :
Si tu pouvais me donner le code modifié

Non, désolé. L'objectif de ce forum n'est pas de fournir des codes tout faits, même pour être gentil et dépanner les gens.
C'est d'ailleurs marqué ici:
http://forum.alsacreations.com/help.php#regle16

Si tu ne veux que tu CSS, je te conseil de regarder à l'adresse suivante :
http://www.cssplay.co.uk/

les galeries photos de stu nichols sont toutes en pur CSS, il y en a de toutes sorte, ce site est une mine d'information si tu cherches des idées.