User Tools
2015_2016:s1:webdoc:td4
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
2015_2016:s1:webdoc:td4 [2015/11/20 14:54] gjannon |
2015_2016:s1:webdoc:td4 [2015/11/30 15:43] (current) urli [Sprite] |
||
|---|---|---|---|
| Line 13: | Line 13: | ||
| Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. | Nous nous proposons à présent de créer une section de type blog sur votre site web en utilisant ces balises. | ||
| Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après. | Pour cela vous vous aiderez de l'exemple suivant et des informations données dans les rubriques ci après. | ||
| + | |||
| + | Plus d'infos sur les différentes balises html utilisées : | ||
| + | * http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html | ||
| <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > | ||
| Line 43: | Line 46: | ||
| Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. | Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. | ||
| + | |||
| + | Quelques éléments sur les flux et le positionnement relatif : | ||
| + | * http://openweb.eu.org/articles/initiation_flux/ | ||
| Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. | Le positionnement flottant permet de sortir un élément du flux, en cela que l'on peut préciser si l'élément ciblé, par exemple une image ou une colonne de contenu, s'affiche à gauche ou à droite. | ||
| Line 52: | Line 58: | ||
| Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. | Le positionnement flottant s'adapte au contenu et par défaut prend toute la largeur disponible. | ||
| + | |||
| + | Comprendre les float : | ||
| + | * http://openweb.eu.org/articles/initiation_float/ | ||
| Pour restreindre sa largeur il est possible de donner une taille à l'élément: | Pour restreindre sa largeur il est possible de donner une taille à l'élément: | ||
| Line 67: | Line 76: | ||
| clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | clear: both; /* ou right ou left pour libérer l'influence du float uniquement d'un côté*/ | ||
| </code> | </code> | ||
| + | |||
| + | Elements supplémentaires sur les positions fixes et absolues : | ||
| + | * http://openweb.eu.org/articles/initiation_absolue/ | ||
| Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | Pour en savoir plus sur les possibilités de positionnement vous pourrez voir : | ||
| Line 152: | Line 164: | ||
| </box> | </box> | ||
| - | ==== Sprite ==== | ||
| - | |||
| - | Le tuto est là : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav | ||
| - | L'image est ici : http://www.w3schools.com/css/img_navsprites.gif | ||
| - | http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html | ||
| ===== Après les TDs 3 et 4, je sais répondre à ===== | ===== Après les TDs 3 et 4, je sais répondre à ===== | ||
2015_2016/s1/webdoc/td4.1448027643.txt.gz · Last modified: 2015/11/20 14:54 by gjannon
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
