Lycée du Pays de Soule

Formations générales, scientifiques, technologiques & microtechniques Quoi de neuf sur le site ???

Modèles de styles

Empilement horizontal de blocs suivi d'un retour à la ligne

Même chose que pour les listes, mais avec des "div". On n'a alors pas d'image d'un dossier en fond et cela permet d'y mettre ce que l'on veut. La taille et d'autres styles peuvent être rajoutés pour obtenir l'effet voulu... Explication sur le CSS : les blocs sont tous "float: left" et sont tous placés dans un div lui-même "float: left".

Blocs avec contenus et styles différents :

Bloc #1 200px

Bloc #2

Bloc #3 160px

Bloc #4

Bloc #5 150px

<div class="blocs_empil_horizontal">
  <h4>Blocs avec contenus et styles différents  :</h4>
  <div class="bloc_empil_horizontal" style="width: 200px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_recherche.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[recherche]"
         title="Moteur de recherche" />
    Bloc #1 200px
  </div>
  <div class="bloc_empil_horizontal" style="width: 80px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_infos.png"
         style="width: 48px; height:48px; margin: 0px;"
         alt="[infos]"
         title="Informations" />
    Bloc #2
  </div>
  <div class="bloc_empil_horizontal" style="width: 160px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_mail-2.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[mail]"
         title="Contactez-nous" />
    Bloc #3 160px
  </div>
  <div class="bloc_empil_horizontal" style="width: 80px;">
    Bloc #4
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_rss.png"
         style="width: 48px; height:48px; margin: 0px;"
         alt="[rss]"
         title="Suivez-nous sur le Flux RSS" />
  </div>
  <div class="bloc_empil_horizontal" style="width: 150px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_twitter-3.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[twitter]"
         title="Suivez-nous sur Twitter" />
    Bloc #5 150px
  </div>
</div>

Lycée du Pays de Soule - Avenue Jean Monnet - 64130 Chéraute [Nous contacter] 05 59 28 22 28 - - Plan de situation [Nous trouver] Réalisation : Infos techniques et statistiques.
Merci à Elephorm et Alsacréations © 2008 pour la mise en page ainsi qu'à Thomas D. (Développeur web, Verviers - Belgique) pour le "menu accordéon"