Galerie de photo : CSS a modifier
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
J'ai pêché un code pour les galeries de photos :
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 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 meme sur la ligne du dessous est plus adapté.
Merci de vos réponses, je donnerais plus de précision si c'est nécéssaire !
Bonne aprem !
Je vous remercie de votre aide
J'ai pêché un code pour les galeries de photos :
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 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 meme sur la ligne du dessous est plus adapté.
Merci de vos réponses, je donnerais plus de précision si c'est nécéssaire !
Bonne aprem !
Je vous remercie de votre aide
A voir également:
- Galerie de photo : CSS a modifier
- Google photo - Télécharger - Albums photo
- Galerie photo en ligne gratuite - Guide
- Comment masquer une photo dans la galerie - Guide
- Photo aérienne de ma maison - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
3 réponses
Voir
www.glowfoto.com/static_image/02-122026L/6133/jpg/07/2010/img4/glowfoto
Pour le schéma. ajouter (http:// devant)
www.glowfoto.com/static_image/02-122026L/6133/jpg/07/2010/img4/glowfoto
Pour le schéma. ajouter (http:// devant)