div#galerie
{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
|
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em
Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 0 ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
|
Pour rendre le tout plus agréable, il est possible de mettre un peu de style dans tout cela, voici un exemple de code CSS utilisable, à adapter aux besoins.
La galerie est mise en place. A ce stade on peut déjà tester le résultat : les liens sur les miniatures ouvrent les images en taille réelle dans la fenêtre. C'est le comportement effectif si le JavaScript est desactivé. L'accès au contenu n'est donc pas bloqué dans ce cas, les photos sont alors disponibles normalement. Il ne reste alors qu'à faire le script JavaScript pour rendre ceci un peu plus agréable.
|
