Cinq colonnes de classe span2



  • Par défaut le container de classe "container" d'une largeur de 940px; il est centré dans la largeur du body.

  • La colonne classe span2 est d'une taille par défaut de 140px.

  • Dans ce modèle, les quatre colonnes flottantes, côte à côte, occupent harmonieusement la largeur de la page.

  • Les quatre colonnes de la classe span2 sont flottantes, par défaut. Elles se positionnent donc automatiquement à droite de la précédente.

  • Lorsque l'ensemble des colonnes est disposé, il est donc nécessaire d'arrêter le flottement automatique à l'aide d'une division intermédiaire de classe "clearfix", sinon, la division suivante va également adopter un comportement flottant.
Merci d'éditer la page pour accéder aux codes HTML et CSS
Usage possible

Présentation de miniatures
cliquables, carrées,
d'une taille de 128 pixels de côté
Pour les miniatures, remplacez les lignes de div du code HTML par :
<a href="(adresse de la grande image originale)"><img class="miniatures" src="(adresse de l'image)" alt="(description de l'image" /></a>
La miniature est alors cliquable.

<img class="miniatures" src="(adresse de l'image)" alt="(description de l'image" />
<img class="miniatures" src="(adresse de l'image)" alt="(description de l'image" />
<img class="miniatures" src="(adresse de l'image)" alt="(description de l'image" />
<img class="miniatures" src="(adresse de l'image)" alt="(description de l'image" />

et créez une classe "miniature" dans votre feuille de style personnalisée:

.miniature {
height:128px;
width:128px;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:16px
}
wouh ! gaffe !
cinquième colonne !