docTP 8 – Web : Langage CSS – Positionnement - daigl-ap
download 
Plainte Transcription
TP 8 – Web : Langage CSS – Positionnement - daigl-ap
AP – TP8 – Web : Langage CSS – Positionnement TP 8 – Web : Langage CSS – Positionnement 1- Modèle de Boîte Les éléments d'un document (X)HTML peuvent être vus comme des boîtes. A chaque boîte est associé des marges externes (margin), des marges internes (padding) et des bordures (border). height width Contenu Padding (marge interne) Bordure (border) Margin (marge externe) La largeur d'une boîte est calculée en cumulant la largeur du contenu ( widht), les marges internes (paddingleft et paddingright) et l'épaisseur de la bordure (borderleft et borderright). De même, la hauteur d'une boîte est calculée en cumulant la hauteur du contenu ( height), les marges internes (paddingtop et paddingbottom) et l'épaisseur des bordures (bordertop et borderbottom). Chaque boîte peut contenir d'autres boîtes... qui peuvent elles aussi contenir d'autres boîtes... et ainsi de suite. Cette imbrication de boîtes forme une hiérarchie arborescente. La boîte "racine" du document est l'élément <body>. Cette organisation du document génère une généalogie (élément parent, élément enfant, élément frère). 2- Positionnement 2.1. Positionnement dans le flux courant Le positionnement dans le flux courant est le positionnement par défaut. Les éléments de type bloc sont positionnés les uns sous les autres et occupent toute la largeur disponible. Les éléments dits " en-ligne" sont positionnés sur la même ligne, les uns à la suite des autres. Exemple (fichiers courant.html et courant.css) : Question 2.1.1 : Compléter la feuille de styles en respectant les contraintes imposées ci-dessous. Le conteneur div a pour couleur de fond la valeur rgb(100,100,100). De plus, une bordure d'un pixel de couleur noire lui est associée. Les deux paragraphes n'ont pas de marges internes. Les marges externes des deux paragraphes sont les marges "par défaut". Ils ont tous deux une bordure d'un pixel de couleur rouge. Le synopsis est affiché dans une boîte qui a la couleur rgb(204,102,51) pour couleur de fond, et la critique est affichée dans une boîte qui a la couleur rgb(148,71,107) pour couleur de fond. Question 2.1.2 : Que peut on dire des marges externes appliquées "par défaut" aux paragraphes ? Page 1 AP – TP8 – Web : Langage CSS – Positionnement Question 2.1.3.: Modifier la feuille de styles de façon à supprimer la marge externe haute de chaque paragraphe. Question 2.1.4 : Que peut on remarquer concernant les marges externes entre deux paragraphes ? Question 2.1.5 : Modifier la feuille de styles de façon à supprimer toutes les marges externes et imposer une largeur de 500 pixels au paragraphe dédié à la critique. Question 2.1.6 : Que peut on remarquer concernant les dimensions du bloc conteneur ( <div>) ? 2.2. Positionnement relatif Le positionnement relatif est activé à l'aide de la propriété position qui se voit affecter la valeur relative. L'élément est positionné dans le flux courant puis décalé (décalages exprimés à l'aide des propriétés top, bottom, right et left). Par contre, le décalage appliqué à un élément n'affecte pas les éléments qui entourent cet élément (la place réservée pour l'élément est celle attribuée dans le flux courant). Exemple (fichiers relatif.html et relatif.css) : Question 2.2.1.: Compléter la feuille de styles en respectant les contraintes imposées ci-dessous. Le conteneur div a pour couleur de fond la valeur rgb(100,100,100). De plus, une bordure d'un pixel de couleur noire lui est associée. Les deux paragraphes n'ont pas de marges internes, ni de marges externes. Ils ont tous deux une bordure d'un pixel de couleur rouge. Le synopsis est affiché dans une boîte qui a la couleur rgb(204,102,51) pour couleur de fond, et la critique est affichée dans une boîte qui a la couleur rgb(148,71,107) pour couleur de fond. Le positionnement relatif est utilisé pour chacun des deux paragraphes. Question 2.2.2. : Modifier la feuille de style de façon à décaler le texte de la critique de 20 pixels vers le bas et de 50 pixels vers la droite. Question 2.2.3. : Modifier la feuille de style de façon à décaler le texte du synopsis de 30 pixels vers le haut et de 20 pixels vers la gauche. Question 2.2.4. : Que peut on dire de la position et des dimensions du bloc conteneur ( <div>) ? 2.3. Positionnement absolu Le positionnement absolu est activé à l'aide de la propriété position qui se voit affecter la valeur absolute. L'élément est retiré du flux courant (il n'a donc plus aucun effet sur le calcul des positions des éléments qui l'entourent). Sa position est déterminée par les propriétés top, bottom, right et left. Ces valeurs sont relatives à la position du premier élément ancêtre positionné (positionnement relatif, absolu ou fixe). Exemple (fichiers absolu.html et absolu.css) : Question 2.3.1.: Compléter la feuille de styles en respectant les contraintes imposées ci-dessous. Le conteneur div a pour couleur de fond la valeur rgb(100,100,100). De plus, une bordure d'un pixel de couleur noire lui est associée. Les deux paragraphes n'ont pas de marges internes, ni de marges externes. Ils ont tous deux une bordure d'un pixel de couleur rouge. Le synopsis est affiché dans une boîte qui a la couleur rgb(204,102,51) pour couleur de fond, et la critique est affichée dans une boîte qui a la couleur rgb(148,71,107) pour couleur de fond. Le positionnement absolu est utilisé pour chacun des deux paragraphes. Question 2.3.2. : Modifier la feuille de style de façon à positionner le texte de la critique en position 50,50 (unité : pixels). Page 2 AP – TP8 – Web : Langage CSS – Positionnement Question 2.3.3. : Modifier la feuille de style de façon à positionner le texte de la critique en position 100,100 (unité : pixels). Question 2.3.4. : Que peut on dire de la position et des dimensions du bloc conteneur ( <div>) ? 2.4. Positionnement fixe Le positionnement fixe est activé à l'aide de la propriété position qui se voit affecter la valeur fixed. La position de l'élément est déterminée par les propriétés top, bottom, right et left. L'élément reste fixe dans la page par rapport à la zone de visualisation. 2.5. Positionnement flottant Le positionnement flottant est activé à l'aide de la propriété float qui se voit affecter la valeur right ou la valeur left. L'élément prend place à droite ou à gauche de bloc conteneur. L'élément suivant occupera alors l'espace libéré. Exemple (fichiers flottant.html et flottant.css) : Question 2.5.1.: Compléter la feuille de styles en respectant les contraintes imposées ci-dessous. Le conteneur div a pour couleur de fond la valeur rgb(100,100,100). De plus, une bordure d'un pixel de couleur noire lui est associée. Les deux paragraphes n'ont pas de marges internes, ni de marges externes. Ils ont tous deux une bordure d'un pixel de couleur rouge. Le synopsis est affiché dans une boîte qui a la couleur rgb(204,102,51) pour couleur de fond, et la critique est affichée dans une boîte qui a la couleur rgb(148,71,107) pour couleur de fond. Le positionnement flottant est utilisé pour chacun des deux paragraphes (le texte de la critique est positionné à droite et le texte du synopsis est positionné à gauche). Question 2.5.2. : Modifier la feuille de style de façon à positionner les deux textes (synopsis et critique) à gauche. 3- Site "Films" (charte graphique) Modifier la feuille de styles (fichier film.css) du TP précédent associée aux fiches de films de façon à organiser l'ensemble des éléments dans un conteneur de 800 pixels par 600 pixels (conteneur centré dans la zone de visualisation du navigateur). Organisation possible : Titre Réalisateur, Date de sortie ... Affiche Distribution Synopsis Critiques Page 3
