Exercice Sur La Propriété Float /
Correction

Corrigé de l'ExerciceSurLaPropriétéFloat (extraits de LaurentLunati) - Nov 2004

Dans ce premier exercice, vous deviez utiliser la propriété float pour créer une lettrine dans un paragraphe de texte. Vous avez utilisé pour cela le pseudo élément :first-letter.

(...)

Il y a bien eu quelques erreurs de syntaxes et autres petites malformations du code, (voire oubli de float ), mais rien de problématique, pensez juste à bien vérifier quelques points importants, cela vous facilitera la vie :

• mon code est il bien formé ?
• l'ordre d'apparition des propriétés est-il bien logique ?

1. Où s'arrête le float ?

Lorsque l'on utilise la propriété float on se trouve souvent confronté à ce type de problème. L'élément flottant est plus grand que le contenu. Dans notre cas la lettrine du paragraphe suivant est comprise comme du contenu et se positionne le long de la première lettrine.

L'exemple-1 met en évidence ce phénomène

Rappel :

L'élément flottant se positionne par rapport à la boîte qui le contient, il n'interfère pas sur ce qui le précède, les contenus (mais pas les boites) le suivants s'écoulent le long de l'élément flottant.

Dans notre cas la lettrine déborde de la boîte qui le contient (p) pour venir interférer sur le contenu de la boîte (p) suivante. Techniquement la lettrine du second paragraphe est considérée comme du contenu. C'est un comportement normal qui peut même avoir des applications pratiques, comme faire flotter une image à cheval entre deux paragraphes.

Pour éviter cet effet il suffit de spécifier que chaque boîte contenant l'élément flottant et le contenu ne doit pas être affectée par des élément flottants extérieurs, on utilisera par exemple :

p {clear: left;}

Ce qui signifie que l'angle haut-gauche de la boîte paragraphe doit se trouver en dessous de tout élément flottant le précédant. A l'intérieur de cette boite paragraphe la lettrine continuera à flotter par rapport au contenu. Résultat : structure-2

Cette Technique pose un problème, comme on peut le voir dans le résultat, la lettrine déborde de la boîte paragraphe. Ce qui peut être assez inesthétique dans certaines conditions. Pour éviter cela il faudra trouver un moyen de placer notre clear à l'intérieur de la boite. L'une des techniques pouvant être utilisée est illustrée dans structure-3 elle n'est pas des plus simple, aussi nous en reparlerons dans un autre exercice.

2 des différences entre navigateurs

Vous avez pu le noter, l'aspect visuel change en fonction des navigateurs. La plupart de ces différences viennent de la façon dont le navigateur affiche les polices. Pour mieux comprendre le principe, vous pouvez tester structure-4 sur différents navigateurs en changeant la police. Il faut observer comment se place la police par rapport au fond jaune.

Les CSS n'ont que peu d'influence sur ce point, on peut uniquement constater que les écarts sont plus minimes avec certaines polices et orienter ses choix en fonction.

Un autre facteur de différence, toujours lié à l'interprétation des polices, est, le non-support par une majorité navigateurs des propriétés width et height sur la lettrine. Il semble que le fait qu'il s'agisse d'une lettre et donc d'un élément en ligne influe sur l'interprétation de la taille du bloc. Ainsi Safari reconnaît et interprète width et height mais pas mozilla ni IE. Ceci est dû au fait que le navigateur interprète la boîte générée, bien que devant être de type bloc, comme un caractère typographique dont la police définit les dimensions de la boîte.

On utilisera donc de préférence line-height, padding et margin pour dimensionner et positionner la lettrine. L'usage de line-height permettra de positionner verticalement la lettrine par rapport au texte. Son usage devra cependant se faire avec précaution, puisqu'il est directement lié à la police de caractère.

3 Explorer les propriétés disponibles

Dans cet exercice comme dans tous les exercices qui suivront, il ne faut pas hésiter à accumuler les propriétés dans une même déclaration (pour un même tag) en effet les navigateurs utilisent des valeurs par défaut qui ne sont pas toujours toutes identiques, et spécifier un maximum de choses est souvent un bon moyen d'harmoniser les rendus.

C'est aussi un bon moyen de découvrir ou d'imaginer de nouvelles façons de mettre en pratique les css. Si l'on fait un tour rapide des exercices qui ont été faits ici, on s'aperçoit que, finalement, les résultats se ressemblent beaucoup. C'est tout à fait normal et montre que l'exercice a été compris par tout le monde, pourtant il faut bien avoir à l'esprit que les css ne doivent pas être un frein à la créativité, et qu'à terme, le but est que vous soyez capables de sortir de ces modes d'utilisation type. Donc n'hésitez pas

Exemple

Pour finir un Exemple rapide de quelques pistes à explorer dans l'utilisation de la propriété float pour la réalisation d'une lettrine. Ces exemples mettent en valeur les différences d'interprétation qui existent entre les différents navigateurs, la hauteur de ligne est souvent en cause...

-- LaurentLunati