CityDesk et Standards du Web - le wiki

Gabarits De Page

BlocRésumé
Après avoir abordé quelque théorie et pratique sur les ModèlesDeBoîtes, cette page est destinée à vous amener à aborder et pratiquer la structure des gabarits de page sans tableaux. Ces gabarits pourront fonctionner dans n'importe quel éditeur et à fortiori dans CityDesk en mode designer. Nous ne nous étendrons pas ici sur des designs très complexes. Ces exercices sont conçus pour être pratiqués avec un simple éditeur HTML et je vous encourage vivement à visualiser le résultat dans votre navigateur préféré et dans un navigateur compatible CSS comme MozillaFirefox. Pour le moment, je m'appuie sur les exemples de code proposés dans l'ouvrage Cascading Style Sheets. N'hésitez pas à pratiquer ces exercices dans votre éditeur. Et merci par avance de compléter, corriger ou commenter cette page en cours de construction. Merci d'avance. -- ChristopheDucamp

Index de la Page
Colonne Centrée   
Deux Boîtes Empilées   
Deux Colonnes   
Trois Colonnes   
Trois Colonnes Avec Une Ligne en Haut de Page   
Trois Colonnes Avec Une Ligne en Haut et une Ligne en Bas   
Emboîtement   
Pied de Page à Nouveau   
Images d'Arrière-Plan   
Un exemple de gabarit 2 colonnes   
Conclusion   
Ailleurs / Voir Aussi   

Colonne Centrée    

Si vous avez bien lu et pratiqué la page ModèlesDeBoîtes, vous ne devriez pas connaître quelque souci à décryter ce code HTML associé à une CSS très simple. La boîte centrée basique a juste un réglage de largeur width inférieur à la taille de la fenêtre. Les marges gauche et droite sont réglées à auto :

Le code HTML

<body>
<div id="contenu">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</div>
</body>
La feuille de style imbriquée

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#contenu {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }
Voir le résultat dans une nouvelle fenêtre en cliquant sur ce lien.

Hélas un bug dan IE/Win remet en cause ce code qu'il faut contourner. Voir à ce titre l'astuce présentée sur la page CentrageHorizontal.

Deux Boîtes Empilées    

Une mise en page toujours très simple. Une boîte est empilée sur une autre boîte et ce grâce au flux normal. Les deux boîtes utilisent le même style. Les boîtes sont centrées essentiellement pour des raisons d'esthétique.

Le code HTML

<body>
<div id="contenu">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</div>

<div id="contenu2>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</div>
</body>
La feuille de style imbriquée

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#contenu {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }

#contenu2 {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }

Voir le résultat dans une nouvelle fenêtre en cliquant sur ce lien

Deux Colonnes    

Un gabarit classique pour intégrer du contenu et une boîte de menu à droite. Dans CityDesk, vous pourriez l'utiliser aussi pour positionner votre {$.SideBar$} à savoir y placer un contenu à droite. La boîte de contenu a une largeur liquide et une marge droite suffisamment large pour ne pas chevaucher le contenu. La boîte de menu à droite est réglé en positionnement absolu (position: absolute;) avec un réglage des marges à partir du haut (top: 0 ;)et de la droite right: 0;. Parce que nous avons vu dans ModèlesDeBoîtes qu'un positionnement absolu sort du flux du document, il est recommandé de placer d'abord l'information du menu dans le XHTML. Ceci aura du sens pour tous vos lecteurs qui ne disposent pas d'un navigateur valide CSS ou d'autres types de navigateurs comme les navigateurs oraux.

Le XHTML est très simple (2 <div> : un menu et un contenu :

<body>
<div id="menu">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.</div>

<div id="contenu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl 
ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>
</body>

La Feuille de Style Associée :

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#contenu {
  padding: 10px;
  margin: 5px 122px 5px 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }

#menu {
   position: absolute;
   top: 0px;
   right: 0px;
   padding: 10px;
   margin: 5px;
   background-color: #fff;
   border: 1px solid #000;
   width: 90 px;
}

Le résultat peut être vu en cliquant sur ce lien.. Notez sur la feuille de style les valeurs de margin pour le sélecteur #contenu. Les valeurs sont en ligne et spécifient sur une même ligne dans l'ordre les propriétés suivantes :

  • marge haut (margin-top)
  • marge droite (margin-right)
  • marge bas (margin-bottom)
  • marge gauche (margin-left)
