0
Atelier CSS                                                                                                    Présentatio...
Atelier CSS                                                                                         Positionnements CSS   ...
Atelier CSS                                                                                         Positionnements CSS   ...
Atelier CSS                                                                                                      Positionn...
Atelier CSS                                                                                         Positionnements CSS   ...
Atelier CSS                                                                                                      Positionn...
Atelier CSS                                                                                                      Positionn...
Atelier CSS                                                                                         Quelques ressources ut...
Atelier CSS                                                                                                    Quelques re...
Upcoming SlideShare
Loading in...5
×

Atelier CSS positionnement (Paris web 2007)

1,387

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,387
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Atelier CSS positionnement (Paris web 2007)"

  1. 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. 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  Lordre : celui du code html, cest 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. 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. 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. 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 : nest 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. 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 dautres é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. 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 dun 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×