Aller au menu - Aller au contenu

Icône Cadres arrondis avec des div

Par Avatar MadX
Mise à jour : 22/08/2008
200 visites depuis 7 jours, classé 421/786
Ce sujet revient assez souvent dans les forums, et pour cause : beaucoup se demandent comment faire de jolis cadres avec des coins arrondis et des images et ce, sans utiliser de tableaux.

La réponse ? Des div avec un soupçon de CSS par dessus, et le tour est joué !

Et en plus, c'est sémantiquement meilleur que des tableaux, alors on va pas s'en priver. :p
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Partie Xhtml

Objectif



On souhaite ici obtenir quelque chose dans ce style :

Image utilisateur

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 :p ).

Vous obtiendrez quelque chose du genre :

Code : HTML
1
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.
Retour en haut

Partie CSS

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 : CSS
1
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 :

Image utilisateur Image utilisateur Image utilisateur Image utilisateur

Ne les utilisez pas, j'ai fait mon découpage comme un barbare, elles ne font pas toutes la même dimension :p .


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 : CSS
1
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 utiliser un padding pour décoller un peu le texte du bloc central, mais dans ce cas, il vous faudra aussi diminuer les dimensions du cadre (car marge gauche + largeur du bloc + marge droite = largeur totale), sauf sous IE ... et là, ça casse tout :( . Mais bon en même temps, IE, ce n'est pas étonnant que ça rende mal.

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 !
Retour en haut
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.
Retour en haut

Partager

Retour en haut
43 commentaires pour "Cadres arrondis avec des div"
Note moyenne : 2.88 / 4 (25 votes)
Pseudo Commentaire
Hors ligne shiraly # Posté le 02/08/2010 à 14:07:35

Bonjour, les lignes suivantes fonctionnent bien sous firefox, mais pas sous ie.
#header-blocks {
float: right;
padding: 1em;
background-image:url(../images/corner_bottom_l.png), url

(../images/corner_bottom_r.png), url(../images/corner_top_l.png), url

(../images/corner_top_r.png), url(../images/shadow-mirror-b.png), url(../images/shadow-

mirror-L.png), url(../images/shadow-mirror-t.png), url(../images/shadow-mirror-R.png), url

(../../../../default/files/dots_gold.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-

y, repeat-x, repeat-y, repeat;
background-position:bottom left, bottom right, top left, top right, 0 bottom, 0 0, 0pt top,

right 0;
}
dommage que Microsoft persiste à vouloir absolument offrir moins!
Hors ligne Neiss # Posté le 07/06/2011 à 21:21:23
Avatar

Avis : Décevant

Ville : Breuillet
Pays : France métropolitaine

 Je trouve ce tuto inutile la solution tient en une seule propriété CSS:

Code : CSS
1
border:radius : 10px;


Cette propriété a été officialisé début 2011 mais les navigateurs le reconaisse depuis un certain temps. Si vous avez un éditeur de texte trop ancien peut être qu'il e colorera pas votre texte comme ci-dessus. par exemple moi je n'ai pas le tout dernier Notepad donc il ne reconait pas cette propriété et ne va pa le colorer mais ça n’empêche que ça va marcher car les navigateurs le connaisse.

Neiss


Citation:


;) Je suis jeune et je met toute les chances de mon coté :p
 
Hors ligne gulnos # Posté le 04/08/2011 à 15:21:02

Je pense que l'objectif de ce tutoriel n'est pas de faire un bord arrondi, mais simplement d'arriver à intégrer son propre border sous forme d'image ...

Cette solution est pas mal pour pas devoir faire de l'absolute mais j'ai toujours pas trouvé le moyen d'obtenir le même résultat pour un div extensible (en fonction du contenu ou simplement en fonction de la taille du div contener si quelqu'un aurait une idée ?
Hors ligne gulnos # Posté le 04/08/2011 à 20:01:48

Après m'être torturé l'esprit quelques heures, j'ai trouvé une solution qui permet :

- De choisir son type de positionnement (le div avec la bordure reste positionnable facilement, sans se soucier de ce qu'il y a a l'intérieur)
- De s'adapter au contenu (il n'est pas nécessaire de préciser la hauteur ou la largeur du div)

et donc résout le problème que j'avais.

Cela pourrait être une piste d'amélioration pour cette méthode ci.

Voici mon code :



Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div id="detail" class="test">
        <div class="gh">        
        <div class="db">
        <div class="gb">
        <div class="dh">
        <div class="h"></div>
        <div class="gm">
        <div class="dm">
        
                    <div class='contend'>
                                    /* CONTENU */
                    </div>
        </div>
        </div>
        <div class="b"></div>
        </div>
        </div>
        </div>
        </div>
</div>


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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.gh {
	
	background-image:url(../images/design/block/gh.png);
	background-repeat:no-repeat;
	background-position: top left;
	margin:0px;
	padding:0px;
}
.gm {

	background-image:url(../images/design/block/gm.png);
	background-repeat: repeat-y;
	background-position: left;
	margin:0px;
	padding:0px;
}
.gb {

	background-image:url(../images/design/block/gb.png);
	background-repeat:no-repeat;
	background-position: bottom left;
	margin:0px;
	padding:0px;
}
.dh {
	
	background-image:url(../images/design/block/dh.png);
	background-repeat:no-repeat;
	background-position: top right;
	margin:0px;
	padding:0px;
}
.dm {
	background-position: right;
	margin:0px;
	padding:0px;
	padding-left:7px;
	padding-right:7px;
	background-image:url(../images/design/block/dm.png);
	background-repeat: repeat-y;
	
}
.db {
	background-position: bottom right;
	margin:0px;
	padding:0px;
	background-image:url(../images/design/block/db.png);
	background-repeat:no-repeat;
}
.h {
	background-position: top ;
	margin-left:7px;
	margin-right:7px;
	left:0px;
	right:0px;
	height:7px;
	padding:0px;
	background-image:url(../images/design/block/h.png);
	background-repeat: repeat-x;
	
}
.b {
	
	margin:0px;
	margin-left:7px;
	margin-right:7px;
	left:0px;
	right:0px;
	bottom:0px;
	height:7px;
	background-image:url(../images/design/block/b.png);
	background-repeat: repeat-x;
}


.contend {
	padding:10px;
	background-image:url(../images/design/block/bg.png);
}



Il y a peut-etre du code inutile la de dans car j'ai chipoté pas mal ...

Mais en tout cas le fait d'imbriquer les balises qui servent à la bordure permet à chacune d'entre elles de prendre la bonne taille.

Biensûr ça reste pas propre, etc ... mais ça a le mérite d'être efficace sans CSS3...
Hors ligne remontees # Posté le 12/11/2011 à 12:18:55
Vive Symfony2 !
Avatar

 Je pense que ce tutoriel ne sert plus à grand chose à l'ère du CSS3.
Pensez à indiquer les messages qui vous ont aidé et à indiquer vos problèmes résolus ;)
XHTML 1.0/CSS <= 2 : IIIIIIIIII
PHP/MySQL : IIIIIIIIII
Javascript : IIIIIIIIII
HTML5/CSS3 : IIIIIIIIII



Citation
Je sais plus ce que j'écrivais ! :)
Qui que quoi dont où
Alors j'ai activé la prévisualisation automatique !
Citation : Moi
Eh oui

Et maintenant je suis tranquille !



Mon site : http://remontees.free.fr
 

Voir tous les commentaires