[PDF] Document de formation HTML et CSS approfondie | Cours html

(1)

Formation Pratique au Découpage CSS/XHTML

1. Théorie

HTML et CSS : Standards Web

Avant les CSS, le manque de contrôle graphique du HTML a conduit les graphistes à détourner le langage, exemple: l'utilisation de tableaux et d'images transparents pour servir de grille de mise en page.

Les avantages des standards :

- Développement et maintenance simplifiés : les CSS peuvent être

regroupées dans un fichier externe et appliquées à l'ensemble des pages HTML d'un site.

- Une modification sur l'ensemble du site peut se faire par la modification d'un seul fichier.

- Compatibilité avec les futurs navigateurs Web - Meilleure accessibilité

- Meilleur positionnement dans les moteurs de recherche - Adaptation simplifiée

(2)

Validation

On appelle " validation " le processus consistant à contrôler que le document obéit aux règles du langage (HTML) qu'il utilise.

La validation est une étape importante du développement Web. Beaucoup d'erreurs difficiles à déceler apparaissent lors de cette phase. Celles-ci peuvent être aussi triviales qu'une faute de frappe ou, au contraire, contenir une syntaxe de balise ou d'attribut invalide.

Il n'y a que des avantages à valider son HTML et sa CSS. (X)HTML : Validateur de code (X)HTML du W3C

http://validator.w3.org/

CSS : Validateur de code CSS du W3C

http://jigsaw.w3.org/css-validator/validator-uri.html

HTML et XHTML

le XHTML est une reformulation du HTML avec une syntaxe XML : Doctype, balises fermées, attributs entre guillemets, minuscules...

Cascading Styles Sheet

Conçues pour gérer l'aspect visuel des documents internet (HTML et XHTML servent à décrire la structure d'un document).

Le concept de feuille de styles vient de l'impression : définition de "styles"

typographiques réutilisables dans un but de cohérence et de productivité. Les feuilles de styles internet ont en plus l'avantage de séparer l'aspect graphique de l'aspect données dans une page HTML, ce qui a des répercussions en terme d'accessibilité, d'exploitation et d'échange de données.

(3)

Appliquer des styles CSS à une page HTML Styles En Ligne

Les styles sont écrits à l'intérieur des balises HTML à l'aide de l'attribut style. En général cette méthode est à éviter car elle mélange les CSS au code HTML, présentation et données. Cependant, dans le contexte K-Sup, où la mise en page des page libres est paramétrable par l'utilisateur, elle se révèle indispensable. En effet, la largeur des paragraphes, une caractéristique visuelle, n'est connue qu'au moment où la page JSP est interprétée par le serveur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head> <body>

<p style="width: 50%; color:red;">Ceci est un paragraphe moitié moins large que la fenetre du navigateur</p>

</body> </html>

(4)

Styles Internes

Les styles se trouvent dans la section <head> de la page HTML

Cette méthode permet d'éviter la redondance des styles en-ligne, mais ne permet pas de factoriser des styles pour plusieurs pages.

Elle peut-être pratique en phase de conception, pour éviter des aller-retours entre fichiers CSS et HTML.

<p>Ceci est un paragraphe</p> </body>

</html>

(5)

Styles Externes

Les styles se trouvent dans un fichier texte externe avec l'extension .css. La page HTML pointe vers ce fichier CSS dans la section

<head>.

C'est la meilleure méthode, elle permet de factoriser les styles pour l'ensemble d'un site.

exemple: fic hi er CS S : p { col or :r ed ; } page HTML :

<title>Exemple</title>

<body>

<p>Ceci est un paragraphe</p> </body>

</html>

href="styles.css" le chemin vers le fichier CSS peut être indiqué de façon relative (comme ici) ou de façon absolue (

href="/jsp/css/styles.css" ). Si ce chemin est erroné, le navigateur n'appliquera pas les styles.

Note

Le serveur web installé avec K-Sup effectue une re-écriture d'URL pour des raisons de référencement. Par conséquent, lors de découpes K-Sup, tous les chemins doivent être absolu (la racine est le répertoire de

l'application). ex:

(6)

#colonne-verte { background-image: url(/images/col-verte.gif); } Commentaires

