CSS : Quelques exemples de mise en page fluide en n colonnes

1. Fichier HTML Règles CSS Feuilles CSS Balises HTML Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800 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/ 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 imbriquées

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

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

4. 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)

5. Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont :

7. Les principaux éléments créant des boîtes en ligne (inline) sont :

8. 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

9. 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

11. 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

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

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

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

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

23. Présentation séquentielle des relation : Fichier HTML Règles CSS avec Disposition relative des boîtes imbriquées

29. 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.

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

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

33. body margin: 0px; padding: 0px;

34. header navcol main sidecol foot

35. 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;

36. 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;

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

38. En-tete colgauche colcentre coldroite Pied-de-page

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

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

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

45. En-tete gauche centre droite Pied-de-page

46. Div 1 Div 2 Div 3 Div 4 Div 5

47. margin: 0px; height: auto; width: 100% Div 1 Div 2 Div 3 margin: 0px; 25%; 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%

48. overflow: scroll; width: auto; Div 4

49. overflow: scroll; width: auto; overflow: scroll; width: auto; overflow: scroll; width: auto;

50. 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