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

Présentation au sujet: "CSS : Quelques exemples de mise en page fluide en n colonnes"— Transcription de la présentation:

1 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: / , - Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h

2 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 :

3 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

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 :

6

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

9 CSS: créer une mise en page avec trois colonnes de longueur égale
Par Michael Meadhra, Builder.com. Mercredi 22 septembre 2004 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 :

10

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

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

14

15

16

17

18

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

20

21

22 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

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

24

25

26

27

28

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

31

32 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

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

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;

40

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

42 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

43

44

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

46 Div 1 Div 2 Div 3 Div 4 Div 5

47 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%

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.

51 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 (.)

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

53 Template CSS 2 : modèle 3 colonnes auto adaptable
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.

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

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

56 Feuille de style dans le fichier : Trois_Colonnes_UF.css

57 Appel de la feuille de style: Trois_Colonnes_UF.css

58 … 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

59 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

77 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

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

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

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

81 header menus notes corps pied

82 nospace width: 100%; margin: 0px;

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

84 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;

85 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

86 Template fluide 4 colonnes
CSS/IntensivStation Template fluide 4 colonnes

87 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

88 CSS/IntensivStation

89

90 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

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

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

93 <div id="logo"> <a href=" <img src="css_logo.gif" alt="" width="414" height="56" border="0" /> </a> </div>

94

95

96

97

98

99

100

101

102

103 Appel de la feuille de style: quatre_colonnes.css

104

105

106

107

108 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

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

110

111

112

113

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

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

116

117 Résumé du Template fluide 4 colonnes Rappel: CSS/IntensivStation
Rappel:

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