Un raccourci bien utile pour soulager l'écriture de votre code CSS. Un moyen facile pour retenir cet ordre est de vous souvenir de tourner dans le sens des aiguilles d'une montre.

Pourquoi 122px en margin-right sur le sélecteur contenu Très simple. La boîte de contenu ne doit pas chevaucher le menu aussi nous lui laissons de l'espace libre à partir de la droite. La valeur de 122px pour la marge droite du contenu est donc simplement le résultat d'une addition comprenant tout l'espace occupé par la colonne de droite (menu). (Pour les définitions, souvenez-vous du diagramme exposé sur la page ModèlesDeBoîtes). Pour calculer cet espace, il vous suffit d'additionner les valeurs données au sélecteur menu :

margin + border + padding + width + padding + border + margin = 5+1+10+90+10+1+5 = 122px

Essayons maintenant de modifier la feuille de style ci-dessus en affectant des valeurs en % à la boîte de menu pour les marges horizontales et les zones de remplissage (padding). Les valeurs en pixel dans l'exemple précédent peuvent fonctionner visuellement à la taille de l'écran que vous utilisez, mais elles peuvent commencer à paraître ridiculement petites sur un écran très large. L'utilisation des pourcentages permet de jouer de cette flexibilité sur l'apparence.

Conservons le même code XHTML et modifions la feuille de style précédente. Affectons une largeur width: 18%; de 18% au sélecteur menu, et respectivement 2% et 1% aux valeurs de marge droite et gauche. La zone de remplissage (padding) est fixée pour le menu à 2% sur la droite et 2% sur la gauche. Les préconisations de l'ouvrage pour le sélecteur de contenu sont d'affecter une valeur de 26% à la marge droite.

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#contenu {
  padding: 10px 2% 10px 2%;
  margin: 5px 26% 5px 2%;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }
#menu {
   position: absolute;
   top: 0px;
   right: 0px;
   padding: 10px 2% 10px 2%;
   margin: 5px 2% 5px 1%;
   background-color: #fff;
   border: 1px solid #000;
   width: 18%;
}

Regardez le résultat en cliquant sur ce lien. N'hésitez pas dans la nouvelle fenêtre ouverte à manipuler (diminuer et augmenter) la fenêtre de votre navigateur pour voir le comportement de la colonne de droite (menu)...

Attention néanmoins à cette utilisation des %. Ici la boîte de menu conserve une largeur totale de 25% (18+2+2+2+1). Pour un écran ayant une largeur de 500px cela suffit. Mais sur n'importe quel écran plus petit ce serait vraiment très étroit. L'utilisation d'une valeur en pixel pourla propriété width dans la boîte de menu vous garantit que votre menu ne sera jamais trop petit. Même s'il peut paraître ridiculement sous-dimensionné sur de très grands écrans, c'est à vous de composer en fonction de vos clients, de votre conception et de votre jugement !

Personnellement, je juge ce résultat d'utilisation des pourcentages plutôt déroutant : impossible de maîtriser l'espacement entre la boîte menu et la boîte ?

Pour finir, consultez et essayez ce gabarit 2 colonnes conçu par MarkNewhouse. Une alternative intéressante qui fonctionne aussi sur un navigateur antique comme Netscape 4.

Trois Colonnes    

Un classique du document web : le contenu au milieu de deux colonnes droite et gauche pour accueillir menu, liens et commentaires. Dans l'exemple suivant, la boîte au centre du contenu est dans le flux et a des marges fixes qui laissent de l'espace pour des colonnes positionnés sur les côtés avec une largeur fixe. Quand la largeur de la fenêtre du navigateur varie, la boîte de contenu au milieu sait s'adapter en se rétractant ou en s'épanchant.

CSS :

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#gauche {
  position: absolute;
  top: 0px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  width: 90px;
  }
#milieu {
  margin: 5px 122px 5px 122px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  }
#droit {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  border: 1px solid #000;
  background-color: #fff;
  width: 90px;
  }

Code XHTML

<div id="gauche">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.
</div>

<div id="milieu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate 
velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan 
et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

<div id="droit">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
dolore magna aliquam erat volutpat.
</div>

