Tutoriel : Cadres arrondis avec des div

Objectif

On souhaite ici obtenir quelque chose dans ce style :

Tout d'abord, il nous faut un peu de Xhtml pour le contenu.

Explication de la méthode

Pour faire des cadres arrondis, il nous faut au moins 9 cases (ici, des <div>) : une pour chaque coin, une pour les 4 bordures, et une pour le contenu.

Comment y arriver ?

Plusieurs méthodes s'offrent à vous :

soit faire trois lignes de trois cases,
soit placer les neufs blocs et se servir du CSS pour les renvois à la ligne.

J'expliquerai ici la seconde méthode, qui nous permet de faire des économies de <div>, ce qui n'est pas négligeable si vous avez plusieurs cadres (blocs de news, par exemple).

Le code pas à pas

Commençons par un document vierge :

<?xml version="1.0" encoding="UTF-8"?> <!-- L'encodage dépend de vous, moi je fonctionne en UTF8 mais beaucoup préfèreront l'iso 8859-1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Cadres arrondis</title>
                <style type="text/css">
                
                        
                
                </style>
        </head>
        
        <body>
        </body>
        
</html>

Ensuite, on va définir tous les blocs dont on a besoin. Je vais regrouper tous ces blocs dans un autre, ce qui permet, par exemple dans un site web, de positionner le bloc entier :) .

Insérez entre <body> et </body>:

<div class="cadre_arrondi">
                        
                        <div class="hg"></div>
                        <div class="haut"></div>
                        <div class="hd"></div>
                        
                        <div class="gauche"></div>
                        <div class="contenu">Ici, c'est le contenu du cadre !</div>
                        <div class="droite"></div>
                        
                        <div class="bg"></div>
                        <div class="bas"></div>
                        <div class="bd"></div>
                
</div>

Enregistrez la page et ouvrez-la avec votre navigateur préféré (Firefox, donc :p ).

Vous obtiendrez quelque chose du genre :

Ici, c'est le contenu du cadre !

Magnifique, n'est-ce pas ?

Bon, ben on en a déjà fini avec le Xhtml. Évidemment, vous pouvez placer du texte dans les blocs mais ça, ça dépend de vous !

Attaquons maintenant la partie consistante.

Nous allons avoir besoin des propriétés suivantes :

float : permet de rendre un bloc flottant,
background-image : permet de définir une image de fond,
background-color : permet de définir une couleur de fond,
width : permet de spécifier la largeur d'un bloc,
height : permet de spécifier la hauteur d'un bloc.

On va commencer par définir les dimensions de tous les blocs. Le bloc principal fait 500 * 500 pixels. Les coins 50 * 50. Au final, on a ça :

.cadre_arrondi {
        width: 500px;
        height: 500px;
}
                        
.hg, .hd, .bg, .bd {
        width: 50px;
        height: 50px;
}
                
.haut, .bas {
        width: 400px;
        height: 50px;
}
                        
.gauche, .droite {
        width: 50px;
        height: 400px;
}
                        
.contenu {
        width: 400px;
        height: 400px;
}

Bien sûr, si vous regardez votre page maintenant, ça va être moche. Très moche.

Pour remédier à cela, on va commencer par ordonner un peu les blocs et les rendre flottants.
Pour cela on utilise la propriété float: left;.
Mais il nous faut aussi utiliser clear, qui permet en quelque sorte de dire à un bloc : "ne fais pas attention aux flottants, positionne-toi normalement (donc, en dessous)".

On donne cette propriété uniquement aux blocs de gauche (.hg, .gauche, .bg).

On va donc rajouter dans notre CSS :

.cadre_arrondi div { float: left; } /* S'apllique à tous les divs de .cadre_arrondi */
.hg, .gauche, .bg { clear: left; } /* Pour passer outre le float des blocs précédents */

Ensuite, il nous faut des images pour les coins. Bon, moi je les ai fait rapidement, donc j'ai ça :

On utilise la propriété background-image pour les mettre en fond, et on en profite pour mettre une couleur de fond aux blocs .haut, .bas, .gauche et .droite :

.hg { background-image: url('haut_gauche.png'); }
.hd { background-image: url('haut_droite.png'); }
.bg { background-image: url('bas_gauche.png'); }
.bd { background-image: url('bas_droite.png'); }
                        
.haut, .bas, .droite, .gauche { background-color: #c98206; }

Et voilà, un magnifique cadre !

Vous pouvez aussi bien évidemment mettre des images de fond dans tous les blocs, c'est la même méthode que pour les coins.

En tous cas, maintenant, vous avez la méthode !

Voilà pour les bases.
Vous noterez que c'est quand même assez facile : je vous laisse le soin de faire de jolies images et des cadres qui déchirent tout, c'est à la portée de tous, la méthode restant tout le temps la même que celle expliquée ici.

Tutoriel : Cadres arrondis avec des div

Table des matières

Cadres arrondis avec des div

Partie Xhtml