CSS : Quelques exemples de mise en page fluide en n colonnes Présentation séquentielle des mises en relation de : Fichier HTML Règles CSS Balises HTML Feuilles CSS avec Disposition relative des boîtes imbriquées Franç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, francois-daniel.giezendanner@edu.ge.ch - http://icp.ge.ch/sem/cms-spip/ Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800

Hiérarchie arborescente des balises HTML Pensez aux inter-relations : Hiérarchie arborescente des balises HTML Fichier HTML Règles CSS Boîtes imbriquées 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

Présentations séparées selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles CSS Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier HTML

Rappel des principaux sélecteurs de types : « boîtes bloc » (block boxes) dite aussi « boîtes paragraphe » ou boîte conteneur « boîtes en-ligne » (inline boxes)

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 :

Exemple 1 CSS: créer une mise en page fluide avec trois colonnes de longueur égale D’après l’article de Michael Meadhra sur le site « Builder.com » du Mercredi 22 septembre 2004 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 Par Michael Meadhra, Builder.com. Mercredi 22 septembre 2004 http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htm Michael Meadhra propose la construction d’une page « fluide » en 3 colonnes avec en-tête et pied de page au travers de cinq étapes progressives. 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 cinquième étape (E). Bon travail! Le template en 3 colonnes et en couleur de la deuxième étape (B) de Michael Meadhra : http://meadhra.com/CNET/040714/3col-float-FigB.html

Ce template « Meadhra-Zdnet » utilise : HTML : les éléments de balises : - Boîtes bloc : div, h2, h4, p, ul, li - Boîtes en-ligne : néant CSS : - le sélecteur de type body et div - le sélecteur d’id (d’identifiant), symbole # associé à la balise div, soit : div#xxxxx

Présentation selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles CSS

Balises HTML Feuilles CSS Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles CSS

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

Présentation selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier HTML

Règles CSS Fichier HTML Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier 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.

« PS : Ajustement approximatif des couleurs de l’organigramme consécutif aux limitations de PowerPoint. »

aux plans du HTML et des CSS Exemple 1 Résumé du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

body margin: 0px; padding: 0px;

header navcol main sidecol foot

header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; foot clear: both;

header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; <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> foot clear: both;

aux plans du HTML et des CSS Exemple 1 Variante 1 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

En-tete colgauche colcentre coldroite Pied-de-page

margin-top: 0px; margin-left: 250px; margin-right: 250px; width: 220px; float: right; width: 220px; float: left; clear: both;

margin-top: 0px; width: 220px; float: left; margin-left: 250px; margin-right: 250px; width: 220px; float: right; clear: both;

aux plans du HTML et des CSS Exemple 1 Variante 2 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

En-tete gauche centre droite Pied-de-page

Div 1 Div 2 Div 3 Div 4 Div 5

Div 1 Div 2 Div 3 Div 4 Div 5 margin: 0px; height: auto; width: 100% position: static; margin: 0px; float: left; position: static; width: 25%; margin: 0px; 25%; float: right; width: 220px; position: static; Div 4 Div 5 clear: both; height: auto; width: 100%

overflow: scroll; width: auto; Div 4

overflow: scroll; width: auto; overflow: scroll; width: auto; overflow: scroll; width: auto;

Template CSS 2 modèle 3 colonnes auto adaptable D’après le site ultra-fluide.com Template CSS 2 : modèle 3 colonnes auto adaptable. http://www.ultra-fluide.com/ressources/css/template-css2.htm

Ce template « ultra-Fluide » utilise : HTML : les éléments de balises : - Boîtes bloc : div et p - Boîtes en-ligne : néant CSS : - les sélecteurs contextuels : - * html body .corps et - * html body .main ... lesquels utilisent le sélecteur universel (*) - le sélecteur de classe, symbole point (.)

Template CSS 2 : modèle 3 colonnes auto adaptable Site ultra-fluide.com Template CSS 2 : modèle 3 colonnes auto adaptable. http://www.ultra-fluide.com/ressources/css/template-css2.htm Quelques hacks CSS. http://www.ultra-fluide.com/ressources/css/css-hacks.htm Voir le code CSS et XHTML de ce template. http://www.ultra-fluide.com/ressources/css/template-css2-code.htm Voir le template appliqué à un petit contenu. http://www.ultra-fluide.com/ressources/css/template-petit-contenu.htm Voir le template appliqué à un contenu volumineux. http://www.ultra-fluide.com/ressources/css/template-contenu-volumineux.htm

Template CSS 2 : modèle 3 colonnes auto adaptable http://www.ultra-fluide.com/ressources/css/template-css2.htm Ce template de page web classique reste simple, mais il supporte d'être étendu pour une présentation plus sophistiquée. CSS 2 et XHTML strict sont complètement respectés pour construire ce modèle. Cet exemple illustre les difficultés de mise au point d'une page web compte tenu des nombreux défauts (bugs et non respect des standards) des principaux navigateurs. A cette occasion, vous y trouverez également les moyens de contourner chacun des problèmes rencontrés. La compatibilité de ce template est assurée avec Internet Explorer 5 et 6 sur PC, Internet Explorer 5 sur Mac, Mozilla 1.4, Netscape Navigator 7, Safari 1.0.