Regardez le résultat en cliquant sur ce lien. La hauteur de toutes les colonnes (boîtes) est réglée par leurs contenus respectifs. Vous pouvez déclarez une hauteur fixe ou relative pour une boîte mais cela peut poser quelque souci. Si vous déclarer une hauteur fixe de disons 500px, vous risquez d'avoir une boîte trop petite quand l'écran est trop étroit. Si vous déclarez une hauteur relative en %, alors elle est en relation avec le bloc contenu, ce bloc doit avoir une hauteur explicite ce qui n'est pas pratique pour régler la bodey parce que nous avons besoin de l'épancher avec le contenu. Les spécifications se poursuivent pour dire qu'il n'y a pas de hauteur (height) explicite pour le bloc conteneur, le navigateur interprétera notre height en pourcentage comme height: auto, ce qui est la valeur par défaut de height bien suffisamment grande pour y accueillir le contenu de la boîte.

De ce fait, il n'y a pas de moyen pratique pour déclarer que les boîtes doivent avoir au moins la hauteur de la boîte la plus haute. Gardez à l'esprit que le web n'est pas de l'impression ; les choses sont flexibles parce qu'elle doivent s'accomoder à différents types de terminaux. Ce qui rend la conception web différente de l'édition imprimée est votre capacité de créer des gabarits plaisants tant sur le plan fonctionnel que visuel en utilisant les boîtes flexibles. Aussi gardez à l'esprit que le bas (bottom) bouge.

En cliquant sur ce lien, vous verrez le même gabarit avec moins de contenu dans la boîte du milieu pour comparer.

Trois Colonnes Avec Une Ligne en Haut de Page    

Prenons le même exemple que précédemment avec une boîte en haut qui contient l'information sur le titre, comme un logo de société et une barre de navigation. Parce qu'il y a deux types de boîtes en dessous de la boîte du sommet, deux choses sont à étudier. La boîte du milieu se tient sous la boîte du haut grâce au flux normal, de telle façon que la distance verticale entre elles se règle par la marge (margin). Mais les boîtes sur les côtés (gauche et droit) sont positionnées de manière absolues et de ce fait ne savent pas où sont les autres boîtes. Leurs valeurs top doivent être ainsi réglées à une valeur égale à la somme verticale de la hauteur de la boîte au sommet, des zones de remplissage (padding), des bordures et des marges afin de démarrer au même niveau que la boîte du milieu.

Tant que le flux fonctionne, ce type de gabarit est un assemblage de deux boîtes en flux normal formant ainsi une forme en T avec une paire de boîtes absolues qui sont retirées du flux et réglées dans les aires vides des côtés.

Il faut savoir que les documents XHTML sont conçus pour avoir un sens linéaire dans les navigateurs non compatibles CSS. Les boîtes CSS se suivant les unes avec les autres dans le flux ont aussi besoin d'entourer les sections de contenu qui se suivent les unes les autres dans le XHTML. Mais parce que les boîtes sur les côtés sont des boîtes absolues, le réglage du contenu à l'intérieur de celles-ci provient de n'importe quelle section du document. Gardez à l'esprit que le choix de votre type de boîte n'est pas seulement fondé sur une esthétique de gabarit mais est aussi là pour produire des exceptions ad'hoc au contenu linéaire de votre gabarit XHTML. Vous avez maintenant toutes les combinaisons pour vos besoins dans tous ces gabarits.

Le meilleur moyen de comprendre ceci est de prendre le balisage du dessous et le remplir avec un contenu avec lequel vous êtes familier. A ce stade, en réalisant que les besoins des id's gauche et droite ne doivent pas être dans quelque position particulière, jouez avec les combinaisons tout en les regardant avec et sans CSS. Cette flexibilité particulière de CSS sera mieux comprise à travers la pratique.

En cliquant sur ce lien, vous verrez le gabarit 3 colonnes avec une boîte au sommet

code XHTML


<body>
<div id="haut">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
dolore magna aliquam erat volutpat.
</div>

<div id="gauche">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet 
dolore magna aliquam erat volutpat.
</div>

<div id="milieu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel 
willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

<div id="droit">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>

CSS

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: black;
  background-color: #ccc;
  }
#haut {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  height: 70px;
  }
#gauche {
  position: absolute;
  top: 97px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  }
#milieu {
  margin: 0px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  }
#droit {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  }

Trois Colonnes Avec Une Ligne en Haut et une Ligne en Bas    

Naturellememt, parce que nous construisons des gabarits de plus en plus complexes au fil de ces exemples, vous vous attendez à une boîte en bas. Cette autre ressource de MarkNewhouse compatible avec NN4 vous montrera une manière de faire.

