positioning

Positionnement des éléments

Nous avons déjà abordé ce problème de positionnement dans le module précédent (exercices de style), notamment lors de l'exercice 8 ou 2 blocs sont placés côte à côte.

La maîtrise du positionnement est primordiale pour le développeur web.

Nous allons approfondir le sujet au travers des exercices qui suivent.


Préparatif :

Nous allons partir de l'exercice 8 du module précédent pour le faire évoluer.

  • Copier coller le dossier style au même endroit, c'est à dire en www\exe001\
  • Renommer le dossier en 'positionnement'
  • Renommer www\exe001\positionnement\style.html en www\exe001\positionnement\index.html
  • Renommer www\exe001\positionnement\css\style.css en www\exe001\positionnement\css\projet.css
  • Si vous affichez index.html dans un navigateur, vous verrez que tout le style a disparu !
    • Expliquez pourquoi.
    • Corrigez le problème.
  • Vous obtenez ceci :

style08


Exercice 1 :

Dans le bloc 'Contenu' :

  • Retirez le texte.
  • Placez-y une div de 300px x 200px à fond rouge : id='rect1'
  • Pas de marge, pas de padding.

exe01

La marge visible tout autour est due au padding du bloc parent.

  • Retirez le padding du parent, pas des autres blocs !

Exercice 2 :

  • Modifiez le css afin de placer ce rectangle rouge à 50px du plafond et à 30px du mur gauche.
    • Pour cela on impose toujours margin: 0; et padding: 0;

exe02


Exercice 3 :

  • Ajoutez 2 rectangles pour obtenir à peu près ceci :
    • Les id seront 'rect2' et 'rect3'
    • Toujours sans marges ni paddings

exe03

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *