Xhoromag 4 - Premières images

[Caïthness]

joli code

Code :

<div id="rightColumn">
<div id="adventures">Slider TODO
<div id="lastAdventure"></div>
<div id="winningAdventure"></div>
<div id="randomAdventure"></div>

plutot que d'empiler/imbriquer des "div", pourquoi ne pas faire des listes de definition avec un float (j'ai decouvert ca l'annee derniere et c'est bien pratique ) ?

genre :

Code :

[b]HTML[/b]

<dl class="gallery">
<dt><img src="flower.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>
</dl>

<dl class="gallery">
<dt><img src="flower2.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>
</dl>
<dl class="gallery">
<dt><img src="flower3.jpg" alt=""></dt>
<dt>Ici le titre</dt>
<dd>Ici la description</dd>

</dl>

[b]CSS[/b]

dl.gallery
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}

.gallery dt { font-weight: bold; }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}

source : Styler une liste de définitions pour en faire une galerie d'images


Pour la mise en page, je la trouve un peu trop "classique" et froide (notamment le menu du haut). Par contre, j'aime bien les petites barres vertes en bas de chaque section/case.