Bonjour à tous,

J'ai réalisé des boites de texte, avec des bordures spéciales. Étant plus facile pour moi, j'ai fait la conception avec des tables, mais j'aimerais les convertir en pure CSS, et je n'y arrive pas

Voici les styles :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
td.TopLeft 
{
    background-image :url(images/TopLeft.gif);
    background-repeat :no-repeat;
    width :14px;
    height 12px;
}
td.TopCenter
{
    background-image :url(images/TopCenter.gif);
    background-repeat :repeat-x;
    height :12px;
}
td.TopRight
{
    background-image :url(images/TopRight.gif);
    background-repeat :no-repeat;
    width :14px;
    height 12px;
}
 
td.MiddleLeft 
{
    background-image :url(images/MiddleLeft.gif);
    background-repeat :repeat-y;
    width :14px;
}
td.MiddleCenter
{
 
}
td.MiddleRight
{
    background-image :url(images/MiddleRight.gif);
    background-repeat :repeat-y;
    width :14px;
}
 
td.BottomLeft 
{
    background-image :url(images/BottomLeft.gif);
    background-repeat :no-repeat;
    width :14px;
    height : 4px;
}
td.BottomCenter
{
    background-image :url(images/BottomCenter.gif);
    background-repeat :repeat-x;
    height :4px;
}
td.BottomRight
{
    background-image :url(images/BottomRight.gif);
    background-repeat :no-repeat;
    width :14px;
    height :4px;
}
Voici la table faisant office de petite boîtes :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<table border="0px" cellpadding="0" cellspacing="0">
<tr>
    <td class="TopLeft"></td>
    <td class="TopCenter"></td>
    <td class="TopRight"></td>
</tr>
<tr>
    <td class="MiddleLeft"></td>
    <td class="MiddleCenter">
         Coucou !!!<br>
         Ligne #2 !!!
    </td>
    <td class="MiddleRight"></td>
</tr>
<tr>
    <td class="BottomLeft"></td>
    <td class="BottomCenter"></td>
    <td class="BottomRight"></td>
</tr>
</table>
J'aimerais la convertir... du genre :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<div style="width : 100%"> 
  <div class="TopLeft"></div>
  <div class="TopCenter"></div>
  <div class="TopRight"></div>
 
  <div class="MiddleLeft"></div>
  <div class="MiddleCenter">Bonjour à tous....</div>
  <div class="MiddleRight"></div>
 
   ...
</div>
Une des emmerde avec ça, c'est que TopCenter n'aura jamais la même largeur variable que MiddleCenter

Bref, j'aurais vraiment besion d'aide sur celle-là