le bloc sticky dont on parle en fin de page
Les blocs
Un titre pour une div.bloc
Aucun habillage, juste un clear avant et après. La bordure pointillée violet matérialise le contour sur cetté démo.
Utilisation: pour contenir des flottants ou le styler à sa guise.
Les bloc1, bloc2 et bloc3 permettent d'afficher du contenu centré mis évidence par une bordure et ombrage. Ajout de marges haut-bas et padding. La marge haute du premier enfant, ainsi que la marge basse du dernier enfant sont mise à zéro pour ne conserver que le padding du bloc.
Un titre pour une div.bloc1
Un titre pour une div.bloc2
Un titre pour une div.bloc3
Les positionnements
Absolue
abs-center
abs-left
abs-right
abs-top
abs-bottom
<div class="abs-bloc display-inline-block">
<img src="/images/photos/Pingouins-mini.jpg" alt=""/>
<div class="abs-center bg-orange">abs-center</div>
<div class="abs-left bg-brun">abs-left</div>
<div class="abs-right bg-brun">abs-right</div>
<div class="abs-top bg-violet">abs-top</div>
<div class="abs-bottom bg-violet">abs-bottom</div>
</div>
TEXTE EN HAUT
TEXTE EN BAS
Pensez à utiliser une largeur 100% et la justification texte
<div class="abs-bloc display-inline-block">
<img src="/images/photos/Pingouins-mini.jpg" alt=""/>
<div class="abs-top bg-orange w12 tc">TEXTE EN HAUT</div>
<div class="abs-bottom bg-violet w12 tc">TEXTE EN BAS</div>
</div>
Sticky
La position sticky permet de "coller" la ligne lors du déplacement de la page
<div class="pos-sticky bg-violet tc p1">
le bloc sticky dont on parle en fin de page dans
<a class="t-jaune b" href="#position">positionnement</a>
</div>Flottant
Les traditionnelles classes pour les flottants
Float-right
Float-left
<div class="bloc">
<div class="float-right w2 bg-violet">Float-right</div>
<div class="float-left w2 bg-orange">Float-left</div>
</div>