Sachez néanmoins que le problème concernant les exemples ci-dessus nous posent un problème : les boîtes positionnées sur les côtés sont hors du flux. Une boîte à travers le bas de page sera positionnées par la marge entre les boîtes de côté et la boîte du milieu. Et si ces boîtes de côté positionnées de manière absolu sont plus longues que la boîte du milieu, elles chevaucheront de ce fait une boîte du bas qui serait en travers de toute la largeur de la fenêtre. Aussi gardons pour notre exemple, une boîte en bas avec la même largeur que la boîte du milieu.

En cliquant sur ce lien, vous verrez le gabarit 3 colonnes avec une boîte au sommet et une boîte en bas

Voyons le code :

XHTML

<body>
<div id="haut">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat.
</div>
<div id="gauche">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat.
</div>

<div id="milieu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div id="droit">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
 aliquam erat volutpat.
</div>

CSS :

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }
#haut {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  height: 70px;
  }
#gauche {
  position: absolute;
  top: 97px;
  left: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  }
#milieu {
  margin: 0px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  }
#droit {
  position: absolute;
  top: 97px;
  right: 0px;
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  width: 90px;
  }
#bas {
  margin: 5px 122px 5px 122px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  }

Emboîtement    

Cliquez sur ce lien pour voir l'exemple de ce gabarit comprenant un emboîtement . Voilà un petit morceau de gâteau bien pratique pour déposer des petites portions de texte. Parce que ce type d'emboîtement peut être réutilisé, son auteur a choisi de lui affecter une class plutôt qu'une <div>. Vous pouvez ainsi déposer une boîte à l'intérieur de n'importe quelle boîte. Dans cet exemple, vous voyez une boîte centrée calée par des valeurs de margin, padding, et border. Elle se positionne à partir du flux normal et sa largeur se calcule à partir de l'espace disponible à l'intérieur de la zone de remplissage (padding) de ses éléments parents et la hauteur de son contenu. Les marges ont été réglées à zéro de telle façon que ses bordures s'aligent avec les bords de texte au-dessus et en-dessous.

XHTML :


<body>
<div id="contenu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.

<div class="BoxInterne">Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat.</div>

Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore 
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum 
zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>


</body>


CSS

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: black;
  background-color: #ccc;
  }
.BoxInterne {
  padding: 10px;
  margin: 10px 0px 5px 0px;
  border: 1px solid #000;
  }
#contenu {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  }

Pied de Page à Nouveau    

Apparenté à l'emboîtement vu au-dessus, il est aussi pratique et commode de disposer d'information ou d'une barre de navigation en pied de page. Ceci peut être réalisé avec une boîte dédiée. Ici l'auteur a conçu une boîte qui colle à celle au-dessus et réglé la marges entre elles à zéro ainsi qu'éliminé la bordure du haut de la boîte du bas. Le pixel simple divisant la ligne est la bordure du bas de la boîte du haut, mais nous aurions pu aussi facilement inversé les choses en utilisant la bordure du haut de la boîte du bas.

Cliquez sur ce lien pour voir l'exemple de ce gabarit comprenant un emboîtement de pied de page (nouvelle fenêtre) .

XHTML :

<body>
<div id="contenu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.
</div>


<div id="BarreNavigation">
< arrière | accueil | suivant >
</div>

</body>

CSS :

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }

#contenu {
  padding: 10px;
  margin: 5px auto 0px auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%
  }

#BarreNavigation {
  padding: 0px 10px 0px 10px;
  margin: 0px auto 5px auto;
  background-color: #fff;
  border-top: 0px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  width: 70%
  text-align: right;
  }

Images d'Arrière-Plan    

Une des choses intéressantes et plutôt jolies à propos des CSS est la capacité de placer des images d'arrière-plan dans n'importe laquelle de vos boîtes. Parce qu'elles sont liées à partir de la feuille de style et non pas dans votre code XHTML, limitez les à des éléments décoratifs adaptés à l'écran. Les images qui comportent une information essentielle devraient être placées dans votre XHTML.

Dans cet exemple (cliquez pour ouvrir dans une nouvelle fenêtre) pour remercier l'auteur (OwenBriggs) de ces exercices, j'ai simplement choisi de placer un logo typo comme image d'arrière-plan.

CSS

body {
  margin: 0px;
  padding: 0px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 22px;
  color: #000;
  background-color: #ccc;
  }

#contenu {
  padding: 20px 10px 10px 80px;
  margin: 5px auto 5px auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
  background-image: url(../Images/TheNoodleIncident.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
  }

