Faire des bordures en image sans la balise Table

Beaucoup de design demande que les bordures des cadres de contenu soient des images pour avoir des bords aux motifs complexes ou faire des effets d'ombre. Bien qu'il existe des propriétés CSS3 qui gèrent cela à présent, la compatibilité sur tous les navigateurs ne sera possible que si ceci est réalisé avec du CSS standard et du HTML.

Avec un tableau ou la mauvaise façon de faire

L'objet HTML presque exclusivement utilisé pour réaliser cela est la balise <table> et ses enfants <tr> et <td>. C'est l'un des rares objets permettant dans sa configuration brute de gérer dynamiquement un cadre qui s'adapte au contenu qu'il contient sans CSS.

Cependant, l'usage premier d'une balise <table> est d'afficher des données sous forme de tableau et ne doit servir qu'à ça.

Donc se servir de la balise <table> pour faire du positionnement de contenu c'est mal et se servir de la balise <table> pour faire des cadres en image c'est mal.

Un exemple de ce qui certes fonctionne mais qui n'ai pas à faire ci-dessous :

On ne doit jamais utiliser la balise <table> pour autre chose que du contenu de type donnée

Mauvaise façon : Avec ce type de structure HTML :

<table class="global">
    <thead>
        <tr>
            <td class="top-left"></td>
            <td class="top"></td>
            <td class="top-right"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="left"></td>
            <td class="content">{Contenu réel}</td>
            <td class="right"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="bottom-left"></td>
            <td class="bottom"></td>
            <td class="bottom-right"></td>
        </tr>
    </tfoot>
</table>

ça marche effectivement en collant :

• des images de type coin en background-image des classes top-left, top-right, bottom-left, bottom-right,
• des images qui se répètent en repeat-x_des classes top et bottom et
• des images qui se répètent en repeat-y des classes left et right.

Avec une div ou la bonne pratique

Mais alors comment réaliser des bordures en images autour d'un contenu ?

Par n'importe quel autre moyen possible et imaginable ! Les seuls contraintes seront la compatibilité inter-navigateur.

Sachez qu'il est tout à fait possible de faire remplir ce rôle par des <div> de façon aussi dynamique que le tableau <table>. Les <div> divisent l'espace d'affichage et permettent au CSS d'habiller le tout.

Et comme je suis de bonne humeur, je vais livrer ici ma technique qui est compatible tout navigateur ! Quelle chance ;)

Une bonne manière de créer des cadres dynamiques en image sans tableau

Bonne façon : En utilisant cette structure HTML :

<div class="global-width">
    <div class="top-right">
        <div class="bottom-right">
            <div class="bottom-left">
                <div class="top-left">
                    <div class="top"></div>
                    <div class="left">
                        <div class="right">
                            <div class="content-height">
                                {Contenu réel}
                            </div>
                        </div>
                    </div>
                    <div class="bottom"></div>
                </div>
            </div>
        </div>
    </div>
</div>

il suffit d'associer :

• des images de type coin en background-image des classes top-left, top-right, bottom-left, bottom-right,
• des images qui se répètent en repeat-x des classes top et bottom et
• des images qui se répètent en repeat-y des classes left et right.

La largeur du tableau ce paramètre avec la classe global-width et sa hauteur avec la classe content-height.

Attention : La largeur se calcule en incluant la largeur des bords left et right alors que la hauteur se calcule en excluant la hauteur des bords top et bottom.

Voici un exemple de CSS associé pour notre tableau :

div.global-width {
    width: auto;
}

div.content-height {
    height: auto;
}

div.top {
    margin-left: 23px;
    margin-right: 23px;
    height: 23px;
    background-image: url('top.png');
    background-repeat: repeat-x;
}

div.top-right {
    background-image: url('top-right.png');
    background-position: top right;
    background-repeat: no-repeat;
}

div.right {
    padding-right: 23px;
    background-image: url('right.png');
    background-position: right;
    background-repeat: repeat-y;
}

div.bottom-right {
    background-image: url('bottom-right.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

div.bottom {
    margin-left: 23px;
    margin-right: 23px;
    height: 23px;
    background-image: url('bottom.png');
    background-repeat: repeat-x;
}

div.bottom-left {
    background-image: url('bottom-left.png');
    background-position: bottom left;
    background-repeat: no-repeat;
}

div.left {
    padding-left: 23px;
    background-image: url('left.png');
    background-repeat: repeat-y;
}

div.top-left {
    background-image: url('top-left.png');
    background-repeat: no-repeat;
}

Autres modèles avec des <div>

Si vous avez d'autres modèles n'hésitez pas à les laisser dans les commentaires, je les ajouterai ici.

Structure en semi-tableau

Voici une alternative qui vous semble peut-être plus naturelle. Cependant sous IE7 et IE8 il y a un décalage de pixel impossible à enlever justement au niveau des flottants,. À réserver donc si vous ne supportez pas ces navigateurs.

<div class="global-width">
    <div>
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="top"></div>
    </div>
    <div class="left">
        <div class="right">
            <div class="content-height">
                {Contenu réel}
            </div>
        </div>
    </div>
    <div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
        <div class="bottom"></div>
    </div>
</div>

en appliquant :

• à top-left, bottom-left un float: left;,
• à top-right, bottom-right un float: right; et
• à top et bottom un margin-left: <largeur bord gauche>; et margin-right: <largeur bord droit>;.