Création numérique
Atelier Conception et publication Web

---

Séance 6 - CSS, positionnement

Le positionnement en CSS

Pratique

Fichiers sources

Télécharger les sources

Exercice 1 - Flotement

Exercice 2 - Positionnement relatif

Exercice 3 - Positionnement absolu

Correction

/* Exercice 1 */
#exercice1 .content {
  background-color: black;
  width: 90%;
  margin: 0 auto;
}
#exercice1 .menu {
  background-color: blue;
  width: 20%;
  float: left;
}
#exercice1 .corps {
  background-color: red;
  width: 80%;
  margin-left: 20%;
}
#exercice1 .bas {
  background-color: green;
  clear: both;
}
/* Exercice 2 */
body#exercice2 {
  width: 90%;
  margin: 0 auto;
}
#exercice2 .article {
  background-color: black;
}
#exercice2 .article h2 {
  background-color: blue;
  position: relative;
  bottom: 10px;
  right: 20px;
}
#exercice2 .article p {
  background-color: red;
}
#exercice2 .article p.infos {
  background-color: green;
  width: 120px;
  position: relative;
  top: 20px;
  left: 20px;
}
/* Exercice 3 */
.scene {
  background: url('http://img.over-blog-kiwi.com/1/40/26/86/20150907/ob_3e88ad_e2e1cf1e9ccfef92bb2e.jpg') repeat-x;
  width: 450px;
  height: 300px;
  position: relative;
}
.acteur-mechant {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
}
.decor-gauche {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
}
.decor-droite {
  position: absolute;
  z-index: 3;
  top: 0;
  right: -20px;
}
.acteur-gentil {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -20px;
}

Télécharger la feuille de style corrigée

---

Ressources utilsées :

• Julien Crego