Une image d'arrière-plan n'interfère pas avec le contenu d'une <div>. Et notez que la règle dit no-repeat. Par défaut, l'image d'arrière-plan est répétée pour donner un effet de papier peint. Vous pouvez aussi déclarer que l'image doit être répétée soit horizontalement ou verticalement.

[[markup]background: repeat-x] répètera l'image horizontalement

[[markup]background: repeat-y] répètera l'image verticalement

Vous pouvez aussi déclarer où placer l'image à l'intérieur de l'élément. Dans ce cas il est spécifié top-left. Pour cette propriété de background-position il existe deux valeurs. Une gère la dimension verticale avec les valeurs top, center ou bottom. Une autre gère la dimension horizontale avec les valeurs left, center ou right. Vous pouvez les utiliser dans n'importe quel ordre.

Vous pouvez aussi déclarer des %. 0% 0% correspond au coin du haut à gauche et 100% 100% le bas à droite.

Si cela ne vous suffit pas, utilisez les mesures de distance comme px, em, pt ou cm. L'unité em peut être commode pour aligner les boîtes avec les blocs de texte. Les points et centimètres sont mieux adaptées pour être utilisées dans des feuilles de style utilisées pour l'impression. Vous pouvez aussi combiner les pourcentages avec les unités de distance en fonction de vos besoins.

Mais pour finir, sachez que vous pouvez aussi jouer avec ces images en déclarant si elles peuvent rester fixes dans la vue du navigateur ou doivent défiler avec le scrolling.

[[background-attachment: scroll;] laisse défiler l'image. C'est la valeur par défaut (inutile de la spécifier)

[[background-attachment: fixed;] l'image d'arrière-plan reste fixée dans sa boîte au fur et à mesure que vous laissez défiler le document. Si vous laissez défiler la boîte qui contient l'image, à ce moment l'image deviendra invisible.

Une dernière chose à propos de [[background-image] : toutes les propriétés peuvent être combinées dans un format raccourci :

background: url(../image/crao.gif) #fff top left no-repeat;

Note: Pour qualifier l'url de l'image sur CityDesk c'est très facile :

  1. insérez l'image dans votre répertoire image (Insert > Picture),
  2. utilisez les noms magiques en effectuant un clic-droit sur le fichier image
  3. puis collez-le entre les parenthèses url(motmagique)

Un exemple de gabarit 2 colonnes    

Avant de quitter cette page, pratiquons un exemple simple où les boîtes disparaissent ! Même si le positonnement CSS utilise le modèle de boîte, ne vous sentez pas obligé d'infliger à vos lecteurs la structure de votre conception. En jouant avec différentes couleurs d'arrière-plan identiques et en évitant les bordures des boîtes, vous pouvez démarrer la production de gabarits soignés qui préservent la structure de votre message.

L'exemple ci-joint conçu par OwenBriggs (Cliquez ici pour ouvrir dans une nouvelle fenêtre est ni plus ni moins un gabarit à trois boîtes :

  1. Une boîte en haut : où vous mettrez le titre. La boîte est bordée en bas pour obtenir une ligne sous le titre tout en travers de la page. Le padding gauche (zone de remplissage) a été volontairement réglé à 0 pour aligner le titre avec la ligne de bordure.
  2. Une boîte de contenu
  3. Une boîte pour la barre à droite (sidebar)
La ligne séparant la boîte de contenu de la sidebar peut être définie soit par une bordure gauche de la sidebar ou une bordure droite du contenu. Dans l'exemple, la bordure gauche de la sidebar limite la longueur de la ligne à la taille de la boîte du contenu. A vous de juger !

Conclusion    

Cette page vous a présenté quelques exemples de gabarits CSS et peut allègrement se compléter avec toutes les ressources externes que vous trouverez en ligne ou dans les bons ouvrages. A ce titre je vous conseille vivement d'effectuer des recherches dans Google et d'approfondir le sujet en visitant les liens déposés sur la page RessourcesCSS.

Seule la pratique pourra vous permettre de vous détacher de la notion de boîtes pour construire des gabarits bien structurés. N'hésitez donc pas à pratiquer et jouer avec ces modèles basiques pour vous familiariser avec toutes les options disponibles.

Et naturellement, cette page reste ouverte à tout commentaire, correction ou compléments. A ce stade, il ne vous reste plus qu'à apprendre CommentEcrireDesCssEfficaces -- ChristopheDucamp

Ailleurs / Voir Aussi    

 
© GPL 20 Août, 2004