Atelier CSS ParisWeb 2007

Slide 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 relatif Charreteur Le positionnement flottant CSS Débutant Ressources OpenWeb Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 1 contenu sous licence Creative Commons BY

Slide 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> ; ...) ➔ « en-ligne » inline (<strong></strong> ; <em></em> ; ...) Le positionnement ➔ relatif Le positionnement flottant Ressources Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 2 contenu sous licence Creative Commons BY

Slide 3: Atelier CSS Positionnements CSS Positionner dans le Flux Gérer le positionnement dans le flux. Sommaire 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 Élément parent Le positionnement Élément enfant absolu Le positionnement padding Lorem ipsum dolor sit fixé amet, consectetuer adipiscing elit, sed diam Le positionnement nonummy nibh euismod tincidunt ut laoreet dolore relatif magna aliquam erat volutpat. Ut wisi enim ad Le positionnement minim veniam, quis nostrud exerci tation flottant ullamcorper suscipit lobortis nisl ut aliquip ex Ressources ea commodo consequat. margin Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 3 contenu sous licence Creative Commons BY

Slide 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) 4 contenu sous licence Creative Commons BY

Slide 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) 5 contenu sous licence Creative Commons BY

Slide 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) 6 contenu sous licence Creative Commons BY

Slide 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 Spécificités : hérite d'un rendu type « bloc », peut donc bénéficier de absolu  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) 7 contenu sous licence Creative Commons BY

Slide 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) 8 contenu sous licence Creative Commons BY

Slide 9: Atelier CSS Quelques ressources utiles Quelques ressources utiles Rubrique CSS officielle (W3C) : ➢ Sommaire http://www.w3.org/Style/CSS/ 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 ➢ relative : Le positionnement 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 Initiation au positionnement CSS : 3. position absolue et relatif ➢ fixe : Le positionnement http://openweb.eu.org/articles/initiation_absolue/ flottant Comment positionner les éléments en CSS ? Ressources ➢ http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS Pascale Lambert-Charreteur (Mammouthland.net) - Raphaël Goetter (AlsacreationS.com) 9 contenu sous licence Creative Commons BY