OFPPT Office de la Formation Professionnelle
et de la Promotion du Travail
ISTA INZEGANE
Année de formation : 2023 /2024
Filière : Développent digital TC TD/TP
Formation : Initiale Compétence : Développer un
site web statique
Élément de compétence: Mettre en forme une page web avec les feuilles de style CSS.
a) La propriété position
static
relative
fixed
absolute
sticky
b) La propriété z-index
c) Les propriétés float et clear
Activité pratique :
a. Sur papier (compte rendu : double feuille à la fin de la séance)
b. Sur machine à l’aide d’un IDE (dossier .rar ou lien github à la boite email :
mohamed.chakouj.ofppt@gmail.com Objet : TP 3 Css3 :VotreNom).
Exercice 1 :
Soit le code html suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Exercice CSS : Positionnement</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
<div class="box" id="box4">4</div>
</div>
</body>
</html>
Voilà le contenu du fichier style.css a compléter pour répondre aux questions :
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
width: 400px;
margin: 50px auto;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
font-weight: bold;
border: 2px solid #2980b9;
border-radius: 5px;
}
Questions :
Q1. Positionnez la boîte box1 en utilisant la valeur position: static.
Observez comment elle se comporte par défaut.
Q2. Positionnez la boîte box2 en utilisant la valeur position: relative.
Déplacez-la de quelques pixels par rapport à sa position initiale.
Q3. Positionnez la boîte box3 en utilisant la valeur position: absolute.
Placez-la dans un coin de la page ou à un endroit spécifique par rapport au
conteneur.
Q4. Positionnez la boîte box4 en utilisant la valeur position: fixed. Fixez-
la en haut de la page, de sorte qu'elle reste visible même lorsque vous faites
défiler la page.
Exercice 2 :
Réaliser ce layout avec la propriété position :
Exercice 3 :
Tache 1 :
Dans cette tâche, l’élément avec une classe float doit flotter vers la gauche. Ensuite, nous
voulons que la première ligne de texte s'affiche à côté de cet élément, mais que la ligne de texte
suivante (qui a une classe ci-dessous) s'affiche en dessous.
Code html :
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
<p class="below">Cause this sentence to appear below the float.</p>
</div>
Votre résultat final devrait ressembler à l'image ci-dessous :
Tache 2 :
Dans cette tâche, nous avons un élément flottant. La boîte entourant le flottant et le texte
s'affiche derrière le flottant. Utilisez la méthode la plus récente disponible pour que l'arrière-
plan de la boîte s'étende jusqu'en dessous du flotteur, comme dans l'image ci-dessous :
Code html :
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
</div>
Code css à compléter :
.float {
float: right;
}
.box {