A l'intérieur d'une feuille de style (dans un fichier .css ou entre des balises <style>) un commentaire commence par /* et finit par */. p { color:red; } /* ceci est un commentaire */

Sélecteurs, Propriétés et Valeurs

En HTML on a des balises, en CSS on a des Sélecteurs.

Les sélecteurs indiquent à quel élément HTML on attribue des styles. body {

color: navy; font-size: 2em; }

Chaque sélecteur (ex : body) est suivi d'une liste de propriétés (ex : color, font-size... ) entre accolades { ... }

Chaque propriété est suivie de ' : ', d'une valeur (ex : navy, 0.8em... ) et d'un ' ; '

Quand cette portion de CSS est ajoutée à une page, le text se trouvant dans le <body> ( tout le contenu de la page) aura la taille 0.8 em et sera bleu marine.

Unités et Pourcentages

Il y a beaucoup d'unités spécifiques utilisées en CSS, les plus utilisées sont :

'em' (font-size: 2em) unité typographique relative (largeur d'un M majuscule pour une taille de police donnée). Correspond

approximativement à la hauteur d'un caractère. En général la taille de police par défaut des navigateurs est 12px, donc font-size:2em; nous donnera des caractères de 24 px de haut.

'px' (font-size: 12px) pixel. Unité réservé aux écrans (Attention dans IE l'utilisation de cette unité pour les tailles de police empêche l'utilisateur de zoomer son texte)

'pt' (font-size: 12pt) unité typographique fixe ... utile pour les feuilles de styles d'impression (10pt est une taille courante)

'%' (font-size: 80%) pourcentage... dans le cas présent 80% de la

(7)

Note

L e s u n i t é s d o i v e n t s u i v r e n t l e s v a l e u r s s a n s e s p a c e , q u a n d u n e v a l e u r e s t n u l l e i l e s t i n u t i l e d e s p é c i f i e r l ' u n i t é ( e x : b o r d e r : 0 ; ) C o u l e u r s

Les CSS permettent d'utiliser 16,777,216 couleurs différentes. Elles peuvent être spécifiées de façon différente :

en utilisant un nom parmi les 16 pré-définies : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, et yellow.

transparent est une valeur valide p { color:red; }

en utilisant 3 composantes Rouge, Vert, Bleue dont les valeurs sont comprises entre 0 et 255 p { color:rgb(255, 0,0); } p { color:rgb(100 %,0,0); }

en utilisant un code hexadécimal commençant par #. L'écriture compressée #123 peut remplacer #112233

p { color:# ff0000; } p { color:# f00; }

Les couleurs sont appliquées par l'intermédiaire des propriétés color (pour le texte) et background-color.

Attention c'est l'orthographe américaine 'color' et pas anglaise 'colour'. par exemple un titre bleu sur un fond jaune s'écrit ainsi :

h1 {

color: yellow;

background-color: blue; }

On peut utiliser ces propriétés sur la plupart des éléments HTML, par

(8)

body { color: red; } spécifie la couleur rouge pour l'ensemble du texte de la

page.

Texte

La taille et la forme du texte d'une page peuvent être modifiées par l'intermédiaire des propriétés suivantes :

font-family

Cette propriété spécifie le nom de la police à utiliser. Cette police doit se trouver sur la machine de l'utilisateur pour qu'elle puisse être utilisée.

Les polices les plus répandues sont Arial, Verdana, Helvetica en sans-serif, Times New Roman en serif et Courrier en monospaced.

Il est possible de fournir une liste de polices alternatives sur lesquelles le navigateur se rabattera en cas de besoin.

Il existe des noms de famille générique comme serif, sans-serif, monospaced qui indique au navigateur dans quelle famille de police il doit choisir, si aucune des polices spécifiées n'a été trouvée.

body { font-family: "lucida grande", arial, helvetica, sans-serif; } utilise "lucida grande", sinon utilise arial, sinon utilise helvetica, sinon utilise une police sans-serif

font-size

La taille de la police en px, en em ou en %. Attention à ne pas utiliser une balise <p> avec une police de grande taille à la place d'une balise titre h1, h2 , etc... (sémantiquement ce n'est pas pareil)

font-weight

spécifie la graisse de la police. p { font-weight: bold; }

font-style

spécifie si une police est italique ou non. p { font-style: italic; }

text-decoration

spécifie le type de soulignage d'une section de texte ; valeurs possibles : overline, underline, line-through, none

La valeur underline devrait être réservée aux liens hypertextes car les utilisateurs s'attendent a ce qui est souligné soit un lien.

(9)

text-transform

Cette propriété contrôle la casse du texte ; valeurs possibles : capitalize, uppercase, lowercase, none

capitalize : première lettre en majuscule uppercase : tout en majuscule lowercase : tout en minuscule none : pas de transformation Espacement Texte

La propriété line-height spécifie l'interlignage ou la hauteur de l'espacement entre les lignes ; valeurs possibles : normal, un pourcentage ou une valeur numérique.

La propriété text-align contrôle l'alignement du texte à l'intérieur d'un bloc ; valeurs possibles : left, right, center et justify.

La propriété text-indent indente la première ligne d'un paragraphe ; valeurs possibles : valeur numérique.

p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em; text-align: center; } Marge et Espacement

