CSS: bords arrondis et bloc sans taille fixe
28.05.2008 Tags: css,xhtml,tutoriel,English version available here! Cette technique est compatible Firefox, Safari (donc à prioris Konqueror également, étant donné qu'ils ont le même moteur de rendu des pages), Opera et IE 7. Pas IE 6? Non, et ce pour plusieurs raisons:1° de moins en moins de monde utilise ce... 'navigateur'
2° transparence des png non supportée
3° j'en ai marre de trouver des hacks pas possible, de compliquer mon code pour un navigateur qui ne respecte pas du tout les normes de rendu.
Vous pouvez toujours vous amuser à adapter mon code afin qu'il soit affiché correctement par IE 6. Personnellement, je m'en passe bien volontiers =)
Bref, passons au vif du sujet. Voici un croquis pour vous aider à comprendre le concept.
Tout d'abord il vous faudra 8 images: 4 pour les angles (n° 1->4) et 4 pour les bords reliant les angles (n° 5->8).
Vous devrez faire attention aux tailles de vos images. Par exemple, la largeur de 1 devra ête égale à celle de 8 et la hauteur de 1 devra être égale à celle de 5. Ceci implique que 1 et 4 auront la même largeur et 1 et 2 la même hauteur.
En ce qui concerne les bords, ce sont des images d'1px d'épaisseur qui seront placées en image de fond et répétées sur toute la hauteur (pour 6 et 8) ou largeur (pour 5 et 7).
Au niveau du code, nous aurons un bloc div dans lequel seront placées les différentes classes avec pour chacune une image de fond créant ainsi les diverses parties de notre bloc.
Tout d'abord, créons notre bloc principal: (le nom des images correspond au numéro sur le croquis)
#bloc {
width: 100%;
background:url("5.jpg") repeat-x left top transparent;
}
Ce bloc fera donc la même taille que le bloc parent (width: 100%) et aura pour image de fond le bord supérieur, répété sur toute la largeur du bloc (repeat-x left top). Tous les autres éléments seront à l'intérieur de ce bloc.
Dans notre page HTML, le bloc est créé ainsi:
<div id="bloc">
</div>
Nous devons ensuite placer notre bord inférieur (le 7).
#bloc .bord_bas {
background:url("7.jpg") repeat-x left bottom transparent;
}
Le fond est répété sur toute la largeur, mais cette fois nous allons le placer tout en bas du bloc (repeat-x left bottom). Ainsi quelle que soit la largeur du bloc, le bord sera placé tout en bas et répété.
Dans notre page:
<div id="bloc">
<div class="bord_bas">
</div>
</div>
Placons ensuite nos deux bords arrondis supérieurs avec ces deux classes:
#bloc .haut_droite {
display: block;
float: right;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("2.jpg") no-repeat right top transparent;
}
#bloc .haut_gauche {
display: block;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("1.jpg") no-repeat left top transparent;
}
Deux classes sont donc créées, chacune avec une taille fixe correspondant à la taille de l'angle. Le float: right de la classe haut_droite pousse l'élément tout à droite du bloc parent, placant ainsi notre angle haut-droit.
Dans notre page, nous allons placer ces deux classes à l'intérieur de la classe définissant le bord du bas:
<div id="bloc">
<div class="bord_bas">
<div class="haut_droite"></div>
<div class="haut_gauche"></div>
</div>
</div>
Passons ensuite à nos bords sur les côtés.
#bloc .bord_gauche {
background:url("8.jpg") repeat-y left top #000000; //la couleur correspond à la couleur de l'élément n°9
}
#bloc .bord_droit {
background:url("6.jpg") repeat-y right top transparent;
}
L'image de fond est donc répétée sur toute la hauteur du bloc parent (repeat-y).
Dans notre page, nous aurons ceci:
<div id="bloc">
<div class="bord_bas">
<div class="haut_droite"></div>
<div class="haut_gauche"></div>
<div class="bord_gauche">
<div class="bord_droit">
<!-- contenu du bloc ici (texte, images, etc) -->
</div>
</div>
</div>
</div>
Il ne nous reste plus qu'à placer nos deux derniers angles:
#bloc .bas_gauche {
display: block;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("3.jpg") no-repeat left top transparent;
}
#bloc .bas_droit {
display: block;
float: right;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("4.jpg") no-repeat right top transparent;
}
Et dans notre page:
<div id="bloc">
<div class="bord_bas">
<div class="haut_droite"></div>
<div class="haut_gauche"></div>
<div class="bord_gauche">
<div class="bord_droit">
<!-- contenu du bloc ici (texte, images, etc) -->
</div>
</div>
<div class="bas_droit"></div>
<div class="bas_gauche"></div>
</div>
</div>
Le css en entier:
#bloc {
width: 100%;
background-color: transparent;
background:url("5.jpg") repeat-x left top;
}
#bloc .bord_bas {
background:url("7.jpg") repeat-x left bottom transparent;
}
#bloc .haut_droite {
display: block;
float: right;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("2.jpg") no-repeat right top transparent;
}
#bloc .haut_gauche {
display: block;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("1.jpg") no-repeat left top transparent;
}
#bloc .bord_gauche {
background:url("8.jpg") repeat-y left top #000000; //la couleur correspond à la couleur de l'élément n°9
}
#bloc .bord_droit {
background:url("6.jpg") repeat-y right top transparent;
}
#bloc .bas_gauche {
display: block;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("3.jpg") no-repeat left top transparent;
}
#bloc .bas_droit {
display: block;
float: right;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("4.jpg") no-repeat right top transparent;
}
Ajouter un commentaire
Commentaires
Nice css.