Impressum

Correction 1 de l’exercice 1 sur les CSS

lundi 21 novembre 2005
par  François Daniel Giezendanner
popularité : 1%

 Fichier de correction : whirlwind_01.html

Partant d’un fichier dont la seule mise en page résulte de la structure exprimée par les balises HTML tels que par exemple les balises blocs : body, p, h1, h2, h3, h4, a, hr, ol, ul, li et les balises en ligne : strong, img, veuillez modifier le comportement de base de ces balises HTML avec des règles CSS de votre choix.

  • Téléchargez les fichiers de correction HTML, CSS et images :
    Zip - 174.5 ko
    Correction 1 de l’exercice 1

Voici une copie d’écran d’une partie du 1er exemple que nous avons préparé :


GIF - 167.7 ko
Copie d’écran d’un extrait de la page « whirlwind_01.html »

 Modifications apportées aux balises HTML body, p, ul, li, ol et strong avec les règles CSS

Voici les modifications apportées par les CSS aux balises HTML body, p, ul, li, ol et strong :


 Images

D’autre part, le fichier HTML comprend 10 images accompagnées d’une légende composée d’un titre, d’un commentaire éventuel et d’une indication de la « source-copyright ». A chaque image est associé un lien qui renvoie à une page HTML présentant l’image agrandie. Il en résulte les 4 balises p suivantes :

Nous voulons que ces images soient positionnées à gauche ou à droite de la page des telle manière que les textes qui les suivent « s’écoulent » sur leur côté « laissé libre » et au dessous. A cette fin, nous plaçons l’image, son titre, son commentaire et son texte « source-copyright » dans une balise div (ci-dessous l’exemple de l’image 8) :

La déclaration CSS exprime par défaut (donc facultative) la position static :

Et la déclaration CSS de « flottement » :

ou

selon que l’on souhaite voir la boîte « image et sa légende » située à gauche ou à droite de la page, avec le texte s’écoulant respectivement sur son flanc droit ou son flanc gauche.

Étant donné que les images ont toutes des largeurs différentes, cette manière de faire impose d’écrire un bloc de déclarations de type « classe » spécifique pour chaque boîte contenant « l’image et sa légende ». Cela n’est pas adapté à une démarche générique et nous verrons dans une autre correction de cet exercice comment corriger ce problème.

Par exemple, voici la règle CSS pour la première image placée à droite du document whirlwind_01.utml :

Commentons la règle ci-dessus :

L’image est positionnées en mode static par défaut.

Si on le souhaite, on peut choisir une écriture explicite en ajoutant l’instruction :

D’autre part l’’instruction :

place la boîte contenant l’image et sa légende à droite de la page et laisse le texte qui suit s’écouler le long de son flanc gauche et au-dessous de cette boîte.

L’instruction :

impose une marge de 10 pixel entre le flanc gauche de la boîte et le texte.

Voici l’ensemble des règles CSS concernant les boîtes « image et sa légende » :

Voici les blocs de déclarations CSS pour la légende des images, composée :

  • du titre (sélecteur titre-image) ;
  • du commentaire éventuel (sélecteur texte-image) ;
  • de l’indication de la « source-copyright » (sélecteur copyright-image) :

Publications

Derniers articles publiés

Agenda

<<

2018

 

<<

Juin

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
2526272829301
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


1 site référencé dans ce secteur