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.
- 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é.
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>
- <!--**** Fermeture #B **** --></div>
- <!--**** Fermeture #T **** --></div>
- <!--**** Fermeture #R **** --></div>
- <!--**** Fermeture #L **** -->
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…
User Responses
24 Responses and Counting...
Leave a Reply
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)
[2 birthday] 2 ans aujourd'hui = 2 smashing book à gagner
[tuto web] cadre avec bordures extensibles valide xhtml/css
[tuto mashup] Google maps sur votre site : c'est possible! (version statique)
- 7 Tools You Should Be Using For Better Web Designs 4 février 2010 Jacob Gube
- Link Underlines Grow to Backgrounds on Hover 4 février 2010 Chris Coyier
- [facebook] Du nouveau sur la roadmap 3 février 2010 Antoine
- Jive 3 février 2010 Stéphane
- [facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php 3 février 2010 Antoine




![[facebook] Du nouveau sur la roadmap](http://antoine.guiral.info/wp-content/uploads/2010/02/facebook_logo.png)
![[facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php](http://antoine.guiral.info/wp-content/uploads/2010/02/hiphop.jpg)
![[apple iPad] énorme succés de l’iPad à la dernière keynote d’apple](http://antoine.guiral.info/wp-content/uploads/2010/01/ipad.jpg)
![[google] google, le 51ème état?](http://antoine.guiral.info/wp-content/uploads/2010/01/51emeetat.jpg)
janvier 13, 2008
Bonjour j’aimerai savoir si cette technique est utilisable pour les blockquote ?
En tout cas bon travail
lo
janvier 13, 2008
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!
janvier 13, 2008
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 !
janvier 13, 2008
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!
janvier 13, 2008
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
janvier 13, 2008
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
janvier 13, 2008
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.
janvier 13, 2008
pardon, je vous mets un lien:
Lien vers la page
janvier 13, 2008
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!
janvier 13, 2008
donc si je comprends bien, ce n’ est pas extensible en largeur ?
janvier 13, 2008
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é.
janvier 13, 2008
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 ?
janvier 13, 2008
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à
janvier 13, 2008
Bonjour, j’ y suis parvenu, je vous montre ce que ça donne, ce sont les deux cadres de couleur sur cette page:
Cliquez !
janvier 13, 2008
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
janvier 13, 2008
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.
janvier 13, 2008
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é »).
janvier 13, 2008
Merci Antoine,
Après plusieurs jours de recherche personnel et sur le Web, voilà une méthode simple et efficace pour réaliser des cadres arrondis extensibles. Une seule critique : la méthode ne permet pas d’utiliser des images gif pour exploiter la transparence.
J’ai adapté la solution d’Antoine pour rendre possible l’utilisation des gifs que je vous livre ici à titre d’exemple :
Cadres arrondis
body {
font-family: »Lucida Grande »,Arial,Verdana,sans-serif;
font-size:12px;
font-style:normal;
font-size-adjust:none;
word-spacing:1.5px;
line-height:15px;
background-color: #A1EEDA;
}
/*————————————————– CADRE */
.cadre{
border:1px solid yellow;
position:relative;
width:300px;
}
.cadre div{
position:relative;
}
.content{
top:-50px; /* top = – hauteur d’un coin */
border:1px solid black;
padding:6px;
}
#TL{
position:absolute;
background:url(images/TL_vert.jpg) left top no-repeat;
top:0; left:0;
height:50px; width:50px;
}
#TR{
position:absolute;
background:url(images/TR_vert.gif) top right no-repeat;
top:0; right:0;
height:50px; width:50px;
}
#BL{
xborder:1px solid blue;
position:absolute;
background:url(images/BL_vert.gif) bottom left no-repeat;
bottom:0; left:0;
height:50px; width:50px;
}
#BR{
xborder:1px solid blue;
position:absolute;
background:url(images/BR_vert.gif) bottom right;
background-repeat:no-repeat;
bottom:0; right:0;
height:50px; width:50px;
}
#L{
margin-top:50px; margin-bottom:50px;
background:url(images/L_vert.gif) center left repeat-y;
}
#R{
background:url(images/R_vert.jpg) center right repeat-y;
}
#T{
top:-50px;
margin-left:50px; margin-right:50px;
background:url(images/T_vert.jpg) top repeat-x;
}
#B{
top:100px; /* 2 x 50px */
background:url(images/B_vert.jpg) bottom repeat-x;
}
Le début
Mon texte ici : Hello worldMon texte ici : Hello worldMon texte ici : Hello world
Mon texte ici : Hello worldMon texte ici : Hello worldMon texte ici : Hello world
Mon texte ici : Hello worldMon texte ici : Hello worldMon texte ici : Hello world
Mon texte ici : Hello worldMon texte ici : Hello worldMon texte ici : Hello world
et la suite…
janvier 13, 2008
Merci patrick d’avoir poster ta solution
cela sera surement utile à d’autres personnes 

N’hesites pas a repasser par ici, bonne continuation
Antoine
janvier 13, 2008
Bonjour,
Je viens de commencer avec PHP. Je suis vraiment « nulle » là dedans, j’y comprends rien. Heureusement que je suis « tombée » sur cette page, quelle chance! J’en ai vraiment besoin. seulement, j’ai une « grande » petite question: est-il possible de créer une fonction pour la création d’un cadre extensible?
merci beaucoup de me répondre! je patiente largement!
janvier 13, 2008
Bonjour,
il faut bien que tu dissocies tout les aspects de la programmation web. Ce que tu vois dans le navigateur est en XHTML+CSS. Les effets que tu vois dans to nnavigateur sont dus à javascript. Tandisque les actions que tu ne vois pas (traitement de formulaire etc) sont fait sur le serveur en php.
Ici je propose une structure de cadre en xhtml+css qui est extensible via javascript. Pas de php ici
A bientôt
janvier 13, 2008
Bonsoir,
J’ai créer un design pour mon site et il y a des bordures mais pas comme dans le tuto : (voila l’image du site)
http://www.section-kaotik.be/test/site.jpg
Comment puis-je faire pour intégrer mes bordures pour quelles soient extensible ?
janvier 13, 2008
Et bien en suivant ce tutoriel
janvier 13, 2008
oki !
Sinon dernière question je dois découper les bordure de la même façon que dans le tutoriel ? Je veux dire découpe par petit morceaux ou je les découpes tels quelles sont sur l’image ?