[tuto web] cadre avec bordures extensibles valide xhtml/css

Ecrit par Antoine le 13 janvier 2008

Classé dans: tutoriel Tags: accessibilité, css, design, tutoriel, valide, w3c, web, xhtml

Bonjour à tous!

Comme promis un petit tutoriel pour la création de cadres avec bordures extensibles valide XHTML 1.1 et CSS. C’est cette méthode que j’utilise pour le design de mon cv en ligne.

Les images

Pour vous faciliter la tâche je vous mets les images utilisées pour ce tutoriel. Cependant rien ne vous empeche d’utiliser les votres! Donc clic droi -> enregistrer l’image sous puis renommez les.

B_vert.png
BL_vert.png
BR_vert.png
L_vert.png
R_vert.png
T_vert.png
TL_vert.png
TR_vert.png

Le XHTML

Le premier point est assez simple à comprendre : on veut que notre cadre soit extensible en hauteur et en largeur. Nous souhaitons en plus pouvoir mettre une image de bordure différente pour chaque cotés de notre cadre.

Nous allons imbriquer nos “div” les uns dans les autres. De cette manière les “div” les plus à l’exterieur s’ajusteront automatiquement à la taille du “div” le plus imbriqué.

<div id="L">
<div id="R">
<div id="T">
<div id="B">
Mon texte
</div>
</div>
</div>
</div>

Vous pouvez voir que j’ai déjà placé des “id” dans mes “div” de manière a pouvoir appliquer des styles à chacun d’eux. “L” correspondant à “left” pour la bordure de gauche, “R” à “right” pour celle de droite, “T” à “top” pour celle du haut et enfin “B” à “bottom” pour celle du bas.

Attention : pensez à utiliser des “class” plutot que des “id” si vous utilisez plusieurs cadres du même type sur votre page.

A ce moment là nous avons une structure extensible pour laquelle nous pouvons mettre grace au CSS des bordures. Cependant il nous manque la possibilité de placer nos angles. En effet, le CSS nous permet de ne placer qu’une seule image grace à la propriété background-image:url(path/to/mon-image.png). Donc ici 4 “div” nous donne 4 bordures : il nous manque les 4 “div” correspondant aux 4 angles de notre cadre.

Voila ce que l’on obtient :

<div id="L">
<div id="R">
<div id="T">
<div id="B">
<div id="TL"> </div>
<div id="TR"> </div>
<div id="BL"> </div>
<div id="BR"> </div>
Mon texte ici : Hello world
</div>
</div>
</div>
</div>

Pas besoin de vous expliquer les “id“? Allez je vous fait le premier : “TL” pour “top-left” ce qui correspond au coin supérieur gauche,etc…

Remarque 1 : nous n’imbriquons pas les “div” qui servent aux angles. Nous les placerons grace au CSS.

Remarque 2 : nous n’utilisons pas la balise “img” pour les angles alors qu’il n’y à pas de répétitions. Pourquoi? Parce qu’il est important de séparer une image de contenu (une illustration pour votre texte par exemple, ou un logo) et une image de présentation ou de design (les images de nos bordures ou une image de fond).

Le CSS

Commençons par positionner les angles. On va les positionner en “absolute” dans le conteneur parent (ici : le div “id#B“).

div{position:relative}
#TL{
position:absolute;
background:url(images/TL_vert.jpg) left top;
background-repeat:no-repeat;
top:0px;
left:0px;
height:50px;
width:50px
}
#TR{
position:absolute;
background:url(images/TR_vert.jpg) top right;
background-repeat:no-repeat;
top:0px;
right:0px;
height:50px;
width:50px
}
#BL{
position:absolute;
background:url(images/BL_vert.jpg) bottom left;
background-repeat:no-repeat;
bottom:0px;
left:0px;
height:50px;
width:50px
}
#BR{
position:absolute;
background:url(images/BR_vert.jpg) bottom right;
background-repeat:no-repeat;
bottom:0px;
right:0px;
height:50px;
width:50px
}

Commentaire 1 : les arguments après l’url de l’image servent à positionner le background dans le bloc pour assurer le positionnement si le div est plus grand que l’image de l’angle.

Commentaire 2 : les top, left, right, bottom à “0px;” sont là pour placer les “div” pour les angles. Ne pas oublier qu’on les positionne en absolute!

