TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Positionnement

Marge des boites de bloc

  1. Afficher l'image ci-contre en fond de la page : grille
  2. Définir une règle CSS de sorte que les éléments "div" dotés d'un attribut "style" en affichent la valeur avant leur contenu.
  3. Définir une règle CSS attribuant aux éléments "div" une largeur de 80%, une marge de 40pixels, une hauteur de ligne de 20 pixels et une bordure de 2 pixels.
  4. Définir trois r²gles pour des classes de "div" de noms : static, relatif et absolu, pour distinguer les bordures et le texte selon la nature du positionnement
  5. On se propose de construire la structure suivante :

    structure arborescente
  6. Créer les éléments "div" suivants : (1, 2, 1.1), en position "static".
  7. Comment est positionné un élément "div static" ?
  8. Créer les éléments "div" suivants : (1.2, 2.1, 2.2, 1.2.1), en position relative en attribuant les valeurs données pour les propriétés "top" et "left"
  9. Un élément est dit "retiré du flux" si sa présence ou son absence n'influe pas sur le positionnement du reste du flux, les éléments statics en particulier :

       • Les éléments relatifs sont-ils retirés du flux ?
       • Comment sont interprétées les propriétés "left" , "right" et "margin" pour un élément en position relative ?

    En conclure comment se positionne un élément relatif.
  10. Ajouter les deux éléments "div static" (1.2.2 et 1.2.2.1)
  11. Comment se positionne un élément static consécutif d'un élément relatif (1.2.2) ?
  12. Ajouter les éléments "div absolu" suivants : (1.2.3, 1.2.3.1, 2.2.1, 2.2.1.1 et 1.2.3.1.1)en attribuant les valeurs données pour les propriétés "top" et "left"
  13. Les éléments en position absolue sont-ils retirées du flux ?
  14. A quoi se réfèrent les propriétés "left" et "right" ?
  15. Comment est positionné un élément absolu ?

division 1 dans le flux

division 1.1 dans le flux

division 1.2 relative

division 1.2.1 relative

division 1.2.1.1 absolue

division 1.2.2 dans le flux

division 1.2.2.1 dans le flux

division 1.2.2.1.1 absolue
division 1.2.2.2 absolue
division 1.2.3 absolue

division 2 dans le flux

division 2.1 relative

division 2.2 relative

division 2.2.1 absolue

division 2.2.1.1 absolue

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007