Objectif: Manipuler Les Propriétés de POSITION, FLOAT Exercice 1

HYPERMEDIA ISTA NTIC SYBA
TP N°8 : CSS
Objectif : Manipuler les propriétés de POSITION, FLOAT
Exercice 1 :
Recopiez le code html suivant dans un fichier test2.htm et joignez lui une feuille de style
externestyleTest2.css.
<html>
<head>
<title>Page de test pour les CSS</title> <link href="styleTest.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus. Mauris
urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae
leo. Nullam arcu. In nec odio nec tellus blandit tristique. Mauris vel
l ibero. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Proin congue pharetra lectus.
Suspendisse interdum eleifend nulla. Vestibulum lacinia mi nec ipsum?
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus. Mauris
urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae
leo. Nullam arcu. In nec odio nec tellus blandit tristique. Mauris vel
l ibero. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Proin congue pharetra lectus.
Suspendisse interdum eleifend nulla. Vestibulum lacinia mi nec ipsum?</p>
</div>
</body>
</html>
1. Nommez les deux paragraphes avec des identificateurs paragraphe1 et paragraphe2.

2. Appliquez une couleur jaune au bloc div, bleue au paragraphe1 et verte au paragraphe2.
3. Observer le positionnement naturel des blocs dit positionnement dans le flux. Les
paragraphes se placent dans l'ordre d'apparition, l'un en dessous de l'autre, à l'intérieur du
bloc conteneur ( div ), lui même dans un autre bloc conteneur ( body ).
4. Appliquez au bloc div une marge interne de 6px sur tous les côtés.
5. Sur quelle balise et sur quelle marge faut il jouer pour annuler l'écart entre les deux
paragraphes ?
6. Réduire la largeur des blocs avec l'attribut width, 200 px pour le paragraphe1 et 250 pour
le paragraphe2.
7. Pour centrer un bloc la propriété text-align ne fonctionne pas, car elle ne s'applique pas
aux bocs. Il suffit de fixer la largeur du bloc et de fixer les marges droites et gauches à
auto. Centrer ainsi le paragraphe2.
1 Mr. CHAOULID
8. Pour sortir du flux courant, on peut positionner le bloc relativement à sa position dans le
flux avec la propriété position:relative. Décalez le paragraphe1 de 100px vers la droite et 20
px vers le bas.
9. Décalez le deuxième paragraphe de 120px vers la droite et de 130px vers le haut.
10. Les blocs peuvent ils se superposer ?
11. Echanger l'ordre de superposition des deux paragraphes en jouant sur la propriété z-index.
12. On peut aussi positionner le bloc par rapport au coin supérieur gauche de son premier
ancêtre positionné, c'est le positionnement absolu. Modifiez le positionnement précédent
des deux paragraphes en mettantposition:absolute. En déduire quel est le premier ancêtre
positionné des balises <p>.
13. Positionnez maintenant le bloc div ( absolu ou relative ) et donnez lui une largeur et une
hauteur, que constatez vous ?
14. Placez les deux paragraphes pour un affichage sur deux colonnes dans le bloc div, en
jouant sur les positions et les largeurs des blocs.
15. Voyons maintenant le positionnement flottant qui laisse les éléments dans le flux mais
permet de les pousser à gauche ou à droite. Conserver les dimensions du bloc div et du
paragraphe1, supprimez celles du paragraphe 2. Supprimer tous les positionnements.
Utilisez la propriété float:right, sur le style du paragraphe1. Que se passe t il ?
16. Réduisez le texte du paragraphe1 pour ne conserver que les deux premières phrases,
comment les blocs s'imbriquent t ils ? testez float:left.
Exercice 2 :
Créer les pages HTML suivants :
2 Mr. CHAOULID
Exercice 3 :
Construire un document HTML et un document CSS produisant l’affichage ci-dessous, le fichier

HTML ne devra contenir aucun attribut de balise et ne devra utiliser que les balises h1, p et div :
3 Mr. CHAOULID
Exercice 4 :
Vous considérerez le document HTML suivant :

<div id="i0">
<div id="i1">Texte i1</div>
<div id="i2">Texte i2</div>
</div>
<p>texte non flottant devant se placer « autour » des boîtes flottantes, quelques mots devraient
sans doute être suffisants...</p>
Et construirez le fichier CSS permettant d’obtenir quelque chose du genre :
La taille des boîtes de gauche étant d’un quart de la largeur de l’affichage.
Exercice 5 :

<div id="i1">Texte id1</div> <div id="i2">Texte id2</div> <div id="i3">Texte id3</div>
Et construirez le fichier CSS permettant d’obtenir quelque chose du genre :
Exercice 6 :
<h3>Remarque :</h3>
<p>Dans cette recette, le <a class="infobulle" href="#"> globzug <span>produit 100%
naturel issu de la fermentation de la pomme de terre</span></a> peut être avantageusement
4 Mr. CHAOULID
remplacé par du <a class="infobulle" href="#"> zortron <span>produit synthétique vachement

moins bon</span></a>.</p>
et construirez le fichier CSS permettant d’obtenir quelque chose du genre :
avec affichage de l’infobulle lorsque le pointeur passe sur le mot souligné.
5 Mr. CHAOULID

Objectif: Manipuler Les Propriétés de POSITION, FLOAT Exercice 1

Transféré par

Informations du document

Description :

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

Formats disponibles

Objectif: Manipuler Les Propriétés de POSITION, FLOAT Exercice 1

Titre original :

Transféré par

Description :

Droits d'auteur :

Formats disponibles

HYPERMEDIA ISTA NTIC SYBA

1. Nommez les deux paragraphes avec des identificateurs paragraphe1 et paragraphe2.

Construire un document HTML et un document CSS produisant l’affichage ci-dessous, le fichier

Vous considérerez le document HTML suivant :

Et construirez le fichier CSS permettant d’obtenir quelque chose du genre :

La taille des boîtes de gauche étant d’un quart de la largeur de l’affichage.

Vous considérerez le document HTML suivant :

Vous considérerez le document HTML suivant :

remplacé par du <a class="infobulle" href="#"> zortron <span>produit synthétique vachement

et construirez le fichier CSS permettant d’obtenir quelque chose du genre :

avec affichage de l’infobulle lorsque le pointeur passe sur le mot souligné.

Centres d'intérêt liés

Vous aimerez peut-être aussi