This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2017_2018:s1:webdoc:td3 [2017/11/23 09:11] pourcelot [Autour des boites] |
2017_2018:s1:webdoc:td3 [2017/11/23 09:23] (current) pourcelot [Autour des boites] |
||
---|---|---|---|
Line 132: | Line 132: | ||
Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | Mettez en commentaire la ligne du script CSS fourni qui les désactive, et visualiser à nouveau l'HTML dans un navigateur. | ||
+ | <note tip>Les marges permettent également de centrer des conteneurs (block). | ||
- | <note tip>Par défaut, lorsqu'on indique la taille d'un conteneur (block), à l'aide des propriétés CSS ''width'' et ''height'', les bordure et les marges externes ne sont pas prises en compte. | + | Il suffit de préciser la largeur de l'élément (''width''), puis de fixer ''margin-left'' et ''margin-right'' à ''auto''. |
- | Il est souvent plus pratique lorsqu'on crée une mise en page de faire en sorte que les dimensions indiquées soient celles du conteneur //marges comprises//. Pour changer la méthode de calcul de la taille d'un conteneur pour //tous// les éléments de la page, écrivez ''*{box-sizing: border-box;}'' au début de votre page CSS.</note> | + | <code css> |
+ | #monbloc {width: 500px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto;} | ||
+ | </code> | ||
+ | </note> | ||
+ | |||
+ | <note tip>Par défaut, lorsqu'on indique la taille d'un conteneur, à l'aide des propriétés CSS ''width'' et ''height'', les bordures et les marges externes ne sont pas prises en compte. | ||
+ | |||
+ | Il est souvent plus pratique lorsque l'on crée une mise en page de faire en sorte que les dimensions indiquées soient celles du conteneur //marges comprises//. Pour changer la méthode de calcul de la taille d'un conteneur pour //tous// les éléments de la page, écrivez ''*{box-sizing: border-box;}'' au début de votre feuille CSS.</note> | ||
===== Mise en pratique ===== | ===== Mise en pratique ===== | ||
Line 179: | Line 189: | ||
- Une **version HTML de votre CV**. Intégrez ensuite votre CV sur la page Web crée lors des TD précédents en utilisant une iframe. Rendez le tout (page web + CV intégré) sous forme d'une archive **ZIP**. Rajoutez également un lien pour pouvoir afficher votre CV sur une page indépendante. | - Une **version HTML de votre CV**. Intégrez ensuite votre CV sur la page Web crée lors des TD précédents en utilisant une iframe. Rendez le tout (page web + CV intégré) sous forme d'une archive **ZIP**. Rajoutez également un lien pour pouvoir afficher votre CV sur une page indépendante. | ||
- | vous pouvez faire un rendu par binôme, à condition de bien faire apparaître les deux noms du binôme dans tous les documents à rendre. | + | Vous pouvez faire un rendu par binôme, à condition de bien faire apparaître les deux noms du binôme dans tous les documents à rendre. |
</note> | </note> | ||