Mises en pages et placements des boites : des solutions harmonieuses flottantes

La propriété CSS float spécifie qu'un élément doit être retiré du flux normal et placé à la droite ou à la gauche de son bloc conteneur, conteneur où le texte et les éléments en-ligne se répartiront autour de lui.

Les flottant influencent les interactions entre les objets

Pensez à dessiner votre arborescence.

A l'aide de ce fichier et en utilisant uniquement la propriété float sur les imagettes (les div conteneurs des images), reconstruire l'image sur la gauche (appliquer les règles sur les imagettes une par une).

En vous aidant de la propriété clear, faites flotter le texte autour de l'image placée à gauche.

Que modifier pour obtenir ce résultat (toujours en n'appliquant les règles qu'aux imagettes) ?

Les flottants permettent d'améliorer le rendu

En appliquant maintenant les propriétés sur le conteneur de l'image reconstruite, sans changer les règles sur les imagettes, faites flotter l'image à droite puis à gauche.

Ils permettent une répartition simple et harmonieuse des objets

Nous travaillons sur ce fichier. Pensez à dessiner votre arborescence.
Pour le moment, appliquer un "display:none;" aux logos.

Pour visualiser le rendu par rapport à votre arborescence

  • numéroter les sections
  • alterner les couleurs des sections
  • bordurer les sections

Après leur avoir donner une largeur explicite, faites flotter les différentes sections, regardez comment elles se répartissent (en particulier les sections 7).

Donner une hauteur fixe aux sections (penser à gérer les débordements).
Penser à regarder les effets de changements de dimension de la fenêtre.

Faites maintenant flotter les articles. Constater l'harmonie

L'indispensable application

  • Faire flotter à droite l'image du fichier prism.
  • Peut-on obtenir cet agencement des boîtes "sommaire" "résumé" & "annexe" avec des flottants ?

Floats et adaptatif

En reprenant le td adaptatif, proposer une solution adaptative à base de flottants.
  • Le menu (qu'il serait souhaitable de construitre en nav), doit avoir, en fonction des média de rendu, trois modes
    • Six élements de menu sur une ligne.
    • Deux lignes de trois éléments de menu.
    • Trois lignes de deux éléments de menu.
  • Les articles doivent se placer les uns à coté des autres, harmonieusement, avec quatre articles dans la largeur, quand cela est possible avec un minimum de largeur de 15 em.
Que faut-il ajouter comme règles css pour les différents point de ruptures (breakpoints) pour obtenir ce résultat ?

Les problèmes de la dynamique et le clearfix

Les flottants agissent donc sur les boîtes les environnant, il est souvent nécessaire de pouvoir contrôler cette dynamique et de pouvoir, en particulier, la stopper.
En reprenant vos résultats de la partie "Répartition simple et harmonieuse" :

  • Annuler le flottement des éléments articles.
  • Donner une bordure et une couleur de fond aux éléments articles, que constatez-vous ?
  • Comment faire en sorte que la boite n°5 ne flotte plus ni ne laisse flotter les autres boîtes autour d'elle ?
  • Que constatez-vous au niveau de l'élément article ? Qu'en déduisez-vous en terme de flux d'un flottant par rapport à son conteneur ?

Mise en page du header.

En remettant le display des logos, mettre en page le header en trois colonnes,

  • Faire flotter le logo de l'udl à gauche
  • Faire flotter le logo de l'iut à droite
  • Quel est l'effet sur le titre (h1) de la page ?

Quel effet ont les flottants de header sur les sections (il faudra peut-être augmenter la taille des logos pour le constater).

Pour annuler cet effet, il faut stopper les effets des flottants après le header. Il faut pour cela utiliser le phénomène observé avec la section n°5 : construire un bloc non flottant (donc dans le flux) à la fin du conteneur (ici le header).

  • Comment stopper la dynamique de flottants à l'aide des règles de style ?
  • Tester et appliquer cette solution au header de votre document
  • Il est maintenant aisé de régler le problème de couleur de fond des articles....