Marge (margin) et Espacement (padding) sont les deux propriétés les plus utilisées pour contrôler l'espacement des éléments HTML.

Une marge c'est de l'espace extérieur à l'élément, un padding c'est de l'espace intérieur à l'élément.

h2 { font-size: 1.5em; background-color: #ccc; m ar gi n: 9

(10)

1 e m ; p a d di n g: 3 e m ; }

Chacun des quatres côtés de l'élément peuvent être contrôlés individuellement en utilisant les propriétés suivantes : margin-top, margin-right, margin-bottom, marginleft, padding-top, padding-right, padding-bottom et padding-left. Le modèle de boite mod-css.png ¨ en savoir plus : http://openweb.eu.org/articles/dimensions_boites_css/ Bordures

La propriété border-style spécifie le style graphique de la bordure ; valeurs possibles : solid, dotted, dashed, double, groove, ridge, inset et outset.

La propriété border-width indique l'épaisseur de la bordure ; valeur généralement en pixels.

La propriété border-color spécifie la couleur. Exemple : h2 {

border-style: dashed;

border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red;

}

(11)

Classes et Sélecteurs d'ID

Jusqu'ici nous avons seulement parlé de sélecteurs HTML -- comme BODY, H1 ou P Vous pouvez aussi définir vo propres sélecteurs sous la forme de classes ou d'Ids. Leur intérêt est de différencier des éléments HTML de nature identique -- par exemple avoir deux paragraphes graphiquement différents.

En CSS, un sélecteur de classe est un nom précédé d'un point (.) et un sélecteur d'id est un nom précédé d'un dièse (#).

Le nom doit commencer par une lettre et peut comprendre lettres, chiffres, tiret et tiret-bas. Les majuscules et les minuscules sont autorisées ( puisqu'en XHTML tout est en minuscule, j'utilise toujours des minuscules )

Exemple : #top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }

L'HTML se réfère aux CSS avec l'utilisation des attributs 'id' et 'class' : <div id="top">

<h1>Les Classes et les IDs</h1>

<p class="intro">Ceci est un paragraphe de classe intro</p> <p class="intro">Voici un autre paragraphe de classe intro</p> </div>

La différence entre un id et une classe, c'est qu'un id ne peut être utilisé pour identifier qu'un seul élément, tandis qu'une classe peut être utilisée pour plusieurs éléments.

en savoir plus : http://developpeur.journaldunet.com/tutoriel/css/040407-css-difference-id-class.shtml

Regroupement et Hiérarchie

(12)

Regroupement

On peut donner les mêmes propriétés à un groupe de sélecteurs sans avoir à les répéter en séparant les sélecteurs par des virgules

Exemple, au lieu de : h2 { color: red; }

.uneClasse { color: red; } .uneAutreClasse { color: red; } on peut écrire :

h2, .uneClasse, .uneAutreClasse { color: red; }

Hiérarchie

Vous pouvez réduire le nombre de sélecteurs de classe ou d'id que vous utilisez. On peut sélectionner un élément à partir de son (élément) parent :

#top {

background-color: #ccc; padding: 1em

}

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold; }