Template appliqué à un petit contenu. http://www. ultra-fluide

Template de « Modèle 3 colonnes auto-adaptable » Auteurs: Ultra-Fluide En-tête menus notes pied corps

Feuille de style dans le fichier : Trois_Colonnes_UF.css

Appel de la feuille de style: Trois_Colonnes_UF.css

… et appelant la feuille de style : « Trois_Colonnes_UF.css » Body nospace header En-tête menus notes pied corps main central corps Code HTML du « Modèle 3 colonnes auto-adaptable » proposé par ultra-Fluide ... pied … et appelant la feuille de style : « Trois_Colonnes_UF.css » menus header notes

Présentation selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier HTML

. Fichier HTML Règles CSS Body nospace Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier HTML Header En-tête menus notes pied corps Body nospace

main Header En-tête menus notes pied corps main

central Header En-tête menus notes pied corps central

corps Header En-tête menus notes pied corps corps

Header En-tête menus notes pied corps div-min-height 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

div-min-height Header En-tête menus notes pied corps div-min-height-bottom div-min-height div-min-height-bottom

div-min-height-bottom Header En-tête menus notes pied corps pied corps div-min-height div-min-height-bottom pied

div-min-height-bottom Header En-tête menus notes pied corps corps div-min-height div-min-height-bottom

div-min-height-bottom Header En-tête menus notes pied corps corps div-min-height div-min-height-bottom

div-min-height-bottom Header En-tête menus notes pied corps menus menus div-min-height div-min-height-bottom

div-min-height-bottom Header En-tête menus notes pied corps div-min-height div-min-height-bottom

div-min-height-bottom Header En-tête menus notes pied corps notes notes div-min-height div-min-height-bottom pied

div-min-height-bottom Header En-tête menus notes pied corps div-min-height div-min-height-bottom pied

div-min-height-bottom Header En-tête menus notes pied corps header menu div-min-height header div-min-height-bottom pied

div-min-height-bottom Header En-tête menus notes pied corps menu div-min-height div-min-height-bottom pied

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. menu div-min-height div-min-height-bottom pied

Disposition relative des boîtes bloc (div) .header .main .menus .notes .corps .div-min-height .div-min-height-bottom .central .pied Body .nospace

div-min-height-bottom header corps pied notes menus pied div-min-height div-min-height-bottom body Div main

Résumé du Template CSS 2 modèle 3 colonnes auto adaptable Rappel : D’après le site ultra-fluide.com Template CSS 2 : modèle 3 colonnes auto adaptable. http://www.ultra-fluide.com/ressources/css/template-css2.htm

header menus notes corps pied

nospace width: 100%; margin: 0px;

header header Position: absolute; top: 0px; width: 100%; height: 100px; main main Position: absolute; top: 100px; width: 100%; height: 100%;

header header Position: absolute; top: 0px; width: 100%; height: 100px; menus central notes menu notes central 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;

header header Position: absolute; top: 0px; width: 100%; height: 100px; menus notes menu notes corps corps Position: relative; min-height: 300px; height: 300px; Position: absolute; height: 100%; width: 170px; top: 0px; left: 0px; Position: absolute; height: 100%; width: 100px; top: 0px; right: 0px; pied Position: relative; height: 50px; width: 100%; pied

Template fluide 4 colonnes CSS/IntensivStation Template fluide 4 colonnes http://www.intensivstation.ch/css/en/template.php http://www.intensivstation.ch/css/en/templates/temp04.html http://www.intensivstation.ch/css/en/index.php

Ce template « IntensivStation » utilise : HTML : les éléments de balises : - Boîtes bloc : div, h1, h3, p, pre - Boîte en-ligne : a CSS : - les sélecteurs de type : - body, html, div, h1, h3, p, pre, a - le sélecteur d’identifiant (id), symbole (#) - les sélecteurs regroupé : - p, h1, h3, pre - #right, #middleright, #middleleft, #left

CSS/IntensivStation http://www.intensivstation.ch/css/en/template.php

http://www.intensivstation.ch/css/en/templates/temp04.html

Présentation selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles CSS

Balises HTML Feuilles CSS Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles CSS

Balises HTML Feuilles CSS Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Balises HTML Feuilles 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 selon les directives ci-dessous Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier HTML

Règles CSS Fichier HTML Présentation séquentielle des relation : avec Disposition relative des boîtes imbriquées Règles CSS Fichier 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.

« PS : Ajustement approximatif des couleurs de l’organigramme consécutif aux limitations de PowerPoint. »

Résumé du Template fluide 4 colonnes Rappel: CSS/IntensivStation http://www.intensivstation.ch/css/en/template.php Rappel: http://www.intensivstation.ch/css/en/templates/temp04.html http://www.intensivstation.ch/css/en/index.php

position: absolut; left: 2%; width 19%; top: 106px; position: absolut; 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;