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


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 ( ; <li></li> ; ...)➔ « en-ligne » inline ( ; ; ...)

Positionnements CSS

Le Flux

Le Flux





Ressources

Atelier CSS


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





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


Sommaire


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





Ressources

Crédit images : OpenWeb Group

Atelier CSS


Sommaire


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





Ressources

Atelier CSS


Sommaire


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





Ressources


Atelier CSS


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





Ressources


Atelier CSS


Sommaire

Quelques ressources utiles

Quelques ressources

utiles...Le Flux





Ressources

Atelier CSS


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



Le Flux





Ressources

http://www.w3.org/Style/CSS/

http://www.yoyodesign.org/doc/w3c/css2/cover.html

http://openweb.eu.org/articles/initiation_flux/

http://openweb.eu.org/articles/initiation_float/

http://openweb.eu.org/articles/initiation_absolue/

http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

Technology

Atelier CSS positionnement (Paris web 2007)