Le Flux

Le flux d’un document pourrait se définir comme étant le comportement naturel d’affichage des éléments d’une page web.

L’ordre dans lequel apparaissent les balises dans le code HTML sera l’ordre dans lequel les éléments seront affichés et apparaîtront dans le document, c’est le Flux. Cela signifie que par défaut, chaque élément est dépendant des éléments qui l’entourent.

Il faut garder à l’esprit qu’un élément dans le flux sera toujours plus simple à manipuler et plus flexible dans sa relation aux autres éléments. Gardez en tête que laisser à un élément son comportement naturel est toujours à privilégier. Autrement dit, on ne sortira un élément du flux que lorsqu’on ne pourra pas faire autrement.

Structure HTML et rendu CSS des balises : bloc et en-ligne

Historiquement, HTML ne proposait que deux catégories d’éléments : les éléments de niveau block et les éléments de niveau inline. Cette catégorisation autorise ou non certaines imbrications (par exemple un niveau inline de peut pas contenir de niveau block).

• Les éléments de rendu “bloc” se placent toujours l’un en dessous de l’autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise p) ou les éléments d’une liste (balise li). Par ailleurs, un élément “bloc” occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur. On peut citer : h1, p, ul, ol, dl, table, blockquote, etc. [liste complète des éléments HTML en bloc]
  • Il occupe l’entièreté de la largeur de son conteneur ;
  • Il permet l’attribution de marges verticales ;
  • Il permet la modification de sa hauteur et largeur.
• Les éléments de rendu “en-ligne” se placent toujours l’un à côté de l’autre afin de rester dans le texte. Par exemple : le renforcement d’une partie de texte à l’aide de la balise em, ou encore a, img, strong, abbr, span, etc. [liste complète des éléments HTML en ligne]
  • Sauf exception, les éléments de type en-ligne n’ont pas de dimension à proprement parler par défaut (il n’occupent que la place minimum nécessaire à leur contenu).

Rendu CSS : la propriété display

Notons que tout élément peut être “reclassé” dans le type opposé grâce à la propriété display. Des propriétés CSS d’un élément (display: block, inline, list-item, inline-block, table, table-cell,…) découlent ses spécificités d’affichage, son positionnement dans le flux.

inline-block

Les éléments de rendu inline-block conservent les mêmes caractéristiques que les “inline”, mais peuvent être dimensionnés, par exemple la balise <input>.

list-item

Les éléments de rendu list-item ont un rendu de type “block” mais peuvent bénéficier des propriétés CSS liées aux puces (list-style, list-style-type, list-style-image, list-style-position , …), par exemple la balise <li>.

table, table-row, table-cell

Les éléments de rendu table, table-row, table-cell possèdent le même comportement que les éléments de tableaux et cellules (<table>, <tr>, <td>). Ils permettent de centrer les contenus verticalement et d’avoir des hauteurs identiques entre éléments frères, par exemple la balise <td>.

D’autres valeurs pour le display

Voici une liste exhaustive de valeurs pour display

Rendu CSS : La propriété position

La propriété position est celle vers laquelle on se doit de se tourner en premier lieu dès que l’on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c’est là toute la raison d’être de cette puissante propriété.

La position statique

static est la valeur par défaut de tous les éléments. Un élément avec position: static; n’est positionné d’aucune manière spéciale. Un élément static est dit non positionné et un élément avec une propriété position ayant une valeur autre que static est dit positionné.

La position relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence. Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu’ils considèrent que l’élément est toujours dans le flux à sa position initiale.

Attribuer à un élément une position relative peut être pratique voire indispensable dans d’autres situations, dont les plus courantes sont sans nul doute les suivantes:

• Servir de référent à un élément enfant positionné en absolu (rappelons qu’un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d’avoir un parent lui-même positionné)
• Bénéficier de la possibilité d’utiliser la propriété z-index pour gérer des superpositions d’éléments (propriété inopérante pour des éléments du flux)

La position fixe

Un élément positionné en fixed est positionné par rapport a la fenêtre du navigateur, ce qui signifie qu’il reste toujours à la même place même si la page défile. De la même manière qu’avec un élément positionné en relative, nous pouvons utiliser les propriétés top, right, bottom et left.

Les navigateurs mobiles ont, étonnement, un support très approximatif de la valeur fixed.

La position absolue

absolute est la valeur la plus délicate. absolute se comporte comme fixed sauf que son positionnement est relatif à l’élément parent positionné le plus proche au lieu d’être relatif à la fenêtre du navigateur. Si un élément positionné en absolute n’à aucun élément parent positionné, il utilise le corps du document et se déplace avec le document au défilement de la page. N’oubliez-pas qu’un élément “positionné” est un élément dont la position est tout sauf static.

L’élément, n’étant plus dans le flux naturel, perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l’élément parent.

Il est capital de noter qu’un élément bénéficiant d’une position absolue ne bougera pas de sa position initiale tant que l’une des propriétés top, bottom, left ou right n’a pas été précisée; il s’agit d’ailleurs là d’un comportement applicable à toutes les positions.

La position sticky

Un élément dont la propriété de position vaut sticky se comporte comme un élément positionné de façon relative jusqu’à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de top) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu’à atteindre le bord opposé du bloc englobant.

La propriété float

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d’habillages. Un habillage est une pratique courante dans le média print consistant à “enrouler” un texte autour d’un élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média favori.

À l’instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu’occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l’extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l’envelopper.

Nettoyer les flottants

La propriété clear s’utilise conjointement aux float et permet à un élément (qui peut être d’ailleurs lui-même flottant) de ne plus subir le comportement d’habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).

Centrage des éléments

Vient toujours le moment où l’on veut centrer des contenus ou tout un site.

Pour centrer horizontalement un texte, on utilisera text-align. Pour centrer horizontalement un bloc, on utilisera la technique des marges automatiques.

#main {width: 600px; margin: 0 auto; }

max-width

Utiliser max-width à la place de width améliorera la gestion des petites fenêtres. C’est très important lorsque l’on créé un site accessible sur mobile.

#main {max-width: 600px;margin: 0 auto; }

Modèles de boîtes et box-sizing

Si nous parlons de la propriété width, nous devrions parler du box model. Quand vous ajustez la propriété width d’un élément, celui-ci peut paraître plus gros que ce que vous avez indiqué : la bordure et le padding de l’élément l’étirent au delà de la largeur spécifiée.
Quand vous ajoutez la propriété box-sizing: border-box; à un élément, le padding et la bordure de cet élément n’augmentent plus sa largeur.

.simple {width: 500px;margin: 20px auto;box-sizing: border-box;}

C’est tellement mieux que certains auteurs veulent que tous les éléments de toutes leurs pages fonctionnent de la même manière. Ils ajoutent donc ce bout de CSS à leurs pages :

* {box-sizing: border-box;}

Puisque box-sizing est plutôt récent, vous devriez utiliser les préfixes -webkit- et -moz- pour l’instant, comme dans les exemples.

Centrage des éléments absolute

Pour les éléments positionnés en “position: absolute” et autres éléments positionnés hors du flux, la technique des marges latérales automatiques ne fonctionne pas.

Il existe une solution grâce aux transformations et notamment aux translations :

.truc-a-centrer {
  position: absolute; /* postulat de départ */
  top: 50%; 
  left: 50%; /* à 50%/50% du parent référent relatifs à la taille du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
}