Convertir une table en CSS

Version imprimable

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:

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:

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:

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

27/05/2008, 09h14
Er3van

Qu'est ce que tu entends pas CSS pur ?
J'avoue que c'est un peu confus...
Le CSS sert à mettre en forme les balises HTML, il n'y a pas vraiment de STRUCTURE CSS...

Et les tables c'est très bien, qu'est-ce que tu leur reproches ? ^^

Salut,

Citation:

Envoyé par Er3van

Et les tables c'est très bien, qu'est-ce que tu leur reproches ? ^^

Les tables c'est bien pour faire des tableaux, or dans le code proposé on ne voit pas plusieurs lignes. On peut donc en déduire que les tables sont utilisées pour de la mise en page.

Une solution serait de faire des div conteneurs de colonnes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div style="width : 100%"> <div id="left"> <div class="TopLeft"></div> <div class="MiddleLeft"></div> <div class="BottomLeft"></div> </div> <div id="middle"> <div class="TopCenter"></div> <div class="MiddleCenter">Bonjour à tous....</div> <div class="BottomCenter">Bonjour à tous....</div> </div> <div id="right"> <div class="TopRight"></div> <div class="MiddleRight"></div> <div class="BottomRight"></div> </div> </div>
Le problème, apparemment, devient un problème d'accessibilité. Une règle accessiweb stipulant que l'ordre du contenu dans le code html devrait être que son rendu. Or BottomLeft vient avant TopCenter alors que dans le navigateur on verrait TopLeft directement suivi de TopCenter.

Enfin, je suis nul en accessibilité.

27/05/2008, 17h18
Erakis

Er3van : Par pure CSS, j'enttendais des DIV, tout sauf une table.

En fait aussi les tables me gêne souvent lorsque vient le temps d'effectuer la mise en page côté IMPRESSION. Et comme franculo_caoulene l'a dit ; Dans ce cas-ci, ce n'est pas pour faire des tableaux mais plutôt pour de la mise en forme et de l'esthétique...

franculo_caoulene : J'aime bien votre solution, mais pour l'essayer il me faudrait savoir qu'elle est la définition des classes "left", "middle", et "right" ?
27/05/2008, 17h51
Candygirl

Citation:

Envoyé par Erakis

J'ai réalisé des boites de texte, avec des bordures spéciales.

Serait-il possible de voir le visuel final souhaité ?
27/05/2008, 19h49
Erakis

1 pièce(s) jointe(s)

Biensur ;)

Cependant, il faut vous dire que j'ai plusieurs DIFFÉRENT encadrés pour ce site web. Dans ce cas-ci, le coin haut droit est coupé en 45° et le fond est transparent. Dans d'autres cas, c'est le coin gauche qui est coupé et la couleur de fond est unie. Et dans la pluspart des cas, l'encadré doit s'adapter au contenu, donc il doit être extensible (élastique).
29/05/2008, 02h53
Erakis

J'ai fait plusieurs recherche sur Internet mais en vain... Quelqu'un d'autre à une solution ?
29/05/2008, 09h52
franculo_caoulene

Je ne comprends pas, ton image montre bel et bien un tableau. Pourquoi essayer d'utiliser des div à la place?
29/05/2008, 15h03
Erakis
En fait tu as raison sur ce point, à l'intérieur c'est effectivement un tableau.

Sauf que cette bordure doit être appliquée autour de ce tableau. Ces tableaux sont fait des GridView (ASP.NET).

Lorsque viendra le temps d'imprimer ces tableau, je ne voudrai pas de ces bordures, avec des DIV je crois que ce sera beaucoup plus facile qu'avec une table. Sinon je devrai faire quelque chose du genre :
Code:

1 2 3 4 5 6 7 .TopLeft { height : 0px; height : 0px; border : none; }
De sorte qu'il soit invisible et ne prenne pas de place sur la feuille d'impression.