<!--:fr-->[tuto web] cadre avec bordures extensibles valide xhtml/css<!--:-->

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

janvier 13th, 2008 CSS Antoine

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 B_vert.png
  • BL_vert.png BL_vert.png
  • BR_vert.png BR_vert.png
  • L_vert.png L_vert.png
  • R_vert.png R_vert.png
  • T_vert.png T_vert.png
  • TL_vert.png TL_vert.png
  • TR_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é.

  1.  
  2. <div id="L">
  3. <div id="R">
  4. <div id="T">
  5. <div id="B">
  6. Mon texte</div>
  7.  
  8. <!--**** Fermeture #B **** --></div>
  9.  
  10. <!--**** Fermeture #T **** --></div>
  11.  
  12. <!--**** Fermeture #R **** --></div>
  13.  
  14. <!--**** Fermeture #L **** -->

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 :

  1.  
  2. <div id="L">
  3. <div id="R">
  4. <div id="T">
  5. <div id="B">
  6. <div id="TL"></div>
  7. <div id="TR"></div>
  8. <div id="BL"></div>
  9. <div id="BR"></div>
  10.  
  11. Mon texte ici : Hello world</div>
  12.  
  13. <!--**** Fermeture #B **** --></div>
  14.  
  15. <!--**** Fermeture #T **** --></div>
  16.  
  17. <!--**** Fermeture #R **** --></div>
  18.  
  19. <!--**** 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« ).

  1. div{position:relative}
  2.  
  3. #TL{
  4. position:absolute;
  5. background:url(images/TL_vert.jpg) left top;
  6. background-repeat:no-repeat;
  7. top:0px;
  8. left:0px;
  9. height:50px;
  10. width:50px
  11. }
  12. #TR{
  13. position:absolute;
  14. background:url(images/TR_vert.jpg) top right;
  15. background-repeat:no-repeat;
  16. top:0px;
  17. right:0px;
  18. height:50px;
  19. width:50px
  20. }
  21. #BL{
  22. position:absolute;
  23. background:url(images/BL_vert.jpg) bottom left;
  24. background-repeat:no-repeat;
  25. bottom:0px;
  26. left:0px;
  27. height:50px;
  28. width:50px
  29. }
  30. #BR{
  31. position:absolute;
  32. background:url(images/BR_vert.jpg) bottom right;
  33. background-repeat:no-repeat;
  34. bottom:0px;
  35. right:0px;
  36. height:50px;
  37. width:50px
  38. }

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!

  1. .div{position:relative} // tout au début du css pour factoriser le code
  2.  
  3. #L{
  4. background:url(images/L_vert.jpg) repeat-y 0 0;
  5. background-position:center left
  6. }
  7. #R{
  8. background:url(images/R_vert.jpg) repeat-y 100% 0;
  9. background-position:center right
  10. }
  11. #T{
  12. background:url(images/T_vert.jpg) repeat-x 0 0
  13. }
  14. #B{
  15. background:url(images/B_vert.jpg) repeat-x 0 100%
  16. }

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…

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

24 Responses and Counting...

  1. leau2001

    janvier 13, 2008

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

    En tout cas bon travail

    lo

  2. Guiral antoine

    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!

  3. *Serval

    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 !

  4. Guiral antoine

    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!

  5. *Serval

    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

  6. Guiral antoine

    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

  7. chris

    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.

  8. chris

    janvier 13, 2008

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

  9. Guiral antoine

    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!

  10. chris

    janvier 13, 2008

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

  11. Guiral antoine

    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é.

  12. chris

    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 ?

  13. Guiral antoine

    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à :-)

  14. chris

    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 !

  15. Guiral antoine

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

  16. Jerry Wham

    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.

  17. Antoine

    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é »).

  18. Patrick

    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…

  19. Antoine

    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

  20. angie_tresor

    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!

  21. Antoine

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

  22. Méli

    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 ?

  23. Antoine

    janvier 13, 2008

    Et bien en suivant ce tutoriel :D

  24. Méli

    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 ?

Leave a Reply

Default User

Your Name

janvier 13, 2008

* Name, Email, and Comment are Required

Get Adobe Flash playerPlugin by wpburn.com wordpress themes