Présentation Vos serviteurs.... Le Flux Le positionnement absolu Le positionnement fixé Le positionnement relatif Le positionnement flottant Ressources Raphaël Goetter AlsacréationS OpenWeb Pascale Lambert-Charreteur CSS Débutant OpenWeb

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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 F lux 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

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 F lux Courant

Rendu

en bloc (<p></p> ; <li></li> ; ...)

« en-ligne » inline (<strong></strong> ; <em></em> ; ...)

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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.

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

Quelques ressources utiles Quelques ressources utiles... Le Flux Le positionnement absolu Le positionnement fixé Le positionnement relatif Le positionnement flottant Ressources

Quelques ressources utiles...

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources

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

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

Le Flux

Le positionnement absolu

Le positionnement fixé

Le positionnement relatif

Le positionnement flottant

Ressources