Atelier CSS ParisWeb 2007

2 544 vues

Publié le

P.Lambert-Charreteur et R.Goetter se sont réunis pour proposer un atelier pratique sur un projet concret de conception de page en CSS. À partir d’une maquette au format image, l’objectif était d’obtenir une page web à mise en page sans tableau et de réaliser des menus graphiques à base de CSS.
Le diaporama rappelle les notions essentielles de positionnement.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 544
Sur SlideShare
0
Issues des intégrations
0
Intégrations
24
Actions
Partages
0
Téléchargements
47
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier CSS ParisWeb 2007

  1. 1. Présentation Vos serviteurs.... <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>Raphaël Goetter AlsacréationS OpenWeb Pascale Lambert-Charreteur CSS Débutant OpenWeb
  2. 2. <ul><li>Le Flux est le positionnement par défaut des éléments HTML. </li></ul><ul><li>Règle CSS : aucune </li></ul><ul><li>L'ordre : celui du code html, c'est le F lux Courant </li></ul><ul><li>Rendu </li></ul><ul><ul><li>en bloc (<p></p> ; <li></li> ; ...) </li></ul></ul><ul><ul><li>« en-ligne » inline (<strong></strong> ; <em></em> ; ...) </li></ul></ul>Positionnements CSS Le Flux <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>
  3. 3. Positionner dans le Flux <ul><li>Gérer le positionnement dans le flux. </li></ul><ul><li>Notions de «  Ancêtre  », «  Parent  », «  Enfant  », «  Frère  » </li></ul><ul><li>Tout élément recevant la propriété «  position:  » est dit « positionné » </li></ul><ul><li>propriétés margin ; padding </li></ul>Positionnements CSS <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>É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
  4. 4. Le positionnement absolu <ul><li>Le positionnement absolu est une forme de positionnement hors du Flux. </li></ul><ul><li>Règle CSS : position : absolute; </li></ul><ul><li>Position dans le flux : sort du flux, mais positionné par rapport au  dernier « ancêtre » non positionné. </li></ul><ul><li>propriétés top , right , bottom et left . </li></ul><ul><li>Superposition possible </li></ul>Positionnements CSS <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>Crédit images : OpenWeb Group
  5. 5. Le positionnement fixé <ul><li>Le positionnement fixé est une forme de positionnement hors du Flux. </li></ul><ul><li>Règle CSS : position : fixed; </li></ul><ul><li>Position dans le flux : sort du flux </li></ul><ul><li>Spécificité : reste fixe à l'écran, sans scroll possible </li></ul><ul><li>Implémentation MSIE : n'est implémenté qu'à partir que MSIE7 </li></ul>Positionnements CSS <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>
  6. 6. Le positionnement relatif <ul><li>Le positionnement relatif est une forme de positionnement dans le Flux. </li></ul><ul><li>Règle CSS : position : relative; </li></ul><ul><li>Position dans le flux : reste dans le flux, mais peut être décalé. </li></ul><ul><li>Propriétés top , right , bottom et left . </li></ul><ul><li>Interaction avec d'autres éléments </li></ul>Positionnements CSS <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>Crédit images : OpenWeb Group
  7. 7. Positionnement flottant <ul><li>Le positionnement flottant est une forme de positionnement hybride. </li></ul><ul><li>Règle CSS : float : left; ou float : right; (pas de float: center !) </li></ul><ul><li>Position dans le flux : </li></ul><ul><ul><li>Position par rapport à l'élément « parent » </li></ul></ul><ul><ul><li>« dépassement » du flux  </li></ul></ul><ul><li>Spécificités : hérite d'un rendu type « bloc », peut donc bénéficier de marges. </li></ul>Positionnements CSS <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>Crédit images : OpenWeb Group
  8. 8. Quelques ressources utiles <ul><li>Quelques ressources utiles... </li></ul><ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>
  9. 9. <ul><li>Rubrique CSS officielle (W3C) : http://www.w3.org/Style/CSS/ </li></ul><ul><li>Traductions française des documents CSS du W3C : http://www.yoyodesign.org/doc/w3c/css2/cover.html </li></ul><ul><li>Initiation au positionnement CSS : 1.flux et position relative : http://openweb.eu.org/articles/initiation_flux/ </li></ul><ul><li>Initiation au positionnement CSS : 2.position float : http://openweb.eu.org/articles/initiation_float/ </li></ul><ul><li>Initiation au positionnement CSS : 3. position absolue et fixe : http://openweb.eu.org/articles/initiation_absolue/ </li></ul><ul><li>Comment positionner les éléments en CSS ? http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS </li></ul>Quelques ressources utiles Quelques ressources utiles <ul><li>Le Flux </li></ul><ul><li>Le positionnement absolu </li></ul><ul><li>Le positionnement fixé </li></ul><ul><li>Le positionnement relatif </li></ul><ul><li>Le positionnement flottant </li></ul><ul><li>Ressources </li></ul>

×