Commentaire 3 :les height et width définissent la taille des “div” pour les angles. Vous devez ajuster ces valeurs en fonction de VOS images.

Plus que les bordures (ouf!). Comme d’habitude le source et on décortique après!

.div{position:relative} // tout au début du css pour factoriser le code
#L{
background:url(images/L_vert.jpg) repeat-y 0 0;
background-position:center left
}
#R{
background:url(images/R_vert.jpg) repeat-y 100% 0;
background-position:center right
}
#T{
background:url(images/T_vert.jpg) repeat-x 0 0
}
#B{
background:url(images/B_vert.jpg) repeat-x 0 100%
}

Commentaire 1 : attention au repeat-y et repeat-x suivant que l’on travaille sur une bordure horizontale ou verticale. A chaque fois on utilise une images de largeur très fine (par exemple 2px) à laquelle on appliquera un repeat. Cela nous donne la caractère extensible.

Commentaire 2 : le background-postion est une autre manière de positionner le fond dans le bloc (à comparer au commentaire 1 des angles).

Voila vous avez tout pour réussir vos cadres extensibles. Si vous avez des questions je reste bien sûr à votre entière disposition. Et n’hésitez pas à me laisser des commentaires, à me signaler des bugs, coquilles, etc etc…

Partagez cet article :

Autres articles intéressants :

Articles les plus actifs :

previous:Veosearch : le moteur de recherche caritatif

Next:[gestion de projet] TimmyOnTime : gérer votre temps avec votre messagerie instantanée

17 utilisateurs ont (ou a) réagi à cet article

Abonnez-vous au flux RSS de cet article ou faites un Trackback

leau2001 A dit le 27 janvier 2008 @8:16

Bonjour j’aimerai savoir si cette technique est utilisable pour les blockquote ?

En tout cas bon travail

Guiral antoine A dit le 27 janvier 2008 @9:23

Bonjour lo,
Tout d’abord merci pour ton commentaire!

Pour répondre à ta question je pense que c’est possible dans le sens où la balise blockquote est de type block (contrairement à la balise q qui est equivalente mais de type inline). CEPENDANT : la méthode que je propose est l’imbrication de div. Avec des div pas de prob vu que c’est une balise neutre donc cela reste juste sémantiquement. Tandis que imbriquer 8 blockquote n’aurais aucun sens. Donc oui c’est possible mais non ce n’est pas requommandé (ni même valide je pense).

Utilise tu “vraiment” la balise blockquote? (c’est a dire avec l’attribut “cite”) Si c’est le cas place ta citation dans les 8 div imbriqué (ceux du tuto). Si tu n’utilise pas l’attribut “cite” et bien abandonne ton blockquote et utilise les css pour avoir le même décalage.

J’espère avoir répondu a ta question!

A bientôt! Et bon courage pour ton blog!

*Serval A dit le 1 février 2008 @21:34

Bonjour,

Ayant exactement le même besoin que ce tuto, et après avoir essayé une autre manière qui ne fonctionnait pas comme je le voulais, j’ai fait une recherche google et je suis tombé ici. J’ai suivi le tuto à la lettre mais aucune des bordures ne s’affichent…

http://www.serval.be/Kavanaghs/
Je voulais faire un cadre dans le footer pour y mettre quelques infos.

Sauriez-vous d’où vient le problème ?

Merci d’avance pour votre aide !

Guiral antoine A dit le 3 février 2008 @20:17

Bonjour Serval,
désolé de ne pas avoir répondu plus tôt mais ce wend je n’avais pas internet (et c”était très très dur!). Je viens d’aller sur ta page et ton footer me parait bien (mais apparement tu as utiliser une autre méthode que celle que j’expose). Si tu as des questions je reste à ta disposition bien sur!

A bientôt!

*Serval A dit le 3 février 2008 @22:59

Bonjour,

en effet j’ai modifié mon footer depuis en utilisant une autre technique.
Mais il me reste 2 problèmes. Premièrement, la balise qui contient le texte qui s’affiche dans le cadre essaye de prendre le maximum de largeur possible. Donc les bords gauche et droite du cadre ne se ressenrent pas correctement autour du texte. Si quelqu’un a une idée sur la manière de faire prendre à ce le minimum de largeur possible sans la fixer, ca m’interesse.

