Le positionnement précis des éléments, 2ème partie, suite

Reprenons le dernier exemple de la page précédente : les 4 calques centrés. Cette fois, au lieu de les entourer d'une bordure, je leur ai donné une couleur de fond afin de démontrer la possibilité de réaliser une mosaïque.

La particularité du commentaire que vous lisez en ce moment est qu'il se superpose en transparence sur les blocs de couleur. Cela signifie donc qu'il est possible de superposer plusieurs couches, pour peu qu'elles soient écrites dans le bon ordre. Dans le cas présent, le calque blc constitue la "couche de fond" (affiché lui-même sur le fond de la page !) sur laquelle viennent s'afficher les calques bl1, bl2, bl3 et bl4. Ce n'est pas tout : il ne suffit pas maintenant d'écrire le texte que vous lisez, ici, de façon traditionnelle dans le div ou calque principal. Il faut nécessairement l'installer, à son tour, dans son propre calque en le formatant (l'écrivant, si vous préférez) à la suite des autres mais dans le bloc principal si vous désirez l'aligner sur celui-ci. Il constitue donc la dernière écriture de cet ensemble ... qui sera clôturée par la dernière balise </div>.

Si vous avez des difficultés à lire le paragraphe précédent, vous pouvez éliminer les blocs de couleur. Pour les faire disparaître :cliquez ici !. Pour les faire revenir, cliquez ici !.

Voici un autre exemple de graphisme réalisable au moyen des calques. C'est toujours le même positionnement qui a été adopté pour les 4 blocs. Le calque blc est réglé en background:black .
La couleur de fond des autres a été éliminée au profit de deux nouvelles règles de style (différentes) pour chacun des blocs : border-left : unité de mesure/couleur et border-top : unité de mesure/couleur. De multiples combinaisons sont possibles en utilisant indifféremment tout ou partie des bordures et leur épaisseur, tout ou partie des couleurs de fond, etc. Vous pouvez également combiner styles et couleurs dans les bordures : allez donc voir dans les pages décrivant les familles de propriété ! Vous pourrez faire vagabonder votre imagination et votre créativité : les ressources sont presque infinies.
Un seul regret : les feuilles de style ne permettent pas (ou pas encore ...) de réaliser des calques avec coins arrondis ou d'autres formes géométriques.

Pour faire disparaître les blocs de couleur :cliquez ici !. Pour les faire revenir, cliquez ici !.
Pour faire disparaître le texte uniquement :Survolez ici !.

Avant de vous laisser aller à votre créativité, un dernier exemple d'utilisation de blocs en positionnement précis :

Ombrage avec calques superposés

2 calques de mêmes dimensions, une bordure partielle pour accentuer l'effet de profondeur, le tout installé dans un calque transparent afin de centrer les blocs et le tour est joué ...

Les règles formatant ces blocs sont visibles en code source ... les voici néanmoins :

#bloc1 {position:absolute; top:7px; left:137px; width:450px; height:131px; background:black}
#bloc2 {position:absolute; top:0px; left:130px; width:450px; height:131px; background:blue;
border-bottom:3px solid gray; border-right:2px solid gray; text-align:center; color:white}
#bloc3 {font-size:16px; background:lime; padding:5px; border:7px silver groove;
-moz-border-radius:13px; border-radius:13px}

La première ligne de règles définit le calque de fond (noir), la seconde correspond au calque superposé de couleur bleue. Le "bloc3" spécifie les règles du titre sur fond vert. Le tout, une fois de plus, est inséré dans un calque mère centré par rapport à la page. Vous aurez sans doute remarqué que le "bloc3" fait l'objet d'une règle supplémentaire, écrite de deux manières : -moz-border-radius:7px; border-radius:7px. Vous n'aurez pas trouvé cette règle dans CSS2 et pour cause : elle fait partie de la 3ème version dont la sortie officielle n'est pas encore connue à ce jour (13 février 2005). Les developpeurs de la fondation Mozilla ont toutefois pris les devants et déjà implémenté cette règle (parmi quelques autres, d'ailleurs) dans leurs navigateurs actuels.

Les visiteurs ne possédant qu'un vieux navigateur dépassé (Internet Exploser, au moins jusqu'à la version 6) ne verront rien de particulier. Les plus avisés, ceux qui utilisent la suite Mozilla ou Firefox, auront l'occasion d'apprécier les prémices d'un graphisme plus évolué grâce, uniquement, à cette merveilleuse technologie des règles de style. Aujourd'hui, il est intéressant de doubler l'écriture de cette règle : la première est destinée à faire appel à cette nouvelle implémentation dans les navigateurs de la famille Mozilla, la seconde est écrite en prévision de son implémentation possible dans d'autres navigateurs. Cette écriture "prévisionnelle" n'affecte en rien l'affichage actuel mais permet donc de pérenniser la feuille de style, évitant ainsi de devoir faire une correction ultérieure.

Vous y voyez plus clair ? Vous vous sentez d'attaque ? Alors, allez-y : tambourinez gaiement votre clavier !