Faire des cadres décoratifs avec des <DIV>.
Cadre étroit (une seule ligne)
une seule ligne
Code source
<STYLE TYPE="text/css" >
div.exemple-1-gauche,
div.exemple-1-gauche,
div.exemple-1-droite,
div.exemple-1-droite,
div.exemple-1-haut,
div.exemple-1-haut,
div.exemple-1-bas,
div.exemple-1-bas,
div.exemple-1-corp
{border:1px dashed rgb(255,0,0); padding:2px}/*debug*/

div.exemple-1-gauche{
background-position:0 50%;
background-repeat:no-repeat;
background-image: url(truc.gif);
background-color:rgb(255,143,143);
padding-left:20px;
}

div.exemple-1-droite{
position:relative;
background-position:100% 50%;
background-repeat:no-repeat;
background-image:url(truc.gif);
background-color:rgb(143,255,143);
padding-right:20px;
}

div.exemple-1-haut{
background-position:0 0;
background-repeat:repeat-x;
background-image:url(truc.gif);
background-color:rgb(143,143,255);
padding-top:20px;
}

div.exemple-1-bas{
background-position:0 100%;
background-repeat:repeat-x;
background-image:url(truc.gif);
background-color:rgb(255,50,255);
padding-bottom:20px;
}

div.exemple-1-corp{
background-color:rgb(143,143,143);
}
</STYLE>

<DIV class="exemple-1-droite">
<DIV class="exemple-1-gauche">
<DIV class="exemple-1-haut">
<DIV class="exemple-1-bas">
<DIV class="exemple-1-corp">
une seule ligne
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
Cadre multiligne
Plusieurs
lignes
Code source
<STYLE TYPE="text/css" >
div.exemple-2-haut-gauche,
div.exemple-2-haut-gauche,
div.exemple-2-haut-droit,
div.exemple-2-haut-droit,
div.exemple-2-haut-milieu,
div.exemple-2-haut-milieu,
div.exemple-2-gauche,
div.exemple-2-gauche,
div.exemple-2-corp,
div.exemple-2-droite,
div.exemple-2-droite,
div.exemple-2-bas-gauche,
div.exemple-2-bas-gauche,
div.exemple-2-bas-droit,
div.exemple-2-bas-droit,
div.exemple-2-bas-milieu,
div.exemple-2-bas-milieu
{border:1px dashed rgb(255,0,0);padding:2px}/*debug*/

div.exemple-2-haut-gauche{
background-position:0 0;
background-repeat:no-repeat;
background-image:url(truc.gif);
background-color:rgb(255,143,143);
padding-left:20px;
}

div.exemple-2-haut-droit{
background-position:100% 0;
background-repeat:no-repeat;
background-image:url(truc.gif);
background-color:rgb(143,255,143);
padding-right:20px;
}

div.exemple-2-haut-milieu{
background-position:0 0;
background-repeat:repeat-x;
background-image:url(truc.gif);
background-color:rgb(143,143,255);
padding-top:20px;
}

div.exemple-2-gauche{
background-position:0 0;
background-repeat:repeat-y;
background-image:url(truc.gif);
background-color:rgb(255,143,143);
padding-left:20px;
}

div.exemple-2-corp{background-color:rgb(143,143,143);}

div.exemple-2-droite{
background-position:100% 0;
background-repeat:repeat-y;
background-image:url(truc.gif);
background-color:rgb(143,255,143);
padding-right:20px;
}

div.exemple-2-bas-gauche{
background-position:0 100%;
background-repeat:no-repeat;
background-image:url(truc.gif);
background-color:rgb(255,143,143);
padding-left:20px;
}

div.exemple-2-bas-droit{
background-position:100% 100%;
background-repeat:no-repeat;
background-image:url(truc.gif);
background-color:rgb(143,255,143);
padding-right:20px;
}

div.exemple-2-bas-milieu{
background-position:0 100%;
background-repeat:repeat-x;
background-image:url(truc.gif);
background-color:rgb(143,143,255);
padding-top:20px;
}
</STYLE>

<DIV class="exemple-2-haut-gauche">
<DIV class="exemple-2-haut-droit">
<DIV class="exemple-2-haut-milieu"></DIV>
</DIV>
</DIV>
<DIV class="exemple-2-gauche">
<DIV class="exemple-2-droite">
<DIV class="exemple-2-corp">
Plusieurs<BR>lignes
</DIV>
</DIV>
</DIV>
<DIV class="exemple-2-bas-gauche">
<DIV class="exemple-2-bas-droit">
<DIV class="exemple-2-bas-milieu"></DIV>
</DIV>
</DIV>
LEIôPAR Jeudi 25 mars 2004 A propo...
beurk - Message posté par opus le 07/04/2009 à 17:20
beurk !... mieux vaut pas apprendre que de faire des horreurs pareilles !
- Message posté par le 08/11/2009 à 17:06
- Message posté par lsga le 25/03/2014 à 18:50 - dernier !
ce que c laid