Très joli bloc générique de site

Le div de contenu (content)

Les images ou les légendes n'ont parfois pas toutes la même hauteur. Voici une façon de pallier cette incertitude.

  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu avec ballon
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu
  • Jouet de parc de jeu avec ballon à air chaudJouet de parc de jeu

Ici en augmentant la hauteur du li de height: auto (exemple 12) à height: 11em, on donne assez d'espace pour le texte supplémentaire de la légende et on garde les vignettes parfaitement alignées.

Les éléments de liste ont le style de la règle suivante :

#thumb li {
float: left;
display: inline;
font-size: small;
text-align: center;
margin: 2px;
padding: 2px;
height: 11em;
width: 75px;
border-top: 1px solid #666;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 1px solid #666;}

Le bandeau interne (innersidebar)

  • lien
  • lien
  • lien
  • lien

Trucs et choses

Le bandeau interne utilise cette règle :

#innersidebar {
float: left;
width: 35%;
}