CSS : Quelques exemples de mise en page fluide en n colonnes Présentation séquentielle des mises en relation de : avec Disposition relative des boîtes

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 :


Balises HTMLBalises HTML

Feuilles CSSFeuilles CSS



Règles CSSRègles CSS


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 selon les directives ci-dessous





Appel de la feuille de style: zd-3col.css










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


height: 60px; Margin: 0px;



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



Variante 1 du

En-tete

Pied-de-page

colgauche colcentre coldroite


margin-top: 0px;



clear: both;


margin-top: 0px;



clear: both;

Exemple 1Exemple 1



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;




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






Body nospaceBody nospace

Body nospace

Header En-tête

menus notes

pied

corps

.





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

pied

Header En-tête

menus notes

pied

corps

corpscorps

piedpied

div-min-height


Header En-tête

menus notes

pied

corps

corpscorpsdiv-min-height


Header En-tête

menus notes

pied

corps

corpscorpsdiv-min-height


menus

Header En-tête

menus notes

pied

corps

menusmenus

div-min-height


Header En-tête

menus notes

pied

corps

div-min-height


notes

Header En-tête

menus notes

pied

corps

piedpied

notesnotes

div-min-height


Header En-tête

menus notes

pied

corps

piedpied

div-min-height


header

Header En-tête

menus notes

pied

corps

headerheader

piedpied

menumenu

div-min-height


Header En-tête

menus notes

pied

corps

piedpied

menumenu

div-min-height


piedpied

menumenu

div-min-height








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


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


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


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














<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
















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;




Documents

CSS : Quelques exemples de mise en page fluide en n colonnes Présentation séquentielle des mises en relation de : avec Disposition relative des boîtes