Cours CSS

Premiers pas avec les CSS


Télécharger Premiers pas avec les CSS

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


COURS 06-07-08 : Techniques de mise en page 
57 
[Web, principes de base] BAC INFORMATIQUE 
 
 
 
 
 
 
 
 
 
 
CSS  
Techniques de 


 0

mise en page  
 
 
itre
Objectifs du chapitre : 
•  Comprendre le modèle de boîte 
ap
•  Les imbrications de boîtes 
•  Les zones structurelles de l’HTML 5 
h
•  Le positionnement dans le flux courant (flux normal)  
C
•  Les autres méthodes de positionnement 
•  La profondeur : Z-Index 
•  Flottement et passages à la ligne 
•  Exercice de synthèse 
 
  
Nathalie Vanassche 
 
 
 
 

COURS 06 - 07 : Techniques de mise en page 
58 
[Web, principes de base] BAC INFORMATIQUE 
 
Le placement des objets d’un document web est la base de toute mise en page. Afin de comprendre ces systèmes de 
placement, il est nécessaire de bien comprendre trois concepts CSS importants :  
  Le modèle de boîte 
  Le positionnement 
  Le flottement 
Ils déterminent la disposition des éléments de la page et sont la base des mises en page CSS.    
 
1. COMPRENDRE LE MODELE DE BO TE 
I
Les  sites  actuels  reposent  sur  une  architecture  de  boîtes,  de  types  blocs,  des  textes,  des  tableaux  ou  des 
éléments positionnés.  La spécification CSS2.1 définit quatre modèles de positionnement : 
•  Block layout utilisés pour les pages web classiques 
•  Inline layout utilisés pour le texte 
•  Table layout utilisés pour les données tabulaires 
•  Positioned layout utilisé pour le positionnement d’éléments autonomes dans la page 
1.1. Le modèle de boîte 
Chaque balise HTML suit un modèle de positionnement par défaut.  Chaque mode de positionnement induit 
des normes, c’est le modèle de boîte. 
A. Boîte de type bloc 
Les  éléments  de  type  bloc  se  succèdent  verticalement,  chaque  nouveau  bloc  se  plaçant  sous  le  bloc  frère  précédent.   
Les blocs occupent toute la largeur disponible dans leur conteneur.   
 
