Coté design, le web2 c’est la grande mode les coins arrondis, quand on en connait la taille, c’est assez facile à réaliser, mais c’est plus compliqué si le contenu ou la taille de la fenêtre peuvent redimenssioner la zone.La technique de base consiste à imbriquer plusieurs éléments à la suite afin de pouvoir définir plusieurs images fonds avec des positionnements différents.
La boite est découpée en 9 zones :
- 4 coins fixes ( 1, 3, 7 et 9 ).
- 4 bords à taille variable ( 2, 4, 6 et 8 ) qui devront contenir des images supportant d’être répétées.
- 1 zone de fond d’une couleur unie.
Le code HTML devra donc contenir 9 DIVs. Mais attention à l’ordre dans lequel vous les disposer. Le dernier élément défini apparaitra au dessus des autres. Il faut donc d’abords définir le fond puis les bords et enfin les coins.
-
-
<div class="roundedBox">
-
<div class="area area5">
-
<div class="area area2">
-
<div class="area area4">
-
<div class="area area6">
-
<div class="area area8">
-
<div class="area area1">
-
<div class="area area3">
-
<div class="area area7">
-
<div class="area area9">
-
<!– Contenu de la boite –>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
Il ne reste plus qu’à définir les images de fond des 9 zones :
-
-
.roundedbox .area1{
-
background:url(image1.gif) no-repeat top left;
-
}
-
.roundedbox .area2{
-
background:url(image2.gif) repeat-x top;
-
}
-
.roundedbox .area3{
-
background:url(image3.gif) no-repeat top right;
-
}
-
.roundedbox .area4{
-
background:url(image4.gif) repeat-y left;
-
}
-
.roundedbox .area5{
-
background:#fff;
-
}
-
.roundedbox .area6{
-
background:url(image6.gif) repeat-y right;
-
}
-
.roundedbox .area7{
-
background:url(image7.gif) no-repeat bottom left;
-
}
-
.roundedbox .area8{
-
background:url(image8.gif) repeat-x bottom;
-
}
-
.roundedbox .area9{
-
background:url(image9.gif) no-repeat bottom right;
-
}
-
Et pour placer correctement le texte, on règle le padding de la dernière zone :
-
-
.roundedbox .area9{
-
padding:10px;
-
}
-
A ce stade, si on réduit trop la boite, les images vont se chevaucher. Pour éviter ça, on définit les dimensions minimales :
-
-
.roundedbox .area{
-
min-height:250px;
-
min-width:50px;
-
height:auto !important;
-
width:auto !important;
-
height:250px;
-
width:50px;
-
}
-
Tant que le contenu sera du texte simple, tout fonctionnera à merveille. Mais si on commence à utiliser des float ou des clear, on peut facilement rencontrer des problèmes. Pour ça on applique le clearfix et un nouveau contexte de formatage à chaque zone :
-
-
.roundedbox .area{
-
zoom:1;
-
overflow:hidden;
-
display: inline-block;
-
}
-
-
.roundedbox .area:after {
-
content: ".";
-
display: block;
-
height: 0;
-
clear: both;
-
visibility: hidden;
-
}
-
-
* html .roundedbox .area{height: 1%;}
-
-
.roundedbox .area{display: block;}
-
Selon les besoins, cette technique peut s’appliquer à des boites plus ou moins complexes. Par exemple, une boite qui ne se redimensionne que dans un sens (verticalement ou horizontalement) ne nécessitera que 3 Divs imbriqués, mais une boite avec une entête et un pied eux même redimensionnables pourra nécessiter jusqu’à 21 Divs et on peut continuer comme ça en ajoutant des colonnes ou des lignes supplémentaires à la boite. Il n’y a pas de limites.
Le nombre de DIV nécessaires est en fait égal au nombre d’images + le nombre de zones de contenu.
Ca peut vite être assez lourd à gérer et surtout ça augmente le poids de la page et ça peut vite s’avéré gênant. Du coup, il y’a la solution du javascript :
Aille atroce.. Dans le genre, je ralentis mon site à cause de multiples requètes HTTP, et le parseur de mon navigateur avec un code HTML hallucinant..
Déja avec du CSS sprite çà passerait mieux mais à éviter!!