This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
2016_2017:s1:webdoc:td3 [2016/11/09 18:28] logre |
2016_2017:s1:webdoc:td3 [2016/11/09 18:43] logre [Barre de navigation] |
||
---|---|---|---|
Line 122: | Line 122: | ||
</code> | </code> | ||
- | ===== Barre de navigation ===== | + | ===== Autour des boites ===== |
+ | |||
+ | Il est possible de définir des espacements autour des éléments HTML en CSS: | ||
+ | * les marges autour de l'élément : //margin// | ||
+ | * les marges à l'intérieur de l'élément : //padding// | ||
+ | |||
+ | <code css> | ||
+ | margin:10px; /* marge de 10 pixels tout autour de l'élément*/ | ||
+ | margin:1%; /*marge de 1% tout autour de l'élément*/ | ||
+ | margin: 5px 6px 7px 8px; /*dans l'ordre : top right bottom left*/ | ||
+ | margin-left:10px; | ||
+ | padding: 10px; | ||
+ | padding: 5px 6px 7px 8px; | ||
+ | </code> | ||
+ | |||
+ | Certains éléments ont des marges et/ou des paddings par défaut. | ||
+ | Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | ||
+ | |||
+ | ===== Mise en pratique ===== | ||
+ | |||
+ | ==== Barre de navigation ==== | ||
Votre site contiendra plusieurs pages. | Votre site contiendra plusieurs pages. | ||
Line 139: | Line 159: | ||
- [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | - [[http://www.w3schools.com/cssref/pr_class_position.asp|La position (static, relative, absolute ou fixed).]] <code css> position : ... ;</code> | ||
- [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | - [[http://www.w3schools.com/cssref/pr_class_display.asp|Le display (inline, block, flex, none ...).]] <code css> display: ...; </code> | ||
- | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> | + | - [[http://www.w3schools.com/css/css_float.asp|Le flottement (left, right) .]] <code css> float: ...; </code> |
+ | |||
+ | ==== Contenu ==== | ||
+ | |||
+ | <box round rgb(185,211,238) 95%|**A Faire** : > | ||
+ | * En utilisant les balises HTML 5 //section//, //article// et //aside// créer une liste de projets démontrant toutes vos compétences pour former un portfolio. | ||
+ | </box> | ||
+ | |||
+ | Un projet doit être caractérisé par : | ||
+ | - un titre | ||
+ | - une date | ||
+ | - un texte | ||
+ | - un visuel éventuel | ||
+ | - un lien vers une vidéo de démonstration ou un repo github | ||
+ | |||
+ | |||
+ | |||
+ | ===== Je sais répondre à ===== | ||
+ | |||
+ | <box round rgb(255,204,153) 97%|**Je sais répondre à :** > | ||
+ | * Qu'est-ce que le flux d'affichage ? | ||
+ | * Comment décaler un élément dans ce flux ? | ||
+ | * Comment sortir un élément de ce flux ? | ||
+ | * Quels sont les types de marge sur lesquelles nous pouvons agir ? | ||
+ | * Comment placer les éléments relativement les uns aux autres ? | ||
+ | * A quoi sert l'attribut "float"? "clear" ? | ||
+ | </box> | ||