Prenons par exemple deux blocs différenciés par leur couleur, en HTML :  
<p class="jaune">Une boîte jaune</p> 
<p class="verte">Une boîte verte</p> 
En CSS : 
.jaune { 
background-color: #ffff00; 

.verte { 
background-color: #00ff00; 
}
 
Le résultat:  
 
 
 
Elles peuvent être dimensionnées (width et height) et sont pourvues de marges externes (margin) et internes (padding) 
qui nous permettent d’espacer les boîtes les unes des autres. 
Elles ne permettent pas l’alignement vertical du contenu au sein de la boîte et il n’y a pas de lien avec le contexte (les 
boîtes sont autonomes les unes des autres). 
 
Les  principaux  éléments  créant  des  boîtes  bloc  sont :  l'élément  div ;  Les  titres  h1,  h2,  h3,  h4,  h5,  h6 ;  Le 
paragraphe p ; Les listes et éléments de liste ul, ol, li, dl, dd ; Le bloc de citation blockquote
 ; … 
B. Boîte de type en-ligne 
Les éléments « en-ligne » ne définissant pas de boîte autonome se suivent sur la même ligne. Chaque nouvel élément se 
plaçant directement à la suite du précédent, ils s’affichent côte à côte avec retour à la ligne quand il n’y a plus de place 
dans le conteneur.  

COURS 06-07-08 : Techniques de mise en page 
59 
[Web, principes de base] BAC INFORMATIQUE 
 
Prenons par exemple deux portions de texte différenciées par leur couleur, en Html : 
<span class="jaune">Une boîte jaune</span> 
<span class="verte">Une boîte verte</span> 
En CSS : 
.jaune { 
  background-color: #ffff00; 

.verte { 
  background-color: #00ff00; 

Le résultat: 
 
Une boîte de type en ligne ne peut pas être dimensionnée.  Les marges internes ne fonctionnent que sur la droite et la 
gauche de l’élément et les marges externes ne décalent pas réellement les éléments environnants. 
Un alignement vertical des éléments inline contenus dans un élément de type block est possible grâce à la propriété 
vertical-align. 
 
Les principaux éléments créant des boîtes en ligne sont : L'élément span ; Le lien a ; L'image img ; Les emphases em et 
strong ; …
 
 
Exemple de boîte de type bloc et en-ligne : 
 
C. Boîte de type tabulaire 
Le  positionnement  de  ces  boîtes  dépend  du  contexte,  sans  création  de  boîte  autonome.    Ainsi,  deux  boîtes 
peuvent se positionner côte à côte, leur taille peut être modifiée et un alignement vertical est possible. 
Les largeur et hauteur sont fluides et s’adaptent aux boîtes environnantes, deux boîtes côtes à côtes dans un 
même conteneur auront donc une largeur identique. 
D. Eléments hors du flux 
Le  dernier  modèle  de  boîte  concerne  les  éléments  positionnés  hors  du  flux.    Les  éléments  HTML  basculent 
dans ce modèle lorsque les propriétés CSS position ou float sont utilisées.
 
1.2. Découpage d'une boîte 
Chaque  élément  que  vous  créez  dans  votre  marquage  produisant  une  zone  sur  votre  page  html  est  en  fait  un 
agencement de boîtes. 
Rappelons tout d'abord qu'une boîte CSS est constituée : 
•  d'un contenu : le texte d'un paragraphe par exemple  
•  d'un remplissage (padding) : l'espace entourant le paragraphe  
•  d'une bordure (border) : encadrement du paragraphe  
•  d'une marge (margin) : espace entourant le tout 
 
 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
60 
[Web, principes de base] BAC INFORMATIQUE 
 
Les propriétés CSS permettent de déterminer : 
•  les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d'avant-plan ;  
•  les dimensions, la couleur et le style des bordures ;  
•  les dimensions du remplissage ;  
•  les dimensions de la marge.  
 
 
 
 
 
Dans chaque cas, il est possible de spécifier des dimensions gauche, droite, haut et bas différentes les unes des autres. 
 
Notez ces raccourcis intéressant pour les 
marges, remplissages ou bordures … 
 
 
 
 
 
 
 
 
1.3. La taille d'une boîte 
Le calcul de la taille d’une boîte selon les spécifications CSS2 se fait en ajoutant les valeurs de largeur (width), de 
marges  internes  (padding)  et  des  bordures  (border).  
  Ainsi,  si  vous  souhaitez  une  boîte  avec  un  remplissage  de 
10 pixels et une bordure de 5 pixels de chaque côté mais de 100 pixels de large au total, vous devez fixer la largeur du 
contenu à 70 pixels. 
 
Voyons le modèle d'une boîte plus en détail : 
(Nous l'appliquerons ici à la largeur mais la logique est identique en ce qui concerne la hauteur) 
 
#bloc { 
 

background-color: Silver; 
width: 400px; 

 
padding: 0 20px; 
 
border: solid black; 
 
border-width: 0 6px 0 6px;  
margin: 0 30px; 


En remplissant de 40px une boîte large de 400px, le contenu n'est en rien resserré à 360px mais la boîte est agrandie à 
440px. La boîte s'agrandit encore de 12 pixels de par la valeur des 2 bordures gauche et droite. 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
61 
[Web, principes de base] BAC INFORMATIQUE 
 
L'ajout de marge de 30 pixels de chaque côté de la boîte augmente l'espace global occupé par l'élément sans modifier la 
taille de l'élément lui-même. 
Eviter le mode Quirks d’Internet Explorer en ajoutant les bons doctypes.  Dans le cas contraire, IExplorer calcule mal la 
taille des boîtes.  
1.4. Minima et Maxima 
Une bonne pratique de la conception web accessible à tous est de favoriser autant que possible la fluidité des éléments, 
or,  nous  ne  pouvons  pas  dompter  la  taille  des  textes  que  le  visiteur  va  définir selon  ses  besoins  et envies.  Évitez  par 
conséquent  de  fixer  une  hauteur
  à  vos  boîtes,  sauf  s’il  s’agit  d’un  élément  dont  vous  maîtrisez  parfaitement  les 
dimensions et le contenu (les images par exemples). 
 
Ces quelques propriétés CSS 2 sont intéressantes à utiliser : 
min-width : largeur ; /*(en pixels, pourcentage, em )*/ ; 
max-width : largeur maximale; 
min-height : hauteur minimale; 
max-height : hauteur maximale ; 
Reconnues depuis Internet Explorer 7, elles ne figent pas les dimensions de l’élément (comme height et width), mais 
définissent une valeur minimale ou maximale, quel que soit le contenu présent. 
 
Exemple : 
body { 
  width: 80%; 
  min-width: 800px; 
  max-width: 1200px; 

Sa  largeur  est  fluide  et  occupe  toujours  80 %  de  la  taille  de  l’écran,  tout  en  fixant  un  minimum  de  800 pixels  et  un 
maximum de 1 200 pixels. Ces jalons évitent que l’affichage soit dégradé sur les petits écrans ou que le contenu, trop 
large, soit pénible à lire sur les très grandes surfaces.
 
 
2. LES ZONES STRUCTURELLES HTML 5 
2.1. Les balises HTML5 principales 
HTML 5 introduit de nouvelles balises permettant de structurer la page en définissant les différentes sections qui la 
constitue de manière plus fine qu’en utilisant la balise <div>.  Le but est d’apporter de nouveaux éléments sémantiques 
dotés de sens1
 apportant une alternative aux blocs génériques <div> et <span> :  
<article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, 
<time>, <mark>, <figure>, et <figcaption>
 
<section>  Une  section  permet  un  regroupement  thématique  de  contenus,  généralement 
avec un titre.  Elles peuvent elles-mêmes contenir des sections. 
Elles rappellent l’utilisation d’un DIV utilisé auparavant pour englober du contenu 
sémantique (chapitres, en-têtes et pieds de page). 
Pour savoir comment utiliser cette balise, posez-vous la question « est-ce que les 
contenus sont apparentés ? » 

<header> 
Représente le bloc d’en-tête d’une section ou d’une page. 
Destiné à contenir des éléments d’introduction (les habituels en-têtes de page – 
logo, slogan, titre, navigation) ou l’entrée d’une section, d’un article ou une table 
des matières. 
                                                       
1 Les noms de ces balises résultent d’une étude Google de 2005 reprenant les noms les plus couramment utilisés pour définir les 
différentes sections des pages web. 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
62 
[Web, principes de base] BAC INFORMATIQUE 
 
<nav> 
Regroupe  les  liens  de  navigation  considérés  comme  majeurs  ou  jugés 
suffisamment pertinents (souvent la navigation principale).
 Dans la plupart des 
cas, elle se situera dans le <header>. 
Toutes  les  listes  de  liens  ne  doit  pas  être  contenues  dans  une  balise  <nav>, 
réservez-le à la navigation à l’intérieur du site.  
<article>  Désigne  une  portion  du  document  potentiellement  autonome  (pouvant  être 
traitée  indépendamment  du  site)  dans  le  sens  où  elle  pourrait  être  reprise  ou 
réutilisée – comprise hors contexte
 (comme un article de journal, de blog ou de 
forum)
Pour  savoir  comment  utiliser  cette  balise,  posez-vous  la  question  « ce  contenu 
pourrait-il être diffusé seul ou être syndiqué (flux rss) ? » 

<aside> 
Représente  une  portion  de  contenu  de  type  secondaire,  contextuelle, 
directement  ou  indirectement  liée  aux  éléments  qui  l’entourent
  (relatif  à  une 
section  du  document  ou  au  document  lui-même).    Exemples :  barre  latérale 
contenant des billets similaires, un nuage de tags, une citation en exergue … 
Pour  savoir  comment  utiliser  cette  balise,  posez-vous  la  question  « ce  contenu 
pourrait-il être soustrait sans affecter le sens du contenu auquel il se rapporte ? »
 
<footer> 
Regroupe les contenus du pied d’une section ou d’un document (pied de page) 
et  est  destiné  à  recueillir  les  informations  concernant  l’auteur,  les  mentions 
légales, les sources, etc. 
<figure> 
Représente  une  unité  de  contenu  autonome,  généralement  référencé  comme 
étant une unité indépendante du contenu du document. 
S’emploie combiné à <figcaption> pour structurer des illustrations, photos, vidéos, 
diagrammes et portions de codes. <figcaption> désignera la légende de la figure, 
elle est optionnelle. 

 
Exemple de structure 1 : 
 

 
                                                     
1 Source : CSS avancées, Vers HTML 5 et CSS 3 - Raphaël Goetter, Eyrolles 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
63 
[Web, principes de base] BAC INFORMATIQUE 
 
Exemple de structure1 : 
 
 
Ces  nouvelles  balises  HTML5  offrent  aux  navigateurs  web  une  toute  nouvelle  façon  d’appréhender  votre  contenu. 
Dans le futur, le rôle confié à ces éléments pourra donc s’avérer important.  
 
2.2. Compatibilité de l’HTML 5 
a)  Utiliser les nouveaux éléments structurels de l’HTML5 
Si vous souhaitez  utiliser les nouveaux éléments structurels de l’HTML5 dès aujourd’hui, rien ne vous en  empêche car 
même si la plupart des navigateurs ne supportent pas activement ces éléments, ils vous permettent de les utiliser et de 
les styler (ils les interprètent comme des éléments génériques tels <div> et <span>)
 
Appliquer des styles aux éléments structurels de l’HTML5 
Les navigateurs n’appliqueront pas de style par défaut aux nouveaux éléments structurels, il faudra donc, au minimum, 
déclarer que les nouveaux éléments structurels doivent imposer un saut de ligne : 
section, article, header, footer, nav, aside { 
display: block; 


Internet Explorer, jusqu’à la version 9, refuse catégoriquement de reconnaître les nouveaux éléments, à moins qu’un 
exemplaire de chaque élément n’ait été créé au préalable à l’aide de JavaScript, comme ceci : 
document.createElement('section'); 
Remy Sharp, programmeur JavaScript, a écrit un petit script très pratique qui génère tous les nouveaux éléments 
HTML5. 
                                                     
1 ;
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
64 
[Web, principes de base] BAC INFORMATIQUE 
 
Chargez ce script avec un commentaire conditionnel afin qu’il ne soit utilisé que par Internet Explorer : 
<!--[if lt IE 9]> 
<script src=""> 
</script> 
<![endif]--> 
Vous pouvez maintenant styler les nouveaux éléments à votre aise. 
 
Lecture Web :   
Tableau récapitulant la prise en charge des différentes propriétés CSS 3 et applications HTML 5 par les différents 
navigateurs actuels (ressource mise à disposition par Jim Morrison, de l’agence web Deep Blue Sky) : 

HTML 5 par l’exemple : un tableau comparatif et interactif sur la prise en charge de HTML 5 par les navigateurs : 
 
 
3. LE POSITIONNEMENT DANS LE FLUX COURANT (FLUX NORMAL)  
Par  défaut,  les  navigateurs  affichent  tous  les  éléments  d'une  page  (parents,  enfants  ou  frères)  dans  l'ordre  du  flux 
courant
, appelé également flux normal
Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de 
code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la 
lecture  d'un  texte,  il  procède  verticalement,  commençant  en  « haut »  de  l'écran  pour  aller  jusqu'en  « bas »,  et 
horizontalement de gauche à droite
sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur. 
3.1. Exemples de positionnement dans le flux normal 
Etape 01 
div { 
background: yellow; 

p { 
background: green; 

Le <div> conteneur jaune n’est pas visible ; seul le paragraphe vert apparaît. Il occupe toute la largeur disponible, c’est-à-
dire la largeur du document. En effet, l’élément bloc <div>, sans spécification de taille, occupe toute la largeur possible 
dans une hauteur par défaut nulle. L’élément bloc <p>, sans spécification de taille, occupe lui aussi toute la largeur de 
son conteneur, le bloc <div>.  
La hauteur de ce dernier est déterminée par celle de son contenu (le paragraphe) car l’élément <div> n’a pas de marges 
internes par défaut. 
 
 
Etape 02 
div { 
width: 300px; 
background: yellow; 

p { 
width: 100px; 
background: green; 

À présent pourvus de dimensions explicites, ces deux blocs se distinguent nettement. Il reste à placer le paragraphe dans 
son conteneur, ce qu’on peut réaliser en le laissant dans le flux mais en précisant des marges en haut et à gauche.   
 
Etape 03 
div { 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
65 
[Web, principes de base] BAC INFORMATIQUE 
 
width: 300px; 
padding-top: 2em; 
background: yellow; 

p { 
margin-left: 3em; 
width: 100px; 
background: green; 

Voilà qui suffit à positionner le bloc paragraphe dans son conteneur. Toute autre méthode de spécification de longueur 
que les unités em conviendrait parfaitement : pixel, pourcentage, etc.  
Etape 04 
<div> 
<p id='premier'>premier paragraphe de texte</p> 
<p id='second'>deuxième paragraphe de texte</p> 
</div> 
Ces deux frères prennent par défaut place l’un sous l’autre, en respectant tous deux les styles CSS associés au sélecteur 
de paragraphe (<p>) : chacun adopte une marge à gauche de trois caractères.  
 
3.2. Focus sur la propriété display 
La propriété CSS display définit le type de rendu de boîte à utiliser pour un élément donné.  Il existe plusieurs valeurs 
pour cette propriété, les éléments le plus souvent utilisés ont une valeur par défaut de block ou inline (la plupart des 
autres valeurs display font référence aux tableaux).  
La propriété Display admet 18 valeurs : inlineblocklist-item, run-in, compact, marker, table, inline-table, table-row-
group,  table-header-group,  table-footer-group,  table-row,  table-column-group,  table-column,  table-cell,  table-caption, 
none et inherit
.  La propriété inline-block, à l’état de draft en CSS2.1 est également à citer. 
 
Passer du block à inline et vice versa : 
Les  éléments  en  bloc  comme  les  paragraphes,  les  titres  et  les  listes  se  placent  l'un  au-dessus  de  l'autre  lorsqu'ils 
s'affichent dans navigateur. 
Les éléments incorporés (in-line) comme a, span et img se placent côte à côte lorsqu'ils s'affichent dans le navigateur et 
n'apparaissent sur une nouvelle ligne que s'il n'y a pas assez d'espace sur la précédente. 
 
La  possibilité  de  transformer  les  éléments  block  en  éléments  inline  Ex:  display:inline;  et  vice  versa  Ex: 
display:block;  est  une  fonction  performante  qui  vous  permet,  par  exemple,  de  changer  une  ligne  de  liens  se 
plaçant horizontalement en une navigation latérale (sans br). 
 
display:inline-block;1  (CSS2.1) intègre l’élément dans la ligne comme un élément incorporé, mais le contenu 
de  la  boîte  se  comporte  comme  un  élément  bloc,  ce  qui  permet  de  définir  les  largeurs,  les  hauteurs,  les  marges 
verticales et le remplissage.  
 
 
Pour résumer le positionnement dans le flux :  
C'est un traitement linéaire du contenu de la page.  
L'alignement des boîtes bloc est vertical ; l'alignement des éléments en ligne dans les boîtes bloc est horizontal. 
Par défaut, chaque élément est donc dépendant de ses frères immédiats et deux <p> successifs apparaissent l'un sous 
l'autre. 
Cette méthode convient à la majorité des cas, il suffit de définir les marges de chaque élément pour le placer dans son 
conteneur. 
 
 
                                                       
1 Prise en charge  par Firefox 3.0 et ses versions ultérieures,  Internet Explorer 8 et les dernières versions de Safari et Opera. 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
66 
[Web, principes de base] BAC INFORMATIQUE 
 
4. LES AUTRES METHODES DE POSITIONNEMENT 
La propriété position se trouve au cœur des mises en page fondé sur les CSS. Elle détermine le point de référence pour 
le positionnement de chaque boîte d'élément. 
La  propriété  position  prend  quatre  valeurs  :  static,  relative,  absolute  et  fixed  -  static  étant  la  valeur  par  défaut. 
Toutes ces techniques de mise en page CSS s’appuient sur trois concepts élémentaires : le positionnement, le flottement 
et la manipulation des marges. 
4.1. Le positionnement relatif 
Le  positionnement  relatif  est  une  variante  du  positionnement  en  flux  normal  (on  l'active  par  la  déclaration 
position:relative;), il reste positionné par défaut dans le flux normal, mais il est alors décalé horizontalement 
et/ou verticalement par rapport à son point d’origine à l’aide des propriétés top, right, bottom ou left.  
Le contenu suivant n'est pas affecté par ce déplacement, ce qui peut donc entraîner des chevauchements
 
Exemple: 
<p> 
Lorem 
<span class="jaune"> 
boîte en position relative 
</span> 
ipsum dolor. 
</p> 
En CSS : 
jaune { 
position: relative; 
bottom: 5px; 
background-color: #ffff00; 

     
Le résultat : 
 
 
Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite : 
jaune { 
position: relative; 
bottom: 5px; 
left: 3em; 
background-color: #ffff00; 

     
Le résultat : 
 
 
 
Pour résumer le positionnement relatif :  
L'espace occupé par l'élément statique initial est conservé – tout comme le positionnement des autres éléments.  Cette 
technique est à manier avec précaution car on n’y manipule que des décalages, chaque élément restant dépendant de 
ses frères. 
 
 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
67 
[Web, principes de base] BAC INFORMATIQUE 
 
4.2. La position absolue 
S'applique à tout élément doté de la déclaration position:absolute ou position:fixed. Le positionnement 
absolu extrait totalement un élément du flux normal du document pour le positionner
Les  boîtes  ainsi  retirées  du  flux  normal  n’ont  plus  aucun  effet  sur  le calcul  des  placements  des  autres éléments  de  la 
même fratrie et on détermine leur position par les propriétés top, right, bottom et left. 
 
Un élément positionné de manière absolue est positionné par rapport l’emplacement de son ancêtre le plus proche  S’il 
n’en  possède  pas,  il  est  positionné  par  rapport  au  bloc  conteneur  initial.    Selon  l’agent  utilisateur,  il  peut  s’agit  du 
support du document ou de l’élément HTML.  La boîte conteneur de référence est celle du premier élément ancêtre 
positionné
 (en relatif, fixe ou absolu).  
Notez  également  que  tout  élément  positionné  en  absolu  est  considéré  de  type  bloc.  Les  éléments  en  ligne  peuvent 
ainsi recevoir des dimensions et des bordures. 
 
Exemple : 
p { 
margin:0; 

div { 
width:300px; 
height:200px; 
background:yellow; 

p#premier { 
width:100px; 
background:orange; 

p#second { 
position:absolute; 
top:0; 
left:0; 
width:150px; 
background:green; 

 

Le  second  paragraphe  prend  place  en  haut,  à  gauche  du  document,  sortant  même  de  la  boîte  de  son  parent,  le  bloc 
<div>. 
En remplaçant la règle left:0 par right:0, le paragraphe se place à droite de l'écran. 
 
Pour  placer  le  second  paragraphe  par  rapport  au  bloc  <div>,  il  suffit  de  positionner  ce  dernier  avec  une  propriété  de 
position (absolu, relatif ou fixe). 
 
Exemple 
div { 
position:relative; 
width:300px; 
height:200px; 
background:yellow; 

 
Pour résumer le positionnement absolu :  
Le  positionnement  relatif  est  "relatif"  à  la  position  initiale  de  l’élément  dans  le  flot  du  document,  alors  que  le 
positionnement  absolu  est  "relatif"  au  plus  proche  ancêtre  positionné  (bloc  conteneur  ou  premier  élément  ancêtre 
positionné) ou, s’il n’existe pas, au bloc conteneur initial (le body, toujours considéré comme positionné).  
L'élément se déplace donc lorsque l'utilisateur fait défiler la page pour conserver sa position par rapport à lui, il sort du 
flux continu du navigateur. 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
68 
[Web, principes de base] BAC INFORMATIQUE 
 
4.3. Le positionnement fixe 
Le positionnement fixe est semblable au positionnement absolu mais le contexte de positionnement de l'élément est 
l'outil  d'affichage  (la  fenêtre  du  navigateur  par  exemple)  de  sorte  que  l'élément  reste  fixé  à  l'écran  lorsque  la  page 
défile. 
 
Exemple 
vert { 
position: fixed; 
top: 230px; 
left: 20px; 
background-color: green; 
Cet  effet  "collé"  permet  de  simuler  les  effets  de  cadres  (frames),  et  créer,  par  exemple,  un  élément  de  navigation  qui 
restera en place lorsque la page défile. 
 
Toutefois, cette propriété ne fonctionne pas en IE 6.0 (la version 7 la reconnaît partiellement). 
 
Lecture Web :   
Les liens suivants proposent des solutions de remplacement émulant cette fonctionnalité sur Internet Explorer 6 : 
 
 
;
;
 
5. LA PROFONDEUR : Z-INDEX 
Par défaut, le dernier élément positionné déclaré dans le code HTML s'affichera par-dessus tous les autres éléments 
du  même  conteneur.    
La propriété  Z-index  permet de  modifier ce comportement,  elle  précise  le  chevauchement  des 
éléments les uns par rapport aux autres. 
Un élément sera affiché au-dessus d'un autre s'il possède un ordre d'affichage supérieur, par exemple un élément ayant 
la valeur {z-index:2} va recouvrir l'élément ayant comme valeur {z-index:1}. 
 
Exemple 
div { 
position: relative; 
width: 300px; 
height: 200px; 
background: yellow; 

p#premier { 
position: absolute; 
top: 0; 
left: 0; 
width: 100px; 
background: #ccc; 

p#second { 
position: absolute; 
top: 40px; 
left: 50px; 
width: 150px; 
background: green; 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
69 
[Web, principes de base] BAC INFORMATIQUE 
 
Le second paragraphe surplombe en partie le premier (ceci indépendamment de l’ordre de leur déclaration dans le code 
HTML). Pour le faire passer dessous, il suffit de définir pour chaque boîte un niveau de z-index différent, en attribuant au 
premier paragraphe une valeur plus élevée :  
p#premier { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 10; 
width: 100px; 
background: #ccc; 

p#second { 
position: absolute; 
top: 40px; 
left: 50px; 
z-index: 0; 
width: 150px; 
background: green; 

Notez que seuls les éléments « positionnés » peuvent être affectés par cette propriété d’empilement z-index. 
N’abusez pas de ces changements de profondeur : elles sont rarement nécessaires dans un document bien construit et 
doté d’une structure HTML cohérente.  
 
6. FLOTTEMENT ET PASSAGES A LA LIGNE 
Une  autre  technique  performante  qui  permet  d'organiser  les  mises  en  page  consiste  à  associer  le  flottement  et  le 
passage à la ligne à l'aide des propriétés float et clear
6.1. Le positionnement des flottants 
Une  boîte  flottante  est  retirée  du  flux  normal,  et  placée  le  plus  à  droite  (float:  right)  ou  le  plus  à  gauche 
(float:left) possible dans son conteneur, il devient un « flottant »
Le  contenu  qui  suit  cette  boîte  flottante  dans  le  code  html  s'écoule  le  long  de  celle-ci,  dans  l'espace  laissé  libre,  en 
épousant  sa  forme,  car  les  boîtes  flottante  ne  s’insérant  pas  dans  le  flux  continu,  elles  les  considèrent  comme 
inexistantes.    Notons  toutefois  que  le  contenu  textuel  de  la  boîte  conserve  néanmoins  en  mémoire  la  présence  de 
l’élément flottant et se décale afin de lui laisser de la place. 
La propriété float est principalement utilisée pour répartir du texte autour des images, et c'est aussi une méthode pour 
créer des mises en page sur plusieurs colonnes. 
 
Le fonctionnement des flottants 
Ajoutons  aux  styles  précédents  une  règle  de  positionnement  flottant  à  droite  et  une  mesure  de  largeur  (facultative, 
mais utile pour certains navigateurs) : 
En HTML: 
<p class="jaune">Une boîte jaune flottant</p> 
<p class="verte">Une boîte verte doté d'un contenu plus long…</p> 
 
En CSS: 
jaune { 
background-color: #ffff00; 
float: right; 
width: 100px; 
margin: 0; 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
70 
[Web, principes de base] BAC INFORMATIQUE 
 
verte { 
background-color: #00ff00; 

 
Le résultat : 
 
Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le 
cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte.  
Le  flux  occupe  tout  l'espace  disponible:  la  boîte  verte  reprend  donc  toute  la  largeur  de  la  page  sitôt  passée  la  limite 
inférieure de la boîte flottante jaune. 
Dans les navigateurs n'appliquant pas la feuille de style (navigateurs texte ou non conformes aux standards…), la boîte 
flottante sera simplement inscrite en flux normal avant la boîte qui la suit. 

Placer des boîtes côte à côte 
Un des nombreux avantages du positionnement flottant est la possibilité de placer des blocs côte à côte.   
 
Exemple 
p#premier { 
float: left; 
width: 100px; 
background: #ccc; 

p#second { 
float: left; 
width: 150px; 
background: green; 

La propriété float pour que le texte enroule une image 
Exemple: 
img { 
float: left; 
margin: 0 10px 0 10px; 

 
En HTML, le marquage doit contenir l'image en 1er : 
<img src=""> 
<p> Lorem … </p> 
 
La propriété float pour disposer du texte à côté d’une image 
Exemple: 
p {float:left; width:200px; margin:0;} 
img {float:left; margin:0 4px 0 4px;} 
Lorsque les 2 éléments sont flottants, le texte se transforme en colonne au lieu de s'enrouler autour de l'image.  C'est le 
principe de mise en page en multi-colonnes à l'aide de float. 

  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
71 
[Web, principes de base] BAC INFORMATIQUE 
 
6.2. La propriété clear 
Cette propriété souvent utilisée avec float, fonctionne comme la balise <br clear /> en HTML. La propriété clear 
interdit le voisinage d’un flottant, il s'agit de forcer le passage à la ligne et la reprise d'un positionnement normal alors 
qu'il ne le ferait pas normalement. 
Ses trois valeurs possibles (left, right et both) portent respectivement sur les côtés gauche, droit, gauche et droit.  
L'instruction clear:left interdit tout flottement à gauche; clear:both interdit tout flottement au même niveau. 
Lorsque vous dégagez un élément avec la propriété clear, le navigateur ajoute suffisamment de marge au-dessus pour 
décaler sa bordure supérieure vers le bas, au-delà de l’élément flottant.  
 
En CSS : 
p { … } 
img { float:left } 
.clear {clear:both;} 
En HTML : 
<img src="…"> 
<p> 
Lorem ipsum … 
</p> 
 
<div class="clear"> &nbsp; </div> 
 
<img src="…"> 
<p> 
Lorem ipsum … 
</p> 
A l'aide de la propriété « clear », l'élément est obligé de se placer sous l'élément flottant. 
 
La valeur de both sur la propriété clear implique que le div passe à la ligne, et passe donc sous les éléments flottant 
à gauche et à droite … la valeur left aurait pu être utilisée ici mais si on bascule l'élément flottant sur right, cela ne 
fonctionne plus. 
6.3. Englober un flottant 
Comme les éléments flottants sont sortis du flot du document, ils ne prennent pas d’espace
 et ne sont donc pas englobés 
par  la  div  qui  les  enveloppe  (un  parent  ne  contenant  que  des  flottants  n’occupera  physiquement  aucune  surface  à 
l’écran
). La solution est d’ajouter un élément vide sous le dernier paragraphe et le dégager. L’ajout d’un élément vide 
permet d’appliquer le dégagement et force l’élément conteneur à englober les éléments flottants. 
 
 
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
72 
[Web, principes de base] BAC INFORMATIQUE 
 
6.4. La propriété overflow 
La  propriété  overflow  définit  la  manière  dont  un  élément  est  censé  se  comporter  si  le  contenu  englobé  est  trop 
grand pour les dimensions spécifiées.  Elle permet, comme son nom l’indique, de définir la méthode de dépassement 
des textes de leur conteneur. 
a)  visible  :  réglage  par  défaut,  le  contenu  qui  sort  de  son  conteneur  est  visible  (et  donc  susceptible  de  porter 
atteinte à votre design, surtout si le bloc contient des bordures et/ou une couleur de fond). 
b)  hidden  (caché)  :  la  partie  qui  dépasse  la  zone  permise  sera  camouflée,  aucune  barre  de  défilement  ne  sera 
ajoutée. 
c)  scroll  (défilement)  :  L'élément  sera  coupé  s'il  dépasse  les  limites,  mais  le  navigateur  va  activer  les  barres  de 
défilement. Si le contenu dépasse les deux limites, les deux barres de défilement seront activées et s'il n'y a pas de 
dépassement, les deux barres seront quand même affichées mais en grisé. 
d)  auto  :  dans  ce  mode,  le  navigateur  décide  l'ajout  ou  non  des  barres  de  défilement,  autrement  dit  le  navigateur 
n'activera les barres de défilement qu'à la rigueur. Contrairement au mode "scroll", il affiche seulement les barres 
opérationnelles, pas de barres en affichées en grisé. 
Les propriétés overflow:auto, overflow:hidden et overflow:scroll permettent également d'étendre le 
calcul  de  hauteur  du  conteneur  à  ses  enfants  flottants  
(qui,  de  par  leur  statut  de  flottants,  sortaient  du  flux  et  ne 
possédaient plus de dimensions reconnues par le navigateur) et donc de faciliter les mises en page complexes1. 
 
 
6.5. Mettre en place une mise en page « flottante » 
 
Etape01 : fixez la largeur désirée et faire flotter chaque colonne 
Etape02 : Ajoutez un léger remplissage au contenu principal 
Etape03 :  Ajoutez  
display :inline ;  à  tous  les  éléments 
flottants  pour  lutter  contre  la  double  marge  des  éléments  flottants 
d’Internet Explorer 
Etape04 : les éléments flottants ne prenant plus d’espace dans le flot 
du document, le pied de page remonte tout en haut.  Dégagez donc 
les  éléments  flottants  en  appliquant  la  méthode  overflow  à  leur 
élément parent (ex : la div content) :  
 
 
 
#wrapper { 
  overflow: hidden; 

Si nous donnons à notre bloc parent la propriété overflow: auto ou overflow: hidden, il ne pourra plus se 
«glisser» sous les colonnes flottantes. 
 
Pour résumer le positionnement flottant  
L'élément doté de la propriété  float est « poussé » à gauche ou à droite de son conteneur et sort du flot du document. 
Dans ce cas, les éléments qui le suivent, dans son conteneur, prennent place autour de lui.  
Les éléments flottants ne prennent pas d’espace, le parent est donc sans hauteur si tous ses fils sont flottants.  De plus, 
certains décalages non souhaités peuvent survenir sur certains navigateurs. 
 
 
                                                       
1 Pour plus d’information : ,_clear_et_contextes_de_formatage  
  
Nathalie Vanassche 
 
 
 
 

COURS 06-07-08 : Techniques de mise en page 
73 
[Web, principes de base] BAC INFORMATIQUE 
 
EXERCICE DE REVISION : 
 
Réalisez  le  TP  disponible  ici :  
web-avec-html5-et-css3/tp-creation-d-un-site-pas-a-pas, ignorez l’étape « Assurer la compatibilité avec IE » 
 
Quelle technique de mise en page est utilisée ici ? 
 
Quelles  sont  les  autres techniques  de  mise  en  page  qui  auraient  pu  être  employées  afin  d’obtenir  le  même 
rendu visuel ?  Tentez de les mettre en œuvre en créant les variantes de solutions de mise en page. 
 
 
 
 
 
  
Nathalie Vanassche 
 
 
 
 




280