Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Objectif
On souhaite ici obtenir quelque chose dans ce style :
Oui, je sais, c'est très moche, mais au moins c'est facile à comprendre, vous devriez même déjà voir comment on va fonctionner !
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 :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <?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>
|
Vous remarquerez que j'ai préparé l'inclusion du CSS directement dans le code source de la page, mais vous pouvez bien évidemment le placer dans un fichier séparé et utiliser <link /> pour l'appeler (ce qui est d'ailleurs plus répandu et plus conseillé pour la construction d'un site).
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>:
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <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
).
Vous obtiendrez quelque chose du genre :
Code : HTML1 | 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 !
Vous pouvez remarquer que j'ai sauté des lignes entre les blocs, je vous recommande de le faire, c'est plus agréable à relire par la suite.
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 :
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | .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 :
Code : CSS1
2 | .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 :
Ne les utilisez pas, j'ai fait mon découpage comme un barbare, elles ne font pas toutes la même dimension
.
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 :
Code : CSS1
2
3
4
5
6 | .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.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
. Mais bon en même temps, IE, ce n'est pas étonnant que ça rendre mal.
799 Zéros connectés |
9 requêtes |
0.0291s (0.013s)