Ces CSS rendent superflue l'utilisation de classes ou d'ids supplémentaires lorsqu'elles sont appliquées à l'HTML qui suit :

<h1>Trop de Classes !</h1>

<p>On peut reduire le nombre de classes et d'Ids utilises</p> <p>ce qui facilite la maintenance</p>

</div>

En séparant les sélecteurs par des espaces :

#top h1 on dit : "le titre h1 situé dans l'élément ayant pour id, top" #top p on dit : "le paragraphe situé dans l'élément ayant pour id : top"

Pseudo Classes

Les pseudo classes dénotent l'état particulier d'un sélecteur.

Elles s'écrivent sous la forme sélecteur:pseudo-classe { propriété: valeur; }

(13)

Beaucoup des pseudo classes définies dans la norme CSS ne sont pas supportées par tous les navigateurs, cependant

il en existent quatre qui peuvent être utilisées avec les liens hypertextes. :link pour un lien non visité

:visited pour un lien visité

:hover pour un lien se trouvant sous le curseur

:focus pour un lien sélectionné avec le clavier (accessibilité) :active pour un lien que l'on clique (peu utilisé)

a:link { color: blue; } a:visited { color: purple; } a:hover { text-decoration: none; color: blue; background-color: yellow; } a:active { color: red; } Notes

Il est important de respecter l'ordre des déclarations ci-dessus si on veut éviter des conflits de classe.

Petit truc : LoVe / HAte pour Link - Visited - Hover - Active

S'il est possible de choisir de ne pas différencier l'état visité des liens hypertextes en CSS, il faut savoir que c'est une bonne idée de le faire, c'est un plus ergonomique. La norme CSS prévoit l'utilisation de la pseudo classe :hover sur d'autres éléments que des liens. Malheureusement Internet Explorer ne supporte pas cette technique.

Pseudo Eléments

Comme les pseudo classes un pseudo élément est s'écrit attaché à l'élément auquel il s'applique :

sélecteur:pseudo-élément { propriété: valeur; }

(14)

First letters et First line

The first-letter pseudo element applies to the first letter of an element and first-line to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:

Le pseudo élément first-letter désigne la première lettre d'un élément. first-line désigne la première ligne d'un élément. On peut les utiliser pour créer des lettrines par exemple. p:first-letter { font-size: 3em; float: left; } p:first-line { font-weight: bold; }

Before and after

Les pseudos éléments :before et :after sont utilisés en conjonction avec la propriété content pour générer du contenu avant ou après un élément sans toucher au code HTML.

La valeur de la propriété content peut être open-quote, close-quote, des caractères entre guillemets ou une image url(chemin/vers/image).

blockquote:before { content: open-quote; } blockquote:after { content: close-quote; } li:before { content: "-> " } p:before { content: url(images/jam.jpg) } a:link:after, a:visited:after { content: " (" attr(href) ") "; } Note

Malheureusement IE ne supporte pas les pseudo sélecteurs :before et :after !

(15)

Cascade

Par cascading dans Cascading Styles Sheet on entend le résultat du cumul de

différents styles appliqués à un même élément. Si les propriétes sont différentes, elles sont cumulées. En cas de propriétés identiques c'est la dernière valeur de la propriété qui est prise en compte.

Exemple:

p { color: red; } p { color: green; } p { color:blue; }

<p>De quelle couleur suis-je ?</p>

Spécificité

La cascade nous dit ce qu'il se passe lorsqu'on associe plusieurs styles à un sélecteur identique, mais que se passe-t-il lorsque plusieurs sélecteurs ciblent des éléments communs et définissent des propriétés communes? Quelle propriété est appliquée ? Exemple:

p { color: red; }

body p { color:yellow; } .blue { color:blue; } p.green { color: green; } #purple { color:purple; }

<p>De quelle couleur suis-je ?</p>

Pour régler ce genre de conflit, on se réfère au concept de spécificité : chaque

sélecteur a une priorité différente ; plus il est spécifique, plus sa priorité est grande. Pour résoudre l'éventail des différents scénarios,chaque grand type de sélecteur est pondéré en fonction de sa spécificité :

Note

