Positionnement des "div" à l'aide des CSS.
Le Positionnement des élement HTML avec les styles CSS
Cet exercice à pour objectif de vous faire travailler avec les feuilles de style pour la création d'une présentation de page à 3 colonnes.
Pour qu'il vous soit profitable, faites-le sérieusement, sans vous précipiter sur le résultat final qui aparaît en fin de page.
Le fichier exo_5_Div.htm , contient 5 balises 'bloc' <div>. Chaque div contient un titre <h1> et un paragraphe de texte <p>.
- Recopiez le code source de ce fichier
- Donner un identifiant (id) à chaque div
- Créez une feuille de style et liez-la au document HTML
- Dans la feuille de style définir, pour body, padding à 0 margin à 0 .
- Définissez Verdana comme police de charactère et une taille très petite.
- Donner une couleur de fond différente à chaque Div (Le texte doit rester visible)
- Voir le résultat obtenu dans IE et dans Firefox (que se passe-t-il ?)
- Définir une valeur padding pour chaque div (on peut prendre la même valeur pour tous les selecteurs)
- Voir le résultat dans IE et Firefox (Que se passe-t-il les 2 navigateurs se comportent-ils de la même manière ? )
- Définir une valeur margin pour chaque div
- Voir le résultat dans IE et Firefox (que se passe-t-il les 2 navigateurs se comportent-ils de la même manière ? )
- Remettre tous les padding à 15 pixels et margin à 0
- Définir des valeurs width pour chaque div (des valeurs différentes)
- Voir le résultat dans IE et Firefox (que se passe-t-il les 2 navigateurs se comportent-ils de la même manière ? )
- Par défaut, quelle largeur les navigateurs donnent-ils à un div ?
- Par défaut, comment les navigateurs positionnent-ils les div ?
- Supprimez la largeur du 1er div
- Atribuez une largeur de 200 px au 2e Div
- Atribuez une largeur de 200 px au 3e Div
- Supprimez la largeur du 4e Div
- Supprimez la largeur du 5e Div
- Ajoutez la règle {float:left} au 2e Div
- Ajoutez la règle {float:right} au 3e Div
- Que se passe-t-il dans IE ? et dans Firefox ? Les 2 navigateurs interpretent-ils les CSS de la même manière ?
- Ajouter la règle {clear:both} au 5e Div
- Que se passe-t-il au niveau des navigateurs
- Quelle type de présentation obtenez-vous ?