Album photos CSS —MaBulle ™

Album photos CSS

Pour les amateurs de photos, je vous propose de réaliser ce petit album avec un simple code CSS.

Auparavant, réalisez 11 images (5 de 240x320px) et (6 de 320x240px); pour ne pas vous tromper,
nommez-les par numéro, ex.(img1,img2,img3 etc.)... c'est compliquer??? Mais non!!

Voici comment il faut faire.

Images 1-2-5-7 et 8 > 320x240px + l'image par défaut que vous mettrez dans la feuille de style
à l'endroit indiqué.

Images 3-4-6-9-10 > 240x320px;

Pour la couleur de fond, modifiez 'background url image' ainsi que 'border left et right'
dans 'gallerie li a img.portrait'.

ça joue comme ça?

Reportez ce code dans votre feuille de style:

#album {
width:321px;
height:360px;
background:#8b0000
url(image par défaut) 0 40px no-repeat;
border:2px solid #ff0000;
margin:0 auto;
}
.gallerie {
padding:0;
margin:321px 0 0 0;
list-style-type:none;
position:relative;
width:320px;
}
.gallerie img {
border:0;
}
.gallerie li {
float:left;
}
.gallerie li a, .gallerie li a:visited {
font-size:11px;
float:left;
text-decoration:none;
color:#ffff00;
background:#0000ff;
text-align:center;
width:26px;
height:26px;
line-height:24px;
border:1px solid #444;
margin:2px;
}
.gallerie li a img {
position:absolute;
top:-320px;
left:0;
visibility:hidden;
border:0;
}
.gallerie li a img.paysage {
top:-280px;
}
.gallerie li a img.portrait {
left:0;
border-left:40px solid #8b0000;
border-right:40px solid #8b0000;
}
.gallerie li a:hover {
background:#c71585;
}
.gallerie li a:active, .gallerie li a:focus {
color:#ffff00;
background:#9933CC;
}
.gallerie li a:active img, .gallerie li a:focus img {
visibility:visible;
background:#CC3366;
}

Puis dans votre article:

<div id="album">
<ul class="gallerie">
<li><a href="#nogo">01<img class="paysage" src="url_img" />
</a></li><li>
<a href="#nogo">02<img class="paysage" src="url_img" />
</a></li><li>
<a href="#nogo">03<img class="portrait" src="url_img" />
</a></li>
Reportez la classe <li> pour les dix images
et à la fin </ul></li></div>

C'est fait?

Ne me dite pas que c'était difficile!!