Calques et positionnement relatif

Voici quelques exemples des possibilités graphiques réalisées avec les CSS

Attention : seul Internet Explorer 5 et supérieurs affichent correctement les 3 premiers blocs !

Exemple de blocs imbriqués simples

Bloc de tête

Bloc 1 gauche

Bloc 1 droit

Bloc 2 gauche

Bloc 2 droit

Bloc 3 gauche

Bloc 3 droit

Règles de style et commentaires :

#ensemble {width:760px; height:232px; border:1px solid state;}
#cadre {float:left; width:330px; height:230px;margin-left:auto; margin-right:auto;
text-align:center; background-color:silver;font-family:Arial,Helvetica; font-size:12px}
#conteneur {width:300px; height:200px; margin:15px;}
#tete {width:300px; height:25px; background-color:black;color:yellow}
#b1g {width:100px; height:25px; background-color:lime;float:left; color:red}
#b2g {width:100px; height:100px; float:left;background-color:white; color:black}
#b1d {width:200px; height:50px; float:right;background-color:red; color:white}
#b2d {width:200px; height:75px; float:right;background-color:yellow; color:blue}
#b3g {width:150px; height:50px; float:left;background-color:#ffffcc; color:black}
#b3d {width:150px; height:50px; float:right;background-color:#ccccff; color:red}
#texte {width:420px; height:230px; background-color:#ffffcc;float:right}

Selon les recommandations du W3C, dans cet exemple, il faut ajouter à chacun des sélecteurs la propriété/valeur

position : relative .

Exemple de blocs imbriqués comportant une bordure

Bloc de tête

Bloc 1 gauche

Bloc 1 droit

Bloc 2 gauche

Bloc 2 droit

Bloc 3 gauche

Bloc 3 droit

Règles de style et commentaires :

Pour obtenir l'encadrement de l'ensemble de blocs situé à gauche, il a été ajouté à chacun des sélecteurs imbriqués dans le cadre gris la règle suivante :

border : 2px solid fuchsia

et pour le bloc de texte dans lequel se trouve ce commentaire :

border : 10px solid #cccfff

Exemple de blocs imbriqués contenant des objets

Etonnant, non ? gif

Commentaires :

Ce groupe de blocs imbriqués contient un certain nombre d'objets destinés à démontrer une possibilité de présentation graphique sortant de l'ordinaire. A condition de positionner correctement les objets grâce à la propriété

padding

qui peut être

top, left, right ou bottom

vous obtiendrez un ensemble correct ne redimensionnant pas les calques.

Amusant, non ? Pour obtenir un affichage correct dans Mozilla (le futur Netscape ?) et permettre ainsi d'être compatible avec un pourcentage important d'internautes, il aura fallu se passer de la bordure externe et des bordures de chacun des blocs. Par ailleurs, pour compenser ces absences, les blocs ont été redimensionnés de quelques pixels et une petite astuce a été utilisée pour cacher une marge impossible à régler pour satisfaire les 2 protagonistes ... Voyez ci-dessous :

Enfin : Mozilla et Internet Explorer sont d'accord !

Bloc de tête

Bloc 1 gauche

Bloc 1 droit

Bloc 2 gauche

Bloc 2 droit

Bloc 3 gauche

Bloc 3 droit

Règles de style et commentaires :

#mensemble {width:760px; height:230px; background-color:#ffffcc; border:3px red inset; text-align:center}
#mconteneur {float:left; width:330px; height:230px}
#mtete {width:330px; height:40px; background-color:navy; color:yellow}
#mb1g {width:110px; height:35px; float:left; background-color:lime; color:red}
#mb2g {width:110px; height:100px; float:left; background-color:white; color:black}
#mb1d {width:220px; height:60px; float:right; background-color:red; color:white}
#mb2d {width:220px; height:75px; float:right; background-color:yellow; color:blue}
#mb3g {width:170px; height:55px; float:left; background-color:#ffffcc; color:black}
#mb3d {width:160px; height:55px; float:right; background-color:#ccccff; color:red}
Il aura également fallu sortir du calque la dernière ligne reprise ci-dessous :

#mtexte {width : 420px; height : 230px; float : right; background-color : #ffffcc; font-size : 10px; font-family : Arial,Verdana ; text-align : left}

... faute de quoi, le cadre comportant le texte aurait été automatiquement redimensionné en hauteur par le navigateur.

Essayez à votre tour avec d'autres dimensions : ce sera un excellent exercice pour vous permettre de vérifier si vous avez bien suivi les exposés précédents.
Le problème est que, malgré tous vos efforts et dans l'état actuel des navigateurs, vous n'obtiendrez pas un résultat aussi parfait que les 3 premiers : il y aura inévitablement des différences d'alignement ... Alors, à vous de choisir : être "compatible" avec 95 % des butineurs ou vous contenter d'être parfait pour près de 80 % d'entre eux.

Mais ... à quoi peut bien servir ce genre de fantaisie, diront certains.
La réponse tient en deux mot : pages dynamiques. Comment : en installant (par exemple) un ensemble de calques imbriqués (pourquoi pas aux dimensions d'un écran (ou fenêtre) complet !?) comportant une série de liens dont le survol peut produire un "rollover" déporté affichant un texte en surimpression, ou le remplacement d'un calque par un autre, etc... Un petit script pour réaliser ces évènements et le tour est joué. En fait, il y a parfois loin de la théorie à la pratique ...

Voyez dans le premier exposé traitant des pages dynamiques : il y est question de superposition de calques.
Faites aussi une incursion dans la rubrique "Html et JavaScript" : j'y présente là une autre alternative aux pages dynamiques dans l'exposé relatif aux fenêtres à dimensions variables ... vous vous souvenez ... : les fameuses (ou fumeuses ?!?) "pop-up" ! Vous y trouverez un mélange des 3 langages de base dans "Rollover déporté, pop-up et interactivité : (d)étonnant !".