Secondement, j’ai un léger problème sous IE8 qui inverse le coin inférieur droit avec un morceau de bordure droite. Ce problème disparait si je retire le padding de ce coin, mais alors le cadre se ressert trop verticalement. J’essayerais demain de ne mettre qu’un padding top et bottom.

Si quelqu’un a des pistes pour m’aider, ce serait très aimable de sa part de me les exposer
Merci

*Serval

Guiral antoine A dit le 3 février 2008 @23:38

Re!

Pour le second problème (angle inferieur droit decalé vers le haut) je pense que cela vient d’un problème de marge. Si tu regarde bien sur IE ton paragraphe est collé à ta bordure supérieur. Sinon utilise la méthode du tuto pour positionner tes images en absolute dans tes angles…Si le problème de marge ne résoud rien fixe un “height” ou un “min-height” (attention aux diff navigateurs) à ton div le plus à l’interieur (voir tuto).

Pour le premier probleme (largeur utilisée au max)…et bien cela vient du fait que les paragraphes comme les divs sont des balises “block”…cependant je ne voit pas le prob sur les bordures (sous FF2 et IE7)…tu le vois sur quoi?

Je sais pas si je t’ai aidé:)…

Antoine

chris A dit le 11 mars 2008 @19:48

Bonjour et avant tout bravo pour ce code.
Je rencontre un problème en l’ essayant.
en effet le bloc prend toute la largeur de ma page alors que j’ aimerais qu’ il s’ adapte en fonction de ce que je tape.
Ai-je loupé quelque chose ?
Cordialement.

chris A dit le 11 mars 2008 @20:00

pardon, je vous mets un lien:
Lien vers la page

Guiral antoine A dit le 11 mars 2008 @20:01

bonjour chris!

Tu n’as rien loupé : les balises div prennent toutes la largeur de la fenetre (si tu dev avec firefox avec la barre de dev fait ctrl+maj+y pour voir la taille de chaque élément). Donc tu peux utilisé un min-width (pas compatible sur tous les navigateurs) ou fixer une largeur en %.

EDIT :

ceci pour la classe .L te permet de fixer la largeur :

position:relative;
weight:50%;

ceci pour la classe .B te permet d’adapter la hauteur de ton div en fonction du contenu :
height:auto;
en faisant attention d’adapté le padding bottom

J’espere t’avoir aider à bientot!

chris A dit le 11 mars 2008 @20:23

donc si je comprends bien, ce n’ est pas extensible en largeur ?

Guiral antoine A dit le 11 mars 2008 @20:28

si, la structure en elle même est extensible en largeur (www.e-caveavin.com/cv/) mais une balise div prend toute la largeur qu’on lui donne donc si tu ne fixe pas la largeur ton cadre prendra toute l’espace occupé.

chris A dit le 11 mars 2008 @20:39

ok, en fait je pensais que le cadre s’ adaptait seul et automatiquement en fonction de ce que je tape.
C’ est le cas en hauteur mais pas en largeur c’ est ça ?

Guiral antoine A dit le 11 mars 2008 @20:56

C’est le cas en hauteur avec l’attribut height:auto. Pour la largeur c’est différent. Renseigne toi sur la balise div c’est elel qui régit tou dans ce cas là

chris A dit le 12 mars 2008 @23:10

Bonjour, j’ y suis parvenu, je vous montre ce que ça donne, ce sont les deux cadres de couleur sur cette page:
Cliquez !

Guiral antoine A dit le 12 mars 2008 @23:16

Salut,
je viens d’aller voir! Très bien!

Tes cadres avec les bordures de différentes epaisseur rendent très bien vraiment!

Je fais faire un tuto sur la façon de faire des coin arrondi grâce à jQuery.

Bonne continuation et à bientôt sur ce blog j’espere

Jerry Wham A dit le 28 octobre 2008 @10:54

Bonjour,

Pour pouvoir utiliser le code plusieurs fois dans la même page, ne vaut-il pas mieux utiliser des classes plutôt que des index?
Sinon, merci pour ce tuto.

Antoine A dit le 28 octobre 2008 @11:28

Salut Jerry,
en effet si tu veux que tes cadres aient le même comportement certains id devront être transformés en class. Dans d’autres cas (http://cv.antoine-guiral.fr) chaque cadre devra avoir ses propres id (bien que certain éléments aient le même comportement et pourraient être “classifié”).