Atelier CSS positionnement (Paris web 2007)
-
Upload
raphael-goetter -
Category
Technology
-
view
1.335 -
download
3
description
Transcript of Atelier CSS positionnement (Paris web 2007)
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 1
Sommaire
Présentation
Vos serviteurs....
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Raphaël Goetter
AlsacréationSOpenWeb
Pascale Lambert-Charreteur
CSS DébutantOpenWeb
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 2
Sommaire
Le Flux est le positionnement par défaut des éléments HTML.
Règle CSS : aucune
L'ordre : celui du code html, c'est le Flux Courant
Rendu➔ en bloc (<p></p> ; <li></li> ; ...)➔ « en-ligne » inline (<strong></strong> ; <em></em> ; ...)
Positionnements CSS
Le Flux
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 3
Sommaire
Positionner dans le Flux
Gérer le positionnement dans le flux.
Notions de « Ancêtre », « Parent », « Enfant », « Frère »
Tout élément recevant la propriété « position: » est dit « positionné »
propriétés margin ; padding
Positionnements CSS
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Élément parentÉlément enfant
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
padding
margin
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 4
Sommaire
Le positionnement absolu
Le positionnement absolu est une forme de positionnement hors du Flux.
Règle CSS : position : absolute;
Position dans le flux : sort du flux, mais positionné par rapport au dernier « ancêtre » non positionné.
propriétés top, right, bottom et left.
Superposition possible
Positionnements CSS
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Crédit images : OpenWeb Group
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 5
Sommaire
Le positionnement fixé
Le positionnement fixé est une forme de positionnement hors du Flux.
Règle CSS : position : fixed;
Position dans le flux : sort du flux
Spécificité : reste fixe à l'écran, sans scroll possible
Implémentation MSIE : n'est implémenté qu'à partir que MSIE7
Positionnements CSS
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 6
Sommaire
Le positionnement relatif
Le positionnement relatif est une forme de positionnement dans le Flux.
Règle CSS : position : relative;
Position dans le flux : reste dans le flux, mais peut être décalé.
Propriétés top, right, bottom et left.
Interaction avec d'autres éléments
Positionnements CSS
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Crédit images : OpenWeb Group
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 7
Sommaire
Positionnement flottant
Le positionnement flottant est une forme de positionnement hybride.
Règle CSS : float : left; ou float : right; (pas de float: center !)
Position dans le flux :➔ Position par rapport à l'élément « parent »➔ « dépassement » du flux
Spécificités : hérite d'un rendu type « bloc », peut donc bénéficier de marges.
Positionnements CSS
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Crédit images : OpenWeb Group
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 8
Sommaire
Quelques ressources utiles
Quelques ressources
utiles...Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources
Atelier CSS
Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com)contenu sous licence Creative Commons BY 9
Sommaire➢ Rubrique CSS officielle (W3C) :
http://www.w3.org/Style/CSS/ ➢ Traductions française des documents CSS du W3C :
http://www.yoyodesign.org/doc/w3c/css2/cover.html ➢ Initiation au positionnement CSS : 1.flux et position
relative : http://openweb.eu.org/articles/initiation_flux/
➢ Initiation au positionnement CSS : 2.position float : http://openweb.eu.org/articles/initiation_float/
➢ Initiation au positionnement CSS : 3. position absolue et fixe : http://openweb.eu.org/articles/initiation_absolue/
➢ Comment positionner les éléments en CSS ? http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Quelques ressources utiles
Quelques ressources utiles
Le Flux
Le positionnement absolu
Le positionnement fixé
Le positionnement relatif
Le positionnement flottant
Ressources