3. le positionnement dans le flux courant (flux normal)

Transcription

CHAPITRE 05 : Techniques de mise en page
[Création de sites web statiques] Pratiques HTML(5), CSS (2.1, 3 et 4)
101
2.4. La norme ARIA1 ?
Les attributs « role » font partie d'une spécification du W3C : WAI-ARIA. Cette norme, couramment appelée ARIA, a été
introduite avant HTML 5 pour pallier le manque d'accessibilité des applications Internet et plus particulièrement des
widgets.
Les widget sont des morceaux de code HTML et Javascript servant à créer des éléments de contrôle (barres de
progression, sélecteurs de couleurs, des fausses cases à cocher avec un état "semi-coché", …) impossibles via les
éléments HTML traditionnels.
HTML 5 se voulant plus accessible et plus sémantique introduit la norme ARIA à destination des outils d'aide à la lecture
pour les personnes non voyantes. ARIA n'est donc pas quelque chose qui va être utile pour les navigateurs
traditionnels, mais bien par les outils d'assistance à la lecture comme les lecteurs d'écran que sont les synthèses vocales
et les afficheurs Braille.
HTML5 – starter pack
http://sickdesigner.com/resources/HTML5-starter-pack/index.html
http://www.initializr.com/
http://shikiryu.com/html5/
Lecture Web :
Tableau récapitulant la prise en charge des différentes propriétés CSS 3 et applications HTML 5 par les différents
navigateurs actuels (ressource mise à disposition par Jim Morrison, de l’agence web Deep Blue Sky) :
http://findmebyip.com/litmus
HTML 5 par l’exemple : un tableau comparatif et interactif sur la prise en charge de HTML 5 par les navigateurs :
http://w3c.html5.free.fr
3. LE POSITIONNEMENT DANS LE FLUX COURANT (FLUX NORMAL)
Par défaut, les navigateurs affichent tous les éléments d'une page (parents, enfants ou frères) dans l'ordre du flux courant,
appelé également flux normal.
Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de
code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la
lecture d'un texte, il procède verticalement, commençant en « haut » de l'écran pour aller jusqu'en « bas », et
horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.
3.1. Exemples de positionnement dans le flux normal
Etape 01
div {
background: yellow;
}
p {
background: green;
}
Le <div> conteneur jaune n’est pas visible ; seul le paragraphe vert apparaît. Il occupe toute la largeur disponible, c’est-àdire la largeur du document. En effet, l’élément bloc <div>, sans spécification de taille, occupe toute la largeur possible
dans une hauteur par défaut nulle. L’élément bloc <p>, sans spécification de taille, occupe lui aussi toute la largeur de son
conteneur, le bloc <div>.
La hauteur de ce dernier est déterminée par celle de son contenu (le paragraphe) car l’élément <div> n’a pas de marges
internes par défaut.
1
Source : http://openclassrooms.com/courses/creer-un-blog-accessible-avec-html5 et plus d’infos !
Nathalie Vanassche | www.nathalievanassche.be
102
Etape 02
div {
width: 300px;
background: yellow;
}
p {
width: 100px;
background: green;
}
À présent pourvus de dimensions explicites, ces deux blocs se distinguent nettement. Il reste à placer le paragraphe dans
son conteneur, ce qu’on peut réaliser en le laissant dans le flux mais en précisant des marges en haut et à gauche.
Etape 03
div {
width: 300px;
padding-top: 2em;
background: yellow;
}
p {
margin-left: 3em;
width: 100px;
background: green;
}
Voilà qui suffit à positionner le bloc paragraphe dans son conteneur. Toute autre méthode de spécification de longueur
que les unités em conviendrait parfaitement : pixel, pourcentage, etc.
Etape 04
<div>
<p id='premier'>premier paragraphe de texte</p>
<p id='second'>deuxième paragraphe de texte</p>
</div>
Ces deux frères prennent par défaut place l’un sous l’autre, en respectant tous deux les styles CSS associés au sélecteur de
paragraphe (<p>) : chacun adopte une marge à gauche de trois caractères.
3.2. Focus sur la propriété display
La propriété CSS display définit le type de rendu de boîte à utiliser pour un élément donné. Il existe plusieurs valeurs
pour cette propriété, les éléments le plus souvent utilisés ont une valeur par défaut de block ou inline (la plupart des
autres valeurs display font référence aux tableaux).
La propriété Display admet 18 valeurs : inline, block, list-item, run-in, compact, marker, table, inline-table, table-rowgroup, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption,
none et inherit. La propriété inline-block, à l’état de draft en CSS2.1 est également à citer.
A. Passer du block à inline et vice versa :
Les éléments en bloc comme les paragraphes, les titres et les listes se placent l'un au-dessus de l'autre lorsqu'ils s'affichent
dans navigateur.
Les éléments incorporés (in-line) comme a, span et img se placent côte à côte lorsqu'ils s'affichent dans le navigateur et
n'apparaissent sur une nouvelle ligne que s'il n'y a pas assez d'espace sur la précédente.
La possibilité de transformer les éléments block en éléments inline Ex: display:inline; et vice versa Ex:
display:block; est une fonction performante qui vous permet, par exemple, de changer une ligne de liens se
plaçant horizontalement en une navigation latérale (sans br).
103
display:inline-block;1 (CSS2.1) intègre l’élément dans la ligne comme un élément incorporé, mais le contenu
de la boîte se comporte comme un élément bloc, ce qui permet de définir les largeurs, les hauteurs, les marges verticales
et le remplissage.
B. List-item
Le bloc sera affiché sous forme de liste. Les éléments de liste ne sont ni des balises Bloc, ni des balises Inline. Ils ont un
comportement différents. En passant un élément en Display: list-item, il pourra supporter les propriétés
suivantes : 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'
C. none
Cette valeur fait qu'aucune boîte n'est générée par l'élément dans la structure de formatage (le bloc ne sera pas affiché).
Noter qu'une valeur 'none' ne crée pas de boîte invisible, elle ne crée pas de boîte du tout.
D. Les valeurs de tables
table, inline-table, table-row-group, table-column, table-column-group, tableheader-group, table-footer-group, table-row, table-cell et table-caption
Ces valeurs donnent à un élément le comportement de celui d'une table.
Actuellement, la valeur la plus intéressante est sans doute Display: table-cell. En effet, en donnant à un bloc le
comportement habituel d'une cellule, le contenu de ce bloc va automatiquement se centrer verticalement dans ce bloc2.
Cette solution résout tous les soucis d'alignement vertical que posent les mises en pages sans tableaux.
E. run-in et compact
Selon le contexte, ces valeurs créent une boîte de bloc ou en-ligne.
Ces deux positionnements sont assez déroutants car selon leurs positions les uns par rapports aux autres, les boites
deviennent soit bloc soit en-ligne.
F. marker
Cette valeur crée un marqueur (pour les listes par exemple ou les feuilles de styles auditives). Elle ne devrait être employée
qu'avec les pseudo-éléments :before et :after liés à des éléments de type bloc. Dans certains cas, cette valeur est
interprétée comme 'inline'.
Exemple d’utilisation de marker : http://www.yoyodesign.org/doc/w3c/css2/generate.html#markers
Pour résumer le positionnement dans le flux :
C'est un traitement linéaire du contenu de la page.
L'alignement des boîtes bloc est vertical ; l'alignement des éléments en ligne dans les boîtes bloc est horizontal.
Par défaut, chaque élément est donc dépendant de ses frères immédiats et deux <p> successifs apparaissent l'un sous
l'autre.
Cette méthode convient à la majorité des cas, il suffit de définir les marges de chaque élément pour le placer dans son
conteneur.
1
2
Prise en charge par Firefox 3.0 et ses versions ultérieures, Internet Explorer 8 et les dernières versions de Safari et Opera.
Prise en charge par Internet Explorer à partir de sa version 8.
104
6. LES AUTRES METHODES DE POSITIONNEMENT
La propriété position se trouve au cœur des mises en page fondé sur les CSS. Elle détermine le point de référence pour le
positionnement de chaque boîte d'élément.
La propriété position prend quatre valeurs : static, relative, absolute et fixed - static étant la valeur par défaut. Toutes
ces techniques de mise en page CSS s’appuient sur trois concepts élémentaires : le positionnement, le flottement et la
manipulation des marges.
6.1. Le positionnement relatif
Le positionnement relatif est une variante du positionnement en flux normal (on l'active par la déclaration
position:relative;), il reste positionné par défaut dans le flux normal, mais il est alors décalé horizontalement
et/ou verticalement par rapport à son point d’origine à l’aide des propriétés top, right, bottom ou left.
Le contenu suivant n'est pas affecté par ce déplacement, ce qui peut donc entraîner des chevauchements.
Exemple:
<p>
Lorem
<span class="jaune">
boîte en position relative
</span>
ipsum dolor.
</p>
En CSS :
jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}
Le résultat :
Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :
jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}
Le résultat :
Pour résumer le positionnement relatif :
L'espace occupé par l'élément statique initial est conservé – tout comme le positionnement des autres éléments. Cette
technique est à manier avec précaution car on n’y manipule que des décalages, chaque élément restant dépendant de
ses frères.
105
6.2. La position absolue
S'applique à tout élément doté de la déclaration position:absolute ou position:fixed. Le positionnement
absolu extrait totalement un élément du flux normal du document pour le positionner.
Les boîtes ainsi retirées du flux normal n’ont plus aucun effet sur le calcul des placements des autres éléments de la même
fratrie et on détermine leur position par les propriétés top, right, bottom et left.
Un élément positionné de manière absolue est positionné par rapport l’emplacement de son ancêtre le plus proche S’il
n’en possède pas, il est positionné par rapport au bloc conteneur initial. Selon l’agent utilisateur, il peut s’agit du support
du document ou de l’élément HTML. La boîte conteneur de référence est celle du premier élément ancêtre positionné
(en relatif, fixe ou absolu).
Notez également que tout élément positionné en absolu est considéré de type bloc. Les éléments en ligne peuvent ainsi
recevoir des dimensions et des bordures.
Exemple :
p {
margin:0;
}
div {
width:300px;
height:200px;
background:yellow;
}
p#premier {
width:100px;
background:orange;
}
p#second {
position:absolute;
top:0;
left:0;
width:150px;
background:green;
}
Le second paragraphe prend place en haut, à gauche du document, sortant même de la boîte de son parent, le bloc <div>.
En remplaçant la règle left:0 par right:0, le paragraphe se place à droite de l'écran.
Pour placer le second paragraphe par rapport au bloc <div>, il suffit de positionner ce dernier avec une propriété de
position (absolu, relatif ou fixe).
Exemple
div {
position:relative;
width:300px;
height:200px;
background:yellow;
}
Pour résumer le positionnement absolu :
Le positionnement relatif est "relatif" à la position initiale de l’élément dans le flot du document, alors que le
positionnement absolu est "relatif" au plus proche ancêtre positionné (bloc conteneur ou premier élément ancêtre
positionné) ou, s’il n’existe pas, au bloc conteneur initial (le body, toujours considéré comme positionné).
L'élément se déplace donc lorsque l'utilisateur fait défiler la page pour conserver sa position par rapport à lui, il sort du
flux continu du navigateur.
106
6.3. Le positionnement fixe
Le positionnement fixe est semblable au positionnement absolu mais le contexte de positionnement de l'élément est
l'outil d'affichage (la fenêtre du navigateur par exemple) de sorte que l'élément reste fixé à l'écran lorsque la page défile.
Exemple
vert {
position: fixed;
top: 230px;
left: 20px;
background-color: green;
Cet effet "collé" permet de simuler les effets de cadres (frames), et créer, par exemple, un élément de navigation qui restera
en place lorsque la page défile.
Toutefois, cette propriété ne fonctionne pas en IE 6.0 (la version 7 la reconnaît partiellement).
Lecture Web :
Les liens suivants proposent des solutions de remplacement émulant cette fonctionnalité sur Internet Explorer 6 :
http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm
http://www.nanoum.net/blog/6_absolue_et_fixe.html
http://devnull.tagsoup.com/fixed/
http://limpid.nl/lab/css/fixed/
7. LA PROFONDEUR : Z-INDEX
Par défaut, le dernier élément positionné déclaré dans le code HTML s'affichera par-dessus tous les autres éléments du
même conteneur. La propriété Z-index permet de modifier ce comportement, elle précise le chevauchement des
éléments les uns par rapport aux autres.
Un élément sera affiché au-dessus d'un autre s'il possède un ordre d'affichage supérieur, par exemple un élément ayant
la valeur {z-index:2} va recouvrir l'élément ayant comme valeur {z-index:1}.
Exemple
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #ccc;
}
p#second {
position: absolute;
top: 40px;
left: 50px;
width: 150px;
background: green;
}
107
Le second paragraphe surplombe en partie le premier (ceci indépendamment de l’ordre de leur déclaration dans le code
HTML). Pour le faire passer dessous, il suffit de définir pour chaque boîte un niveau de z-index différent, en attribuant au
premier paragraphe une valeur plus élevée :
p#premier {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100px;
background: #ccc;
}
p#second {
position: absolute;
top: 40px;
left: 50px;
z-index: 0;
width: 150px;
background: green;
}
Notez que seuls les éléments « positionnés » peuvent être affectés par cette propriété d’empilement z-index.
N’abusez pas de ces changements de profondeur : elles sont rarement nécessaires dans un document bien construit et
doté d’une structure HTML cohérente.

3. le positionnement dans le flux courant (flux normal)

Transcription

Documents pareils

CSS et Javascript

studio - ti6 - Placeman Pascal

Des images PNG transparentes sous IE 6

PROGRAMME DE FORMATION Création de sites internet

CV – Développeur PHP / WebDesign CSS Aurélie CABON

Moment musical des CM2 - École élémentaire Les Vikings

Webmaster/Intégrateur H/F

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

32 479 66 40 60 [email protected]

M2202 – Algorithmique TD 5 : Une bannière animée interactive

Le Responsive Design