CSS : Quelques exemples CSS : Quelques exemples de mise en page fluide en n colonnesde mise en page fluide en n colonnes
Présentation séquentielle Présentation séquentielle des mises en relation de :des mises en relation de :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Fichier HTMLFichier HTML Règles CSSRègles CSS
Balises HTMLBalises HTMLFeuilles CSSFeuilles CSS
François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-GenèveFrançois Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève
Tél: +41 22 / 388-33-14, [email protected] - http://icp.ge.ch/sem/cms-spip/Tél: +41 22 / 388-33-14, [email protected] - http://icp.ge.ch/sem/cms-spip/
Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800
Le présent document ainsi que les fichiers HTML, CSS et images des templates proposés ici en exercices sont téléchargeables à l’adresse :
http://p7app.geneve.ch:8007/spip/article.php3?id_article=169
Pensez aux inter-relations :Pensez aux inter-relations :
Fichier HTMLFichier HTML
Règles CSSRègles CSSBoîtes Boîtes
imbriquéesimbriquées
Hiérarchie Hiérarchie arborescente des arborescente des balises HTMLbalises HTML
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Présentations séparées selon les directives ci-dessous
Rappel des principaux sélecteurs Rappel des principaux sélecteurs de types :de types :
• « boîtes bloc » (block boxes)« boîtes bloc » (block boxes)
• « boîtes en-ligne » (inline boxes)« boîtes en-ligne » (inline boxes)
dite aussi « boîtes paragraphe »dite aussi « boîtes paragraphe »ou boîte conteneurou boîte conteneur
Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont :
Les principaux éléments créant des boîtes en ligne (inline) sont :
http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htmhttp://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htm
CSS: créer uneCSS: créer unemise en page fluide mise en page fluide avec trois colonnes avec trois colonnes de longueur égalede longueur égale
D’après l’article de Michael Meadhra sur le site « Builder.com » du Mercredi 22 septembre 2004 D’après l’article de Michael Meadhra sur le site « Builder.com » du Mercredi 22 septembre 2004
Exemple 1Exemple 1
http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htm
CSS: créer une mise en page avec trois colonnes de longueur égale
http://meadhra.com/CNET/040714/3col-float-FigB.html
Le template en 3 colonnes et en couleur de la deuxième étape (B) de Michael Meadhra :
Michael Meadhra propose la construction d’une page « fluide » Michael Meadhra propose la construction d’une page « fluide » en 3 colonnes avec en-tête et pied de page au travers de cinq en 3 colonnes avec en-tête et pied de page au travers de cinq étapes progressives. étapes progressives.
Nous décrivons ici les éléments pour l’étape B, ceci afin de vous Nous décrivons ici les éléments pour l’étape B, ceci afin de vous donner le goût d’explorer son article et d’aller jusqu’à la donner le goût d’explorer son article et d’aller jusqu’à la cinquième étape (E). cinquième étape (E).
Bon travail!Bon travail!
Michael Meadhra propose la construction d’une page « fluide » Michael Meadhra propose la construction d’une page « fluide » en 3 colonnes avec en-tête et pied de page au travers de cinq en 3 colonnes avec en-tête et pied de page au travers de cinq étapes progressives. étapes progressives.
Nous décrivons ici les éléments pour l’étape B, ceci afin de vous Nous décrivons ici les éléments pour l’étape B, ceci afin de vous donner le goût d’explorer son article et d’aller jusqu’à la donner le goût d’explorer son article et d’aller jusqu’à la cinquième étape (E). cinquième étape (E).
Bon travail!Bon travail!
Par Michael Meadhra, Builder.com. Mercredi 22 septembre 2004
Ce template « Ce template « Meadhra-ZdnetMeadhra-Zdnet » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv, , h2h2, , h4h4, , pp, , ulul, , lili - Boîtes en-ligne : néant- Boîtes en-ligne : néant
CSS : CSS : - le sélecteur de type - le sélecteur de type bodybody et et divdiv - le sélecteur d’- le sélecteur d’idid (d’ (d’identifiantidentifiant), symbole ), symbole ## associé à la baliseassocié à la balise div div, soit :, soit : div#xxxxx div#xxxxx
Ce template « Ce template « Meadhra-ZdnetMeadhra-Zdnet » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv, , h2h2, , h4h4, , pp, , ulul, , lili - Boîtes en-ligne : néant- Boîtes en-ligne : néant
CSS : CSS : - le sélecteur de type - le sélecteur de type bodybody et et divdiv - le sélecteur d’- le sélecteur d’idid (d’ (d’identifiantidentifiant), symbole ), symbole ## associé à la baliseassocié à la balise div div, soit :, soit : div#xxxxx div#xxxxx
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
Présentation selon les directives ci-dessous
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
Appel de la feuille de style: zd-3col.css
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Présentation selon les directives ci-dessous
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
h1
divid="header"
h4
li li li li li li
ul
divid="navcol"
h4
li li li li
ul
divid="sidecol"
h2 p p p p
divid="main"
p
divid="foot"
body
HTML« PS : Ajustement approximatif des couleurs
de l’organigramme consécutif aux limitations
de PowerPoint. »
Template 3 colonnesde Michael Meadhra
Les points essentiels aux plans du HTML et des CSS
Résumé du
Exemple 1Exemple 1
body
margin: 0px;padding: 0px;
header
foot
navcol main sidecol
navcol main sidecol
header
foot
width: 130px;float: left;
height: 60px; Margin: 0px;
margin-left: 160px;margin-right: 160px;
width: 130px;float: right;
clear: both;
header
foot
width: 130px;float: left;
height: 60px; Margin: 0px;
margin-left: 160px;margin-right: 160px;
width: 130px;float: right;
clear: both;
<body><div id="header">En tete</div><div id="navcol">Colonne gauche</div><div id="sidecol">Colonne droite</div><div id="main"> Colonne centrale</div><div id="foot">Pied de Pge</div></body>
navcol main sidecol
Exemple 1Exemple 1
Template 3 colonnesde Michael Meadhra
Les points essentiels aux plans du HTML et des CSS
Variante 1 du
En-tete
Pied-de-page
colgauche colcentre coldroite
width: 220px;float: left;
margin-top: 0px;
margin-left: 250px;margin-right: 250px;
width: 220px;float: right;
clear: both;
width: 220px;float: left;
margin-top: 0px;
margin-left: 250px;margin-right: 250px;
width: 220px;float: right;
clear: both;
Exemple 1Exemple 1
Template 3 colonnesde Michael Meadhra
Les points essentiels aux plans du HTML et des CSS
Variante 2 du
En-tete
Pied-de-page
gauche centre droite
Div 1
Div 2
Div 4
Div 3
Div 5
Div 1
Div 2
Div 4
Div 3
Div 5
margin: 0px;float: left;position: static;width: 25%;
margin: 0px; height: auto;width: 100%
margin: 0px; 25%;position: static;
margin: 0px; 25%;float: right;width: 220px;position: static;
clear: both; height: auto; width: 100%
Div 4
overflow: scroll;width: auto;
overflow: scroll;width: auto;
overflow: scroll;width: auto;
overflow: scroll;width: auto;
Template CSS 2Template CSS 2modèle 3 colonnes modèle 3 colonnes
auto adaptable auto adaptable
D’après le site ultra-fluide.comD’après le site ultra-fluide.com • Template CSS 2 : modèle 3 colonnes auto adaptable.Template CSS 2 : modèle 3 colonnes auto adaptable.http://www.ultra-fluide.com/ressources/css/template-css2.htmhttp://www.ultra-fluide.com/ressources/css/template-css2.htm
Ce template « Ce template « ultra-Fluideultra-Fluide » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv et et pp - Boîtes en-ligne : - Boîtes en-ligne : néantnéant
CSS : CSS : - les sélecteurs contextuels : - les sélecteurs contextuels : - * - * htmlhtml body .corps body .corps etet - * - * htmlhtml body .mainbody .main ... ... lesquels utilisent le sélecteur universellesquels utilisent le sélecteur universel ((**))
- le sélecteur de classe, symbole point (- le sélecteur de classe, symbole point (..) )
Ce template « Ce template « ultra-Fluideultra-Fluide » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv et et pp - Boîtes en-ligne : - Boîtes en-ligne : néantnéant
CSS : CSS : - les sélecteurs contextuels : - les sélecteurs contextuels : - * - * htmlhtml body .corps body .corps etet - * - * htmlhtml body .mainbody .main ... ... lesquels utilisent le sélecteur universellesquels utilisent le sélecteur universel ((**))
- le sélecteur de classe, symbole point (- le sélecteur de classe, symbole point (..) )
Site ultra-fluide.com Site ultra-fluide.com
• Template CSS 2 : modèle 3 colonnes auto adaptable.Template CSS 2 : modèle 3 colonnes auto adaptable.http://www.ultra-fluide.com/ressources/css/template-css2.htmhttp://www.ultra-fluide.com/ressources/css/template-css2.htm
• Quelques hacks CSS.Quelques hacks CSS.http://www.ultra-fluide.com/ressources/css/css-hacks.htmhttp://www.ultra-fluide.com/ressources/css/css-hacks.htm
• Voir le code CSS et XHTML de ce templateVoir le code CSS et XHTML de ce template..http://www.ultra-fluide.com/ressources/css/template-css2-code.htmhttp://www.ultra-fluide.com/ressources/css/template-css2-code.htm
• Voir le template appliqué à un petit contenuVoir le template appliqué à un petit contenu..http://www.ultra-fluide.com/ressources/css/template-petit-contenu.htmhttp://www.ultra-fluide.com/ressources/css/template-petit-contenu.htm
• Voir le template appliqué à un contenu volumineuxVoir le template appliqué à un contenu volumineux..http://www.ultra-fluide.com/ressources/css/template-contenu-volumineux.htmhttp://www.ultra-fluide.com/ressources/css/template-contenu-volumineux.htm
Site ultra-fluide.com Site ultra-fluide.com
• Template CSS 2 : modèle 3 colonnes auto adaptable.Template CSS 2 : modèle 3 colonnes auto adaptable.http://www.ultra-fluide.com/ressources/css/template-css2.htmhttp://www.ultra-fluide.com/ressources/css/template-css2.htm
• Quelques hacks CSS.Quelques hacks CSS.http://www.ultra-fluide.com/ressources/css/css-hacks.htmhttp://www.ultra-fluide.com/ressources/css/css-hacks.htm
• Voir le code CSS et XHTML de ce templateVoir le code CSS et XHTML de ce template..http://www.ultra-fluide.com/ressources/css/template-css2-code.htmhttp://www.ultra-fluide.com/ressources/css/template-css2-code.htm
• Voir le template appliqué à un petit contenuVoir le template appliqué à un petit contenu..http://www.ultra-fluide.com/ressources/css/template-petit-contenu.htmhttp://www.ultra-fluide.com/ressources/css/template-petit-contenu.htm
• Voir le template appliqué à un contenu volumineuxVoir le template appliqué à un contenu volumineux..http://www.ultra-fluide.com/ressources/css/template-contenu-volumineux.htmhttp://www.ultra-fluide.com/ressources/css/template-contenu-volumineux.htm
Template CSS 2 : modèle 3 colonnes auto adaptable
Ce template de page web classique reste simple, mais il supporte Ce template de page web classique reste simple, mais il supporte d'être étendu pour une présentation plus sophistiquée. d'être étendu pour une présentation plus sophistiquée.
CSS 2 et XHTML strict sont complètement respectés pour CSS 2 et XHTML strict sont complètement respectés pour construire ce modèle. construire ce modèle.
Cet exemple illustre les difficultés de mise au point d'une page Cet exemple illustre les difficultés de mise au point d'une page web compte tenu des nombreux défauts (bugs et non respect web compte tenu des nombreux défauts (bugs et non respect des standards) des principaux navigateurs. des standards) des principaux navigateurs.
A cette occasion, vous y trouverez également les moyens de A cette occasion, vous y trouverez également les moyens de contourner chacun des problèmes rencontrés. contourner chacun des problèmes rencontrés.
La compatibilité de ce template est assurée avec Internet La compatibilité de ce template est assurée avec Internet Explorer 5 et 6 sur PC, Internet Explorer 5 sur Mac, Mozilla 1.4, Explorer 5 et 6 sur PC, Internet Explorer 5 sur Mac, Mozilla 1.4, Netscape Navigator 7, Safari 1.0. Netscape Navigator 7, Safari 1.0.
Ce template de page web classique reste simple, mais il supporte Ce template de page web classique reste simple, mais il supporte d'être étendu pour une présentation plus sophistiquée. d'être étendu pour une présentation plus sophistiquée.
CSS 2 et XHTML strict sont complètement respectés pour CSS 2 et XHTML strict sont complètement respectés pour construire ce modèle. construire ce modèle.
Cet exemple illustre les difficultés de mise au point d'une page Cet exemple illustre les difficultés de mise au point d'une page web compte tenu des nombreux défauts (bugs et non respect web compte tenu des nombreux défauts (bugs et non respect des standards) des principaux navigateurs. des standards) des principaux navigateurs.
A cette occasion, vous y trouverez également les moyens de A cette occasion, vous y trouverez également les moyens de contourner chacun des problèmes rencontrés. contourner chacun des problèmes rencontrés.
La compatibilité de ce template est assurée avec Internet La compatibilité de ce template est assurée avec Internet Explorer 5 et 6 sur PC, Internet Explorer 5 sur Mac, Mozilla 1.4, Explorer 5 et 6 sur PC, Internet Explorer 5 sur Mac, Mozilla 1.4, Netscape Navigator 7, Safari 1.0. Netscape Navigator 7, Safari 1.0.
Template CSS 2 : modèle 3 colonnes auto adaptable http://www.ultra-fluide.com/ressources/css/template-css2.htm
Template appliqué à un petit contenu.http://www.ultra-fluide.com/ressources/css/template-petit-contenu.htm
En-tête
menus notes
pied
corps
Template de « Modèle 3 colonnes auto-adaptable »Auteurs: Ultra-Fluide
Feuille de style dans le fichier : Trois_Colonnes_UF.css
Appel de la feuille de style: Trois_Colonnes_UF.css
Body nospace
main
Code HTML du « Modèle 3 colonnes auto-adaptable » proposé par ultra-Fluide ...
central
menusmenus
menus
notesnotes
notes headerheader
header
header En-tête
menus notes
pied
corps
… et appelant la feuille de style : « Trois_Colonnes_UF.css »
corps
corpscorps
pied
piedpied
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Présentation selon les directives ci-dessous
Body nospaceBody nospace
Body nospace
Header En-tête
menus notes
pied
corps
.
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
main
Header En-tête
menus notes
pied
corps
mainmain
central
Header En-tête
menus notes
pied
corps
centralcentral
corps
Header En-tête
menus notes
pied
corps
corpscorps
div-min-height
Header En-tête
menus notes
pied
corps
div-min-height
Header En-tête
menus notes
pied
corps
div-min-height
Header En-tête
menus notes
pied
corps
div-min-height
Header En-tête
menus notes
pied
corps
div-min-height-bottom
div-min-height-bottom
div-min-height
pied
Header En-tête
menus notes
pied
corps
corpscorps
piedpied
div-min-height
div-min-height-bottom
Header En-tête
menus notes
pied
corps
corpscorpsdiv-min-height
div-min-height-bottom
Header En-tête
menus notes
pied
corps
corpscorpsdiv-min-height
div-min-height-bottom
menus
Header En-tête
menus notes
pied
corps
menusmenus
div-min-height
div-min-height-bottom
Header En-tête
menus notes
pied
corps
div-min-height
div-min-height-bottom
notes
Header En-tête
menus notes
pied
corps
piedpied
notesnotes
div-min-height
div-min-height-bottom
Header En-tête
menus notes
pied
corps
piedpied
div-min-height
div-min-height-bottom
header
Header En-tête
menus notes
pied
corps
headerheader
piedpied
menumenu
div-min-height
div-min-height-bottom
Header En-tête
menus notes
pied
corps
piedpied
menumenu
div-min-height
div-min-height-bottom
piedpied
menumenu
div-min-height
div-min-height-bottom
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
Disposition relative des boîtes bloc (div)
.corps.corps
.pied.pied
.notes.notes.menus.menus
.main
.central
Body .nospace
.div-min-height
.div-min-height-bottom
.header
d ivm in -h ig h t
p
d ivcen ter
d ivm in -h ig h t-b o ttom
d ivcorp s
p
d ivtext a lig n
d ivp ied s
d ivcen tra l
p
d ivcen ter
d ivm en u
p
d ivcen ter
d ivn o tes
d ivm ain
p
d ivcen ter
d ivh ead er
b od y
headerheader
corpscorps
piedpied
notesnotesmenusmenus
body
Divmain
piedpied
div-min-height
div-min-height-bottom
Template CSS 2Template CSS 2modèle 3 colonnes modèle 3 colonnes
auto adaptable auto adaptable
D’après le site ultra-fluide.com D’après le site ultra-fluide.com • Template CSS 2 : modèle 3 colonnes auto adaptable.Template CSS 2 : modèle 3 colonnes auto adaptable.http://www.ultra-fluide.com/ressources/css/template-css2.htmhttp://www.ultra-fluide.com/ressources/css/template-css2.htm
Résumé du Résumé du
Rappel :
headerheader
corpscorps
piedpied
notesnotesmenusmenus
width: 100%; margin: 0px;
nospace
mainmain
headerheaderPosition: absolute; top: 0px; width: 100%; height: 100px;
Position: absolute; top: 100px; width: 100%; height: 100%;
main
header
headerheader
centralcentral notesnotesmenusmenus
Position: relative; top: 0px; width: auto;margin: 0px;margin-left: 170px;margin-right: 100px;
Position: absolute; height: 100%;width: 170px;top: 0px;left: 0px;
Position: absolute; height: 100%;width: 100px;top: 0px;right: 0px;
menu central notes
Position: absolute; top: 0px; width: 100%; height: 100px;
header
headerheader
corpscorps
piedpied
notesnotesmenusmenus
corps
pied
Position: absolute; height: 100%;width: 170px;top: 0px;left: 0px;
Position: absolute; height: 100%;width: 100px;top: 0px;right: 0px;
Position: relative; min-height: 300px;height: 300px;
Position: relative; height: 50px;width: 100%;
menu notes
header
Position: absolute; top: 0px; width: 100%; height: 100px;
http://www.intensivstation.ch/css/en/index.phphttp://www.intensivstation.ch/css/en/index.php
http://www.intensivstation.ch/css/en/template.phphttp://www.intensivstation.ch/css/en/template.php
http://www.intensivstation.ch/css/en/templates/temp04.htmlhttp://www.intensivstation.ch/css/en/templates/temp04.html
CSS/IntensivStationCSS/IntensivStation
Template fluideTemplate fluide4 colonnes4 colonnes
Ce template « Ce template « IntensivStationIntensivStation » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv, , h1h1, , h3h3, , pp, , prepre - Boîte en-ligne : - Boîte en-ligne : aa
CSS : CSS : - les sélecteurs de type :- les sélecteurs de type : - - bodybody, , htmlhtml, , divdiv, , h1h1, , h3h3, , pp, , prepre,, a a
- le sélecteur d’identifiant (id), symbole (- le sélecteur d’identifiant (id), symbole (##) ) - les sélecteurs regroupé : - les sélecteurs regroupé : - - pp, , h1h1, , h3h3, , prepre - #- #rightright, #, #middlerightmiddleright, #, #middleleftmiddleleft, #, #leftleft
Ce template « Ce template « IntensivStationIntensivStation » utilise : » utilise :
HTML : les éléments de balises : HTML : les éléments de balises : - Boîtes bloc : - Boîtes bloc : divdiv, , h1h1, , h3h3, , pp, , prepre - Boîte en-ligne : - Boîte en-ligne : aa
CSS : CSS : - les sélecteurs de type :- les sélecteurs de type : - - bodybody, , htmlhtml, , divdiv, , h1h1, , h3h3, , pp, , prepre,, a a
- le sélecteur d’identifiant (id), symbole (- le sélecteur d’identifiant (id), symbole (##) ) - les sélecteurs regroupé : - les sélecteurs regroupé : - - pp, , h1h1, , h3h3, , prepre - #- #rightright, #, #middlerightmiddleright, #, #middleleftmiddleleft, #, #leftleft
http://www.intensivstation.ch/css/en/template.php
CSS/IntensivStation
http://www.intensivstation.ch/css/en/templates/temp04.html
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
Présentation selon les directives ci-dessous
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Balises HTMLBalises HTML
Feuilles CSSFeuilles CSS
<div id="logo"><a href="http://www.intensivstation.ch"><img src="css_logo.gif" alt="" width="414" height="56" border="0" /></a>
</div>
Appel de la feuille de style: quatre_colonnes.css
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Présentation selon les directives ci-dessous
Présentation séquentielle Présentation séquentielle des relation :des relation :
avec Disposition relative avec Disposition relative des boîtes imbriquéesdes boîtes imbriquées
Règles CSSRègles CSS
Fichier HTMLFichier HTML
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS :
• Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.).
• Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
divid="logo"
h3 pre h3 p a p
divid="left"
h3 pre h3 p p p p
divid="middleleft"
h3 pre h3 p pre h3 p pre
divid="middleright"
h3 pre h3 p p p
divid="right"
body
HTML« PS : Ajustement
approximatif des couleurs de l’organigramme
consécutif aux limitations de PowerPoint. »
http://www.intensivstation.ch/css/en/index.phphttp://www.intensivstation.ch/css/en/index.php
http://www.intensivstation.ch/css/en/template.phphttp://www.intensivstation.ch/css/en/template.php
http://www.intensivstation.ch/css/en/templates/temp04.htmlhttp://www.intensivstation.ch/css/en/templates/temp04.html
CSS/IntensivStationCSS/IntensivStation
Template fluideTemplate fluide4 colonnes4 colonnes
Rappel:
Résumé duRésumé du
http://www.intensivstation.ch/css/en/templates/temp04.html
position: absolut;left: 2%;width 19%;top: 106px;
position: absolut;left: 22%;width 28%;top: 106px;
position: absolut;left: 51%;width 28%;top: 106px;
position: absolut;left: 80%;width 218%;top: 106px;