61. Atelier CSS
Les exercices de ce chapitre vont vous permettre de mettre en oeuvre les différentes méthodes pour associer la technologie CSS à la technologie XHTML et de constater les différents comportements que peuvent avoir les navigateurs.
61.1. Les méthodes d’association CSS et XHTML
Pour cet exercice vous allez créer un document XHTML très simple comme ci-dessous :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
Vous allez utiliser ce document afin de tester les différentes méthodes disponibles pour modifier l’aspect du paragraphe de texte.
Utilisez les différentes techniques d’association XHTML/CSS vues dans le cours pour changer la couleur du texte du paragraphe :
utilisation de l’attribut style dans la balise ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> </head> <body> <p style="color: aquamarine;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
utilisation des déclarations CSS dans l’entête du document ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> <style> p {color: aquamarine;} </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>utilisation des déclarations CSS pour faire référence à un fichier externe.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> <link rel="stylesheet" media="screen" type="text/css" href="style.css" title="Default" /> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </body> </html>
61.2. Différents mode d’affichage
Avant de commencer à manipuler les CSS, vous devez observer l’importance des standards communs. Pour cela vous allez devoir utiliser deux exemples très simples.
61.2.1. Les "modèles de boîte" ou "box models"
Le premier exemple aura pour objectif de vous montrer les deux modèles de boîte (ou box model) existants.
Le premier document va être composé d’un paragraphe de texte de 100 pixels de large avec une bordure rouge et des marges internes de 20 pixels.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> </head> <body> <p style="width:100px; border: 1px solid red; padding: 20px;">a b c d e f g h i j k l m n o p q r s t u v w x y z</p> </body> </html>
Affichez le document nouvellement créé dans votre navigateur, rien ne devrait vous surprendre et vous devriez obtenir le même résultat que sous Microsoft Internet Explorer.
[Résultat]
Le paragraphe doit faire 142 pixels de largeurs : 100 + 20 + 20 + 1 + 1 (width + padding-left + padding-right + border-width-left + border-width-right) car c’est ainsi que fonctionne le "box model" du W3C.
À présent, supprimez la déclaration DOCTYPE, votre document n’est plus valide. Affichez le dans votre navigateur et observez ; deux choses peuvent se produire :
votre navigateur est aux normes et les applique même si le document n’est pas standard, dans ce cas vous devriez obtenir le même rendu que précédemment ;
votre navigateur possède un système de dégradation pour mimer le comportement de Microsoft Internet Explorer et dans ce cas vous obtenez un résultat différent.
[Résultat]
Dans mon cas, Iceweasel choisit de ne pas mimer le comportement désastreux d'Internet Explorer..
61.2.2. Le rendu des règles CSS
Le second exemple va nous démontrer qu’en fonction du document et de sa validité, les règles de base des CSS peuvent ne pas être respectées.
Le document va devoir afficher un simple terme dans un élément « <span> ». Vous allez définir une largeur de 200 pixels à ce span et lui mettre une couleur d’arrière plan rouge pour bien le visualiser. Pour des raisons évidentes de simplicité, vous allez utiliser l’attribut "style" pour définir les styles de présentation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> </head> <body> <p> <span style="width: 200px; background-color: red;">mon exemple</span> </p> </body> </html>
[Résultat]
Vous observez que l’élément "span" ne fait pas la dimension demandée, à savoir 200px. Ce comportement est NORMAL, un span est un élément en ligne (inline) et ses dimensions sont définies par son contenu comme expliqué dans le cours.
À présent, tout comme pour l’exercice précédent, supprimez le DOCTYPE pour rendre le document invalide et affichez ce dernier sous Mozilla. Vous ne devriez pas constater de différence car ce navigateur respecte assez bien les recommandations du W3C que le document soit standard ou pas. Si maintenant on observe le rendu sous Microsoft IE, on a un tout autre résultat.
Internet Explorer ne respecte plus vraiment la recommandation CSS et autorise le redimensionnement des éléments en ligne.
Vous venez d’avoir la preuve qu’en fonction des navigateurs et de la déclaration du DOCTYPE, on peut avoir des résultats très différents. Il est donc vivement conseillé de se baser sur le model de boîte du W3C et d’utiliser une DTD qui permet ce fonctionnement pour éviter tous les problèmes de mises en page qui pourraient survenir en fonction des différents navigateurs. L’oubli de déclaration Doctype est souvent la cause des différences de mise en page observés entre IE et Firefox, bien structurer et valider son document XHTML, c’est éviter par la suite un grand nombre de problèmes de présentation.
61.3. Le positionnement en CSS
Le positionnement CSS est sans doute la partie la plus difficile à maîtriser. Elle fait intervenir beaucoup de notions et dépend de beaucoup de facteurs différents. Ce petit exercice est fait pour vous permettre de mettre certaines choses à plat et de mieux appréhender les multiples possibilités de positionnement des éléments.
61.3.1. Exemple de base
Pour nos besoins, nous utiliserons le document XHTML suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Atelier CSS - Exercice</title> </head> <body> <div id="article"> <h1 id="titre">Titre de mon article</h1> <p id="paragraphe1"> <img id="image1" width="179px" height="150px" src="image1.png" alt="description image 1" /> Kefka Palazzo, also known as Lord Kefka upon ascension to Godhood, is the primary antagonist and the final boss of Final Fantasy VI. Kefka acts as Emperor Gestahl's court mage early in the game, carrying out the emperor's orders. However, behind Gestahl's back, Kefka attacks various towns and drains the espers' power meant for Imperial use. This gradual culmination in power leads Kefka to overthrow Gestahl and take control of the Warring Triad, effectively becoming the God of Magic itself. </p> <p id="paragraphe2"> <img id="image2" width="141px" height="190px" src="image2.png" alt="description image 2" /> Emperor Gestahl is a non-player character in Final Fantasy VI. He is the dictator and ruler of the Gestahlian Empire, and at first appears to be the game's primary antagonist. In the Japanese version, his name is Emperor Gastra. He is fifty years old during the events of the game. </p> </div> </body> </html>
Ce document représente un petit article. Comme vous pouvez l’observer chaque élément possède un attribut "id" pour facilement être désigné par les CSS.
61.3.2. Flux XHTML (ou HTML)
Affichez ce document dans un navigateur. Vous obtiendrez un rendu sans présentation. Les informations apparaîtront comme elles se présentent dans la source du document. Les éléments inline seront les uns sous les autres et les éléments inline les uns à coté des autres. Ce mode de positionnement est appelé le flux XHTML ou flux HTML.
[Résultat]
61.3.3. Elements flotants
Saisissez la règle CSS suivante dans votre fichier CSS :
#image1 { float: right; }
Observez le résultat :
[Résultat]
On dit que la propriété CSS float fait sortir l’élément du flux pour le positionner à gauche ou à droite de son élément parent (ici le paragraphe). Vous pouvez également voir que le second paragraphe remonte sur le coté de l’image en float, ce n’est pas toujours ce qui est souhaité, pour éviter au second paragraphe de remonter et le forcer à rester sous le premier, vous pouvez utiliser la propriété "clear".
#paragraphe2 { clear: right; }
[Résultat]
61.3.4. Positionnement absolu
Nous allons maintenant mettre en évidence le positionnment absolu, en mettant la seconde image à 5 pixels du bord bas du navigateur et à 10 pixels du bord gauche. Pour cela, enregistrer la règle suivante :
#image2 {
position: absolute;
bottom: 5px;
right: 10px;
}
Vous obtenez le résultat suivant :
[Résultat]
61.3.5. Positionnement relatif
Si vous définissez l’élément article "div" en position relatif alors, le positionnement absolu se fera à partir du div et non plus à partir du navigateur. L’utilisation du positionnement relatif et absolu rend donc possible le chevauchement des éléments.
#article {
position: relative;
left: 100px;
width: 50%;
}
[Résultat]
61.3.6. Conclusion
Il n’est pas possible de passer en revue toutes les possibilités de positionnement et les problèmes qui peuvent être rencontrés. Lorsque vous devez mettre en page un document, réfléchissez bien sur sa structure et la manière d’organiser les éléments avant de vous lancer dans l’écriture des styles. Pensez également à consulter les sites d’informations spécialisés comme la section CSS d’openweb et les sites fournissant des gabarits de positionnement d’éléments pré-construits.
61.4. Validation du travail
Tout comme pour le XHTML, la dernière étape de l’atelier sera la validation. Vous allez encore une fois utiliser l’outil mis à disposition par le W3C à l’adresse suivante pour vous assurer de la validité et de la conformité de vos créations.
Le fonctionnement de cette application web est identique à celui du validateur XHTML. Je vous laisse donc le soin de l’utiliser pour valider votre feuille de style.
Après soumission de votre fichier, la page de résultat pourra vous indiquer trois choses :
"Erreurs" ;
"Avertissements" ;
"Aucune erreur ou avertissement".
Dans le premier cas, votre fichier CSS comporte des erreurs et l’outil vous indiquera les lignes qui posent problèmes. Le libellé des erreurs n’est pas toujours très facile à comprendre, mais la plupart du temps l’erreur est dû à une accolade mal fermée en fin de règle ou à un point virgule oublié entre deux propriétés.
La notation "Avertissements" ne correspond pas à une erreur, c’est un point que le validateur ne peut pas vérifier automatiquement et qu’il vous indique comme pouvant poser problème. Si la page de résultat indique des avertissements sans indiquer d’erreur alors votre document est valide.
Le dernier résultat "Aucune erreur ou avertissement" correspond à un fichier CSS très bien fait. Vous pouvez maintenant modifier et / ou compléter votre fichier CSS de façon à ce qu’il ne comporte ni erreurs ni avertissements ; vous aurez alors un document XHTML valide et porteur de sens et une présentation conforme aux recommandations du W3C.
Vérifions maintenant mes feuilles de styles :
La feuille de style du projet CV ;
La feuille de style pour impression ;
