[Abonnement Twitter] [Page officielle FaceBook du lycée] [Page FaceBook BTS CIM] [Abonnement flux RSS] [Infos] [Nous contacter] [Quoi de neuf] [Recherche] [Accueil]

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 :

[recherche] Bloc #1 200px
[infos] Bloc #2
[mail] Bloc #3 160px
Bloc #4 [rss]
[twitter] 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>
[Valid XHTML 1.0 Strict] [Valid CSS] [Valid RSS]