Html & Css #5 : positionement

Click here to load reader

  • date post

    05-Jul-2015
  • Category

    Software

  • view

    415
  • download

    7

Embed Size (px)

description

Html & Css #5 : positionement

Transcript of Html & Css #5 : positionement

  • 1. CSS : Positionnement

2. Block & Inline 3. Typologie Block vs Inline 4. Caractristiques dun block Par default, un block prend toute la largeur de son lment parent. Un block peut avoir des marges et des paddings. Par default, un block prend la hauteur de ses lments enfants. Ex : p, div, form, header, nav, ul, li, h1 Ex : http://jsfiddle.net/thecorneliusclub/yw9rj41L/ 5. Fixer la taille dun block (1) header{ width: 900px; height: 800px; } h2{ width: 50%; height: 20%; } 6. Fixer la taille dun block (2) header{ min-width: 900px; min-height: 800px; } h2{ max-width: 50%; max-height: 20%; } 7. Dbordement dun block p{ overow: visible; } p{ overow: hidden; } p{ overow: scroll; } p{ overow: auto; } 8. Sa hauteur / largeur est celle de son contenus. Caractristiques dun inline Il nest pas possible de lui xer une largeur / hauteur. Il ignore les marges top et bottom mais applique les marges left et right, ainsi que tout padding. Ex : http://jsfiddle.net/thecorneliusclub/obd38xro/ 9. La proprit display a{ display: block; } p{ display: inline; } Ex : http://jsfiddle.net/thecorneliusclub/r552dzs7/ 10. Inline-block (1) Source : http://www.lesintegristes.net/2008/06/18/utiliser-la-propriete-displayinline-block/ Inline-block permet dappliquer des styles de type block un lment ayant un comportement de type inline, comme par exemple, une largeur, une hauteur, des marges, etc. 11. Inline-block (2) nav ul li{ display: inline-block; } Ex : http://jsfiddle.net/thecorneliusclub/90zay7a9/ 12. Tailles & Marges 13. Taille dun bloc h1{ width: 100px; } h2{ height: 100%; } Ex : http://jsfiddle.net/thecorneliusclub/dxwotwfo/ 14. Types de marges Border Margin Padding 15. Padding h1{ padding: 10px; } h2{ padding: 10px 20px; } h3{ padding: 10px 5px 2px 3px; } h4{ padding-left: 10px; } Ex : http://jsfiddle.net/thecorneliusclub/ek44bcd1/ 16. Margin h1{ margin: 10px; } h2{ margin: 10px 20px; } h3{ margin: 10px 5px 2px 3px; } h4{ margin-right: -5px; } Ex : http://jsfiddle.net/thecorneliusclub/ccjw6r1k/ 17. Centrer un bloc body{ width: 800px; margin: 0px auto; } Ex : http://jsfiddle.net/thecorneliusclub/nuqL7zop/ 18. Les flottants 19. Thorie (1) Un lment ottant adopte par dfaut la largeur qu'occupe son contenu. Le principe de base est simple: un lment ottant est t partiellement du ux et plac l'extrme gauche (oat:left) ou droite (oat:right) de son conteneur, forant par la mme occasion tout contenu du ux qui suit l'envelopper. Deux objets ottants dans la mme direction se rangeront cte cte, seul un contenu demeur dans le ux qui les succde immdiatement initiera l'habillage. Source : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#flottants 20. Thorie (2) La proprit clear s'utilise conjoitement aux oat et permet un lment (qui peut tre d'ailleurs lui-mme ottant) de ne plus subir le comportement d'habillage dict par un objet ottant qui le prcde directement et, par consquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des ottants exclusivement gauche (clear:left), droite (clear:right) ou les deux simultanment (clear:both). Source : http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#flottants 21. Pratique div{ oat: left; } p{ oat: right; } #container{ clear: both; } Ex : http://jsfiddle.net/thecorneliusclub/s43xL86x/ 22. Positionnement 23. Positionnement absolu #logo{ position: absolute; top: 100px; right: 100px; } Ex : http://jsfiddle.net/thecorneliusclub/eu7wfws8/ 24. Gestion de la profondeur #logo{ position: absolute; top: 100px; right: 100px; z-index: 10; } #bonus{ position: absolute; top: 100px; right: 100px; z-index: 100; } Ex : http://jsfiddle.net/thecorneliusclub/qdjv8e4d/ 25. Positionnement fixe #logo{ position: xed; top: 100px; right: 100px; } Ex : http://jsfiddle.net/thecorneliusclub/fjpm1x0s/ 26. Merci pour votre attention.