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…
Autres articles intéressants :
- [certification mysql] #6 DDL : Modification de tables
- [certification mysql] #5 DDL : Création de tables
- [certification mysql] #4 DDL : Création de base de données
- [certification mysql] #3 DDL : Moteurs de stockage
- [html/css]ferme de liens
Articles les plus actifs :
- [tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2) (28)
- [tuto mashup] Google maps sur votre site : c'est possible! (version statique) (22)
- [tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2) (19)
- [tuto mashup] Galerie photo animée via Flickr : animer votre galerie (2/2) (17)
- [tuto web] cadre avec bordures extensibles valide xhtml/css (17)
- [vu sur le net] #1 résumé (7)
- [tuto flex] hello world en flex: il y a un début à tout! (6)
- [vu sur le net] #2 dominante développement et entrepreneuriat (6)
- Qui suis-je? (4)
- [annonce] La patate "fuzz" sur le web!! (et j'aime pas olivier martinez :p) (4)














![[certification mysql] #6 DDL : Modification de tables](http://antoine.guiral.info/wp-content/themes/Forte-fr/images/no-image.gif)










Bonjour j’aimerai savoir si cette technique est utilisable pour les blockquote ?
En tout cas bon travail
lo