Attention, les problêmes de styles qui "n'apparaissent pas" dus à des conflits de spécificité sont monnaie courante.

Ce n'est pas toujours évident. Exemple:

.conteneur a { color:red; } .vert { color:green; }

(16)

<a href="#" class="vert">de quelle couleur suis-je?</a> </div>

Ecriture Condensée

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.

Certaines propriétés CSS permettent l'utilisation d'un groupe de valeurs séparées par des espaces pour remplacer un groupe de propriétés :

Exemple : p { border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 20px; } peut s'écrire : p { border-width: 1px 5px 10px 20px; }

border-width, border-color et border-style peuvent aussi être condensé avec la seule propriété border :

p { border: 1px red solid; }

Lorsqu'il existe une symétrie dans le groupe de valeurs, l'écriture peut encore être condensée :

p { margin: 1em 0 1em 0; } peut s'écrire :

p { margin: 1em 0; }

Les propriétés relatives à une police peuvent être rassemblées sous la propriété font : p {

font-style: italic; font-weight: bold;

font: italic bold 1em/1.5 courier; font-size: 1em;

line-height: 1.5; font-family: courier; }

(17)

peut s'écrire : p {

font: italic bold 1em/1.5 courier; }

Images de Fond

Il y a plusieurs propriétés qui régissent les images de fond (des images de fond d'élément HTML par opposition à l'élémént HTML <img>)

Ces propriétés peuvent être condensées avec la propriété background : div.bgd {

background: white url(images/bg.gif) no-repeat top right; }

Elle regroupe les propriétés suivantes :

background-color couleur de fond

background-image chemin vers le fichier image

background-repeat la façon dont l'image se répète ; valeurs possibles : repeat (répétition horizontale et verticale), repeat-y (répétition verticale), repeat-x (répétition horizontale) et no-repeat (l'image n'est pas répétée).

background-position position horizontale et verticale de l'image vis à vis de l'élément ; valeurs possibles top, center, bottom, left, right ou deux valeurs

Les images de fond sont très utiles pour les éléments décoratifs d'une charte (comme les arrondis d'une boite) par opposition au contenu visuel du site (vignette d'un

article...). Utiliser des images de fond avec des CSS permet de simplifier le fichier HTML.

Note

Attention ! Une image utilisée dans une feuille de styles externe, doit être référencée par rapport à la feuille de styles) et non pas par rapport au fichier .html (ou .jsp dans K-Sup)

Note

Les images de fond ne s'impriment pas.

Propriété Display

Chaque élément HTML comprend un certain nombre de propriétés récurrentes ayant une valeur par défaut comme les marges, les espacements ... et la propriété display. Cette propriété définit plusieurs types d'élément auxquels est liée une représentation 17

(18)

graphique particuliére :

Les 3 types principaux que nous allons voir sont : inline, block et none.

inline Les éléments avec display: inline sont formatés le long d'une ligne, si la largeur n'est pas suffisante ils continuent sur la ligne suivante. Les éléménts <a>, <strong>, <i> etc... sont par défaut de type inline.

block Les éléments avec display: block sont précédés et suivis d'un retour à la ligne. Les éléments <h1>, <h2> ... <h6> et <p> sont par défaut de type block. none Les éléments avec display: block ne sont pas représentés. Ca peut paraître idiot mais il y a beaucoup de situations où c'est utile.

Exemple:

<h1>Titre</h1>

<p>Ceci est un chapeau qui se trouve sous le titre et présente brièvement l'article qui suit</p>

si on y associe les CSS suivantes : h1 { display: inline; } #header p { display: inline; padding-left: 2em; }

Le titre et le chapeau sont alignés. ex -->

La déclaration suivante pourrait être utilisée dans une feuille de styles d'impression pour éviter d'imprimer la barre de navigation d'une page (dans l'idée de n'imprimer que le contenu d'une page...)

#navigation { display: none; }

en savoir plus : http://pompage.net/pompe/impression/ Note

La différence entre display: none et visibility: hidden est que un élément rendu invisible avec visibility: hidden occupe la même place (vide dans ce cas) que

lorsqu'il est visible. Alors qu' un élément avec display: none disparait sans occuper d'espace comme s'il était absent du code HTML.

ex -->

