Atelier décrivant le positionnement CSS, présenté par Pascale Lambert-Charreteur et Raphaël Goetter lors de Paris Web 2007

1. Atelier CSS Présentation
Vos serviteurs....
Raphaël Goetter Sommaire
AlsacréationS
OpenWeb Le Flux
Le positionnement
absolu
Le positionnement
fixé
Pascale Lambert- Le positionnement
Charreteur relatif
Le positionnement
flottant
CSS Débutant
OpenWeb Ressources
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 1

2. Atelier CSS Positionnements CSS
Le Flux
Le Flux est le positionnement par défaut des éléments HTML.
Sommaire
 Règle CSS : aucune
Le Flux
 L'ordre : celui du code html, c'est le Flux Courant Le positionnement
absolu
 Rendu Le positionnement
fixé
➔ en bloc (<p></p> ; <li></li> ; ...)
Le positionnement
➔ « en-ligne » inline (<strong></strong> ; <em></em> ; ...)
relatif
Le positionnement
flottant
Ressources
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 2

3. Atelier CSS Positionnements CSS
Positionner dans le Flux
Gérer le positionnement dans le flux.
 Notions de « Ancêtre », « Parent », « Enfant », « Frère » Sommaire
 Tout élément recevant la propriété « position: » est dit « positionné »
 propriétés margin ; padding
Le Flux
Élément parent
Le positionnement
Élément enfant absolu
padding Le positionnement
Lorem ipsum dolor sit
amet, consectetuer fixé
adipiscing elit, sed diam
nonummy nibh euismod
tincidunt ut laoreet dolore Le positionnement
magna aliquam erat
volutpat. Ut wisi enim ad
relatif
minim veniam, quis
nostrud exerci tation Le positionnement
ullamcorper suscipit
lobortis nisl ut aliquip ex flottant
ea commodo consequat.
margin
Ressources
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 3

4. Atelier CSS Positionnements CSS
Le positionnement absolu
Le positionnement absolu est une forme de positionnement
hors du Flux.
Sommaire
 Règle CSS : position : absolute;
 Position dans le flux : sort du flux, mais positionné par rapport au
dernier « ancêtre » non positionné. Le Flux
 propriétés top, right, bottom et left.
Le positionnement
 Superposition possible absolu
Le positionnement
fixé
Le positionnement
relatif
Le positionnement
flottant
Ressources
Crédit images : OpenWeb Group
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 4

5. Atelier CSS Positionnements CSS
Le positionnement fixé
Le positionnement fixé est une forme de positionnement hors
du Flux.
Sommaire
 Règle CSS : position : fixed; Le Flux
Le positionnement
 Position dans le flux : sort du flux absolu
Le positionnement
fixé
 Spécificité : reste fixe à l'écran, sans scroll possible
Le positionnement
relatif
 Implémentation MSIE : n'est implémenté qu'à partir que MSIE7
Le positionnement
flottant
Ressources
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 5

6. Atelier CSS Positionnements CSS
Le positionnement relatif
Le positionnement relatif est une forme de positionnement
dans le Flux.
Sommaire
 Règle CSS : position : relative;
 Position dans le flux : reste dans le flux, mais peut être décalé. Le Flux
Le positionnement
absolu
 Propriétés top, right, bottom et left.
Le positionnement
fixé
 Interaction avec d'autres éléments
Le positionnement
relatif
Le positionnement
flottant
Ressources
Crédit images : OpenWeb Group
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 6

7. Atelier CSS Positionnements CSS
Positionnement flottant
Le positionnement flottant est une forme de positionnement
hybride.
Sommaire
 Règle CSS : float : left; ou float : right; (pas de float: center !)
 Position dans le flux :
➔ Position par rapport à l'élément « parent » Le Flux
➔ « dépassement » du flux Le positionnement
absolu
 Spécificités : hérite d'un rendu type « bloc », peut donc bénéficier de
marges. Le positionnement
fixé
Le positionnement
relatif
Le positionnement
flottant
Ressources
Crédit images : OpenWeb Group
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 7

8. Atelier CSS Quelques ressources utiles
Sommaire
Quelques
ressources Le Flux
Le positionnement
utiles...
absolu
Le positionnement
fixé
Le positionnement
relatif
Le positionnement
flottant
Ressources
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 8

9. Atelier CSS Quelques ressources utiles
Quelques ressources utiles
➢ Rubrique CSS officielle (W3C) :
http://www.w3.org/Style/CSS/ Sommaire
➢ Traductions française des documents CSS du W3C :
http://www.yoyodesign.org/doc/w3c/css2/cover.html
Le Flux
➢ Initiation au positionnement CSS : 1.flux et position
Le positionnement
relative : absolu
http://openweb.eu.org/articles/initiation_flux/
Le positionnement
➢ Initiation au positionnement CSS : 2.position float : fixé
http://openweb.eu.org/articles/initiation_float/ Le positionnement
relatif
➢ Initiation au positionnement CSS : 3. position absolue et
fixe : Le positionnement
flottant
http://openweb.eu.org/articles/initiation_absolue/
Ressources
➢ Comment positionner les éléments en CSS ?
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)
contenu sous licence Creative Commons BY 9