SlideShare une entreprise Scribd logo
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
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> ; ...)
                                                                                                     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
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
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
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)
                                      contenu sous licence Creative Commons BY                                           5
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)
                                      contenu sous licence Creative Commons BY                                                        6
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 d'un 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
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
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

Contenu connexe

En vedette

Grece nous lui-devons_tout- http://www.projethomere.com
Grece nous lui-devons_tout- http://www.projethomere.comGrece nous lui-devons_tout- http://www.projethomere.com
Grece nous lui-devons_tout- http://www.projethomere.com
Hélène Kémiktsi
 
Social SEO Power - Die Webmeister GmbH
Social SEO Power - Die Webmeister GmbHSocial SEO Power - Die Webmeister GmbH
Social SEO Power - Die Webmeister GmbH
Kathrin Lyhs
 
Chateaux syndicat (2)
Chateaux syndicat (2)Chateaux syndicat (2)
Chateaux syndicat (2)
desintocx
 

En vedette (15)

Grece nous lui-devons_tout- http://www.projethomere.com
Grece nous lui-devons_tout- http://www.projethomere.comGrece nous lui-devons_tout- http://www.projethomere.com
Grece nous lui-devons_tout- http://www.projethomere.com
 
Die Nadel im Heuhaufen finden mit der SIEM Technologie
Die Nadel im Heuhaufen finden mit der SIEM TechnologieDie Nadel im Heuhaufen finden mit der SIEM Technologie
Die Nadel im Heuhaufen finden mit der SIEM Technologie
 
Mythen und Fakten der Gemeinsamen Fischereipolitik der EU
Mythen und Fakten der Gemeinsamen Fischereipolitik der EUMythen und Fakten der Gemeinsamen Fischereipolitik der EU
Mythen und Fakten der Gemeinsamen Fischereipolitik der EU
 
Journal el moudjahid 23 06-2012
Journal el moudjahid 23 06-2012Journal el moudjahid 23 06-2012
Journal el moudjahid 23 06-2012
 
Fundraising Kongress 2012
Fundraising Kongress 2012Fundraising Kongress 2012
Fundraising Kongress 2012
 
Social SEO Power - Die Webmeister GmbH
Social SEO Power - Die Webmeister GmbHSocial SEO Power - Die Webmeister GmbH
Social SEO Power - Die Webmeister GmbH
 
Niche ecologique
Niche ecologiqueNiche ecologique
Niche ecologique
 
Présentation dld 2011
Présentation dld 2011Présentation dld 2011
Présentation dld 2011
 
Biowind Group - Présentation de l'entreprise
Biowind Group - Présentation de l'entrepriseBiowind Group - Présentation de l'entreprise
Biowind Group - Présentation de l'entreprise
 
Recommandations déontologiques SVA+
Recommandations déontologiques SVA+Recommandations déontologiques SVA+
Recommandations déontologiques SVA+
 
St
StSt
St
 
Nomino education
Nomino educationNomino education
Nomino education
 
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
Présentation de l'accessibilité numérique par Sébastien Huillet (Tribu And Co)
 
Chateaux syndicat (2)
Chateaux syndicat (2)Chateaux syndicat (2)
Chateaux syndicat (2)
 
Campus Talk, Basel (Switzerland): Pimp your XING Profile
Campus Talk, Basel (Switzerland): Pimp your XING ProfileCampus Talk, Basel (Switzerland): Pimp your XING Profile
Campus Talk, Basel (Switzerland): Pimp your XING Profile
 

Plus de Raphaël Goetter

Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
Raphaël Goetter
 

Plus de Raphaël Goetter (17)

Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Futur du-positionnement-css
Futur du-positionnement-cssFutur du-positionnement-css
Futur du-positionnement-css
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Des CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSSDes CSS efficaces avec KNACSS
Des CSS efficaces avec KNACSS
 
Le Futur du positionnement CSS
Le Futur du positionnement CSSLe Futur du positionnement CSS
Le Futur du positionnement CSS
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 

Atelier CSS positionnement (Paris web 2007)

  • 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. 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> ; ...) 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. 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. 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. 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) contenu sous licence Creative Commons BY 5
  • 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) contenu sous licence Creative Commons BY 6
  • 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 d'un 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. 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. 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