(19)

Tables

en savoir plus : http://pompage.net/pompe/autableau/ Note

Les tables HTML devrait idéalement être utilisée uniquement pour présenter des donnés tabulaires.

Autres types display

list-item par défaut, c'est le type d'un élément <li>, en fait list-item s'apparente à block mais il rajoute la notion de 'marker' (la puce d'un élément de liste).

(20)

Mise en Page CSS

Il faut commencer par identifier les blocs qui constituent le squelette de la page à maquetter, le bandeau, le menu, les colonnes, le pied de page etc...

Il faut ensuite utiliser le bon mode de positionnement pour agencer ces différents blocs.

Positionnement

La propriété position définit le mode de positionnement et peut prendre les valeurs suivantes : absolute, relative, static ou fixed

La valeur par défaut est static. Les éléments ne sont pas positionné, leur position dépend de l'ordre de leur apparition dans le code HTML.

relative est similaire à static, mais les éléments peuvent être déplacés relativement à leur position d'origine à l'aide des propriétés top, right, bottom et left.

Ils laissent un trou là où ils auraient du être s'ils n'avaient pas été positionné. ex -->

absolute sort un élément du flux HTML (ne prend pas de place et n'affecte pas les éléments qui suivent) et le place dans un référentiel où il peut être positionné avec les propriétés top, right, bottom et left. Par défault, ce référentiel a pour origine le coin en haut à gauche de la page HTML

ex -->

tout élément (<div>, <p> etc...) dont la propriété position vaut absolute, fixed ou relative, crée un nouveau référentiel pour les éléments positionné en absolu qu'il contient.

ex -->

fixed est similaire à absolute, mais le référentiel est la fenêtre du navigateur et non pas la page HTML, c'est a dire que l'élément reste théoriquement exactement où il se trouve si on déplace la page avec un ascenceur (scrollbar). En théorie seulement car si cette technique marche dans Mozilla ou Opéra, elle ne marche pas du tout dans IE. Mise en page en absolu

On pourrait créer une page avec deux colonnes de contenu à l'aide de positionnement absolu de la façon suivante :

<div id="menu"> <ul> < l i > < a h r e f = " p a g e 1 . h t m l " > o p t i o n 1 < / a > < / l i > < l i > < a h r e f = " p a g e 2 . h t m l " > o p t i o n 2 < / a > < / l i > < l i > < a h r e f = " p a g e 3 . h t m l " > o p t i o n 3 < / a > < / l i > < / u l > </div> 2 0

(21)

<div id="contenu"> <h1>Titre</h1>

<p>Lorem ipsum qualisque scribentur mea ne, quodsi aeterno vis an. Laudem labitur an ius, eam no debet veniam eruditi. Delenit pericula splendide cum ei, an per eros elaboraret, no vix partem senserit. Sea an eros possit</p>

<p>Sed an agam mazim oporteat, vim ex accusam mediocritatem. Ea nihil sententiae mel, ad vel accusam offendit, sea at nobis mucius. Ei has malis luptatum persecuti, ei dicta impedit tincidunt usu, enim voluptua ei quo. Ea sit utamur latine imperdiet, mentitum repudiare quaerendum ius et.</p>

</div> avec les CSS: #menu { position: absolute; top: 0; left: 0; width: 200px; } #contenu { margin-left: 200px; }

Le menu est positionné en absolu en haut à gauche de la page avec une largeur de 200 pixels.

La colonne de contenu principal a une marge gauche de 200 pixels, pour faire de la place au menu. Si cette marge gauche a une valeur inférieure, on constate que le menu chevauche le contenu principal sans interférence, ils ne sont pas au même étage !

Simple non ? Un autre avantage est l'indépendance total de l'ordre des éléments dans le code HTML avec le rendu graphique. C'est utile pour placer la zone de contenu en premier dans le source pour les utilisateurs de lecteurs d'écrans.

ex -->

On peut ajouter une troisième colonne comme ceci : #menu { position: absolute; top: 0; left: 0; width: 200px; } 2 1

(22)

#encadres { position: absolute; top: 0; right: 0; width: 200px; } #contenu {

margin: 0 200px; /* marges haut et basse à zéro, marges gauche et droite à 200px */

}

Le problème majeur de l'utilisation d'éléments positionnés en absolu c'est qu'ils ne sont plus dans le flux, ils existent dans leur bulle. Il devient très dur de les faire cohabiter dans une page dynamique (c'est à dire dont le contenu et les dimensions peuvent varier).

Exemple : si on reprend notre exemple précédent et qu'on ajoute un pied de page, on voit que si l'une des colonnes positionnée est plus grande que la colonne centrale le pied de page est recouvert...

Pourquoi ? Parce que le pied de page se trouve dans le flux après la colonne centrale. Sa position dépend de la hauteur de celle-ci, pas des colonnes positionées.

Si on veut utiliser des colonnes tout en gardant une certaine flexibilité, avec un pied de page par exemple, il faut utiliser des flottants.

Flotter et Flottants

Flotter un élément le déporte sur la gauche ou la droite aussi loin que possible ( les limites du bloc parent ou d'un autre flottant ) ; le contenu environnant lui fait de la place.

Le type display d'un élément flotté devient block .

Si on reprend notre example précédent et qu'on change les CSS par : #menu { float: left; width: 200px; } #navigation2 { float: right; width: 200px; } #content { margin: 0 200px; } 2 2

(23)

On remarque que les flottants doivent précéder la colonne centrale dans le code HTML pour que les colonnes soient alignées.

Pour forcer un élément à apparaitre en dessous d'un flottant il faut utiliser la propriéte clear.

clear : left pour un flottant gauche, clear : right pour un flottant droit, clear both pour les deux types de flottants.

donc si on ajoute: #footer {

clear: both; }

Et voilà! Un pied de page qui apparaitra toujours en dessous de la colonne la plus longue.

@import Importer

@import permet d'importer des styles CSS dans une page HTML comme <link> : <style type="text/css"

media="all"> @import url(monkey.css); </style>

@import permet aussi d'importer des styles dans un fichier CSS externe (dans ce cas là, @import doit être placé au début du fichier)

L'intérêt de cette méthode est que les anciens navigateurs (et notamment le plus utilisé d'entre eux Netscape 4.x) ne comprennent pas cette directive et ne chargeront pas les styles. On peut ainsi fournir un contenu non stylé aux vieux navigateurs et les styles graphiques aux navigateurs modernes sans détection javascript.

Types de média

la directive @media sélectionne le type de média auquel on destine les CSS.

Exemple:

@media print { body {

font-size: 10pt;

font-family: times new roman, times, serif; }

(24)

#navigation { display: none; }

} Note

On peut aussi écrire <link rel="stylesheet" type="text/css" href="impression.css" media="print" />

Les différents types de média sont : all - tous (défaut si rien n'est spécifié) aural - lecteurs d'écran

handheld - PDA print - imprimante

projection - (rétro)projecteurs. screen - écrans d'ordinateur. Note

Les seuls types supportés par IE sont : all, screen et print. 2. Méthodologie

2.1 Outils et Navigateurs

J'utilise Firefox lors de la phase de conception à cause du très bon support CSS des navigateurs Mozilla et du nombre d'outils gratuits disponibles pour ce navigateur (les extensions : https://addons.update.mozilla.org/).

Il existe une extension indispensable qui s'appelle "Web Developer", disponible ici : http://www.chrispederick.com/work/firefox/webdeveloper/

parmi les fonctions les plus intéressantes : - désactiver/activer les CSS

- indiquer quels images n 'ont pas d'attribut ALT - afficher les IDs et les Classes

- affichage des blocs

- validation en ligne et locale du (X)HTML et des CSS

Une fois que la page est découpé, je teste sous IE6 (notre cible principale) et d'autres navigateurs ( IE 5.0 et IE 5.5, IE Mac, Safari, Netscape )

Des packages de IE 5.0 et IE 5.5 pour PC sont téléchargeables à : http://www.skyzyx.com/downloads/

Ils rendent possible la coexistence des plusieurs versions de IE sur une même machine

24 2 5

(25)

2.2 Découpe

Les éléments (X)HTML ont des styles par défaut (exemple un paragraphe <p> a une marge haute et basse).

Ces styles peuvent varier d'un navigateur à l'autre. Je commence toujours ma découpe en réinitialisant les styles par défaut, ce qui facilite grandement la phase de conception, notamment lorsqu'on travaille avec des formulaires HTML.

On réinitialise les styles comme ceci:

/* Toutes les marges et remplissages sont mis à zéro */

/* sauf l'élément paragraphe <p> car la toolbox utilise cet élément */ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,blockquote,fieldset,in put { margin:0; padding:0 }

/* on utilise les listes pour structurer nos menus - on élimine donc la puce */ ul,ol { list-style:none }

/* si on ne veut pas de bordure bleue sur les images-liens */ a img,:link img,:visited img { border:none } 2.3 Relier les CSS à l'(X)HTML Ecriture recommandée :

href="css/mise_en_page.css" /> <style type="text/css" media="screen" href="css/page_libre.css" /> <style type="text/css" media="print" href="css/impression.css" />

2.4 Hacks

En CSS, on appelle "hack" le fait d'exploiter un bug d'un navigateur (en général dans l'interprétation des sélecteurs) pour corriger un autre bug (de rendu graphique).

Exemples de hacks utilisés pour IE: - le sélecteur étoile

(26)

hack

* html p { color: green; }

Seul IE (IE 5, IE 5.5, IE 6 et IE Mac) reconnait cet écriture, et il est donc le seul à appliquer ce style.

- les commentaires conditionnels (une fonction propriétaire

Microsoft) permet de cibler la version d'IE à laquelle on délivre un bout de HTML

http://msdn.microsoft.com/workshop/author/dhtml/overview/cco mment_ovw.asp

<!--[if IE] >

< link rel="stylesheet" href=" ie.css" media="screen" /> <![endif]-- >

Seul IE PC utilisera la feuille de syle ie.css

- Hack du modèle de boite (pour IE5.0 et IE5.5 PC) * html p {

font-size: 75%; /* tous les IE voient ceci grace au

sélecteur étoile hack*/ f\ont-size: 90%; /* IE 5.0 et Ie 5.5 ne voient pas cette ligne a cause de l'antislash présent dans le nom de la propriete */

}

Exemples de hacks utilisés pour IE Mac : - Antislash hack:

/* debut du hack : IE mac ne voit pas ce qui suit \*/ p { color : green; } /* fin du hack */

autre utilisation possible, en combination avec le sélecteur étoile on peut écrire des styles uniquement pour IE PC :

/* debut du hack \*/ * html p { color: green; } /* fin du hack */ 2 7

(27)

Seul IE PC affichera des paragraphes de couleur verte. - filtre IE5 Mac :

IE5 Mac est le seul navigateur à utiliser iemac.css 2.5 Bugs d'Internet Explorer

Pour les anglophones, Il existe une référence extraordinaire qui documente les bugs des navigateurs PC ( principalement IE ) Le site s'appelle "Position is everything" :

http://www.positioniseverything.net Modèle de boite érroné

(IE 5.0 et IE 5.5) Texte inzoomable

Taille du texte incorrecte (IE 5.0 et IE 5.5) Flottants à double marge

Modèle de flottant érroné 3 Références et

Ressources 3.1 En Français

Traduction des recommendations techniques CSS1 et CSS2 : http://www.yoyodesign.org/doc/w3c/css1/index.html http://www.yoyodesign.org/doc/w3c/css2/cover.html Les standards du web:

2 8 2 9

(28)

http://www.cybercodeur.net/weblog/presentations/dwws/index.html http://developpeur.journaldunet.com/dossiers/standards-web.shtml Liste des propriétés CSS :

http://dicolive.media-box.net/docCSS/css.php?orderByType=1 Accessibilité: http://www.acces-pour-tous.net/ http://www.accessiweb.org/ http://openweb.eu.org/ Ressources et Techniques: http://pompage.net/ http://openweb.eu.org/ http://www.opquast.com/ Validation: http://validator.w3.org/ http://jigsaw.w3.org/css-validator/validator-uri.html 3.2 En Anglais Techniques et astuces: http://www.alistapart.com http://css-discuss.incutio.com/ Bugs des navigateurs:

http://www.positioniseverything.net Methodologie et tutoriels :