Nota : Ni les bugs, ni les techniques de contournement de bugs sur les explorateurs peu respectueux des standards ne seront évoqués. Avant toute chose, ne regardez pas la solution avant d’avoir essayé de faire l’exercice ! Nous allons ici apprendre à...

Nota : Ni les bugs, ni les techniques de contournement de bugs sur les explorateurs peu respectueux des standards ne seront évoqués. La pseudo-classe :hover est capable d’afficher et masquer des objets au passage de la souris. Exemple - Passer au-dessus...

La lettrine permet de mettre en valeur la première lettre d’un texte, chapitre ou paragraphe :- en lui attribuant une taille imposante.- en la décorant. Le pseudo-élément first-letter • p:first-letter modifiera la première lettre d’un paragraphe Exemple...

Nota : Ni les bugs, ni les techniques de contournement de bugs sur les explorateurs peu respectueux des standards ne seront évoqués. Centrage des éléments de contenu Centrage horizontal • Appliquer la déclaration {text-align: center} au conteneur. Centrage...

• On positionne un élément flottant avec une déclaration float: left ou float: right. • Il est alors retiré du flux normal pour prendre place à gauche ou à droite du bloc qui le contient : c’est devenu un « flottant ». L’élément qui le suit s’écoulera...

Le positionnement absolu • Un élément positionné en absolu est placé par rapport à son parent si ce dernier est lui-même positionné, et sinon par rapport au premier ancêtre positionné. • Il n’est alors plus dans le flux normal. • Pour placer un élément...

Le positionnement dans le flux courant • Pour déplacer un bloc dans son conteneur, il suffit d’utiliser les propriétés déjà connues : margin et padding.• Les éléments de type bloc de succèdent verticalement. Les blocs occupent toute la largeur disponible...

Les différents éléments d’une page prennent place dans le flux courant, aussi appelé « flux normal ». Il correspond à l’ordre dans lequel apparaissent les boîtes dans le texte. L’ordre du flux courant intervient dans l’affichage par défaut. Mais certaines...

Un document bien hiérarchisé doit s’afficher de manière tout à fait lisible et fonctionnelle, même en l’absence de style CSS. Il est essentiel de comprendre cette arborescence pour bien utiliser le positionnement. exemple:

Lire la suite

Avec les CSS est apparue la notion de profondeur. Les différents objets sont superposés. Chaque élément en HTML est considéré comme une boîte. Aux dimensions induites par leur contenu s’ajoutent souvent les espaces de marges externes (margin) ou internes...