Accueil > galerie > galerie-css

{ Galerie pure css /xhtml }

Introduction

cssGalerie

Placement des images

Pour commencer, créez un dossier que vous nommerez photos à la racine de votre site. Placez-y les photos que vous souhaitez voir apparaître dans votre galerie.

Html

Pensez à mettre la bonne source pour vos images.

<div id="gallery">
      <em id="thumbs">
        <a href="#nogo">
          <img src="photos/1.jpg" /></a>
        <a href="#nogo">
          <img src="photos/2.jpg" /></a>
        <a href="#nogo">
          <img src="photos/3.jpg" /></a>
        <a href="#nogo">
          <img src="photos/4.jpg" /></a>
        <a href="#nogo">
          <img src="photos/5.jpg" /></a>
        <a href="#nogo">
          <img src="photos/6.jpg" /></a>
        <a href="#nogo">
          <img src="photos/7.jpg" /></a>
        <a href="#nogo">
          <img src="photos/8.jpg" /></a>
        <a href="#nogo">
          <img src="photos/9.jpg" /></a>
        <a href="#nogo">
          <img src="photos/10.jpg"  /></a>
        <a href="#nogo">
          <img src="photos/11.jpg" /></a>
        <a href="#nogo">
          <img src="photos/12.jpg" /></a>
        <a href="#nogo">
          <img src="photos/13.jpg" /></a>
        <a href="#nogo">
          <img src="photos/14.jpg" /></a>
        <a href="#nogo">
          <img src="photos/15.jpg" /></a>
        <a href="#nogo">
          <img src="photos/16.jpg" /></a>
        <a href="#nogo">
          <img src="photos/17.jpg" /></a>
        <a href="#nogo">
          <img src="photos/18.jpg" /></a>
      </em>
    </div>

Css

Et enfin la feuille de style que vous pouvez joindre en lien dans l'entête de votre page ou alors fusionnez avec votre feuille de style existante.

<link rel="stylesheet" type="text/css" href="photo_simple.css" />
body {
background-color:#000;
width:800px;
height:400px;
}

#gallery {
position:relative;
width:750px;
}

#thumbs {
width:180px;
float:left;
}

#thumbs a {
display:block;
float:right;
width:50px;
height:50px;
margin:0 0 5px 5px;
}

#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;
}

Conclusion

Voilà ! Savourez votre galerie CSS