Discussion :

[Erakis]

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à

[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 ? ^^

[franculo_caoulene]

Salut,

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 :

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
<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é.

[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" ?

[Candygirl]

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

Serait-il possible de voir le visuel final souhaité ?

[Erakis]

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).

[Erakis]

J'ai fait plusieurs recherche sur Internet mais en vain... Quelqu'un d'autre à une solution ?

[franculo_caoulene]

Je ne comprends pas, ton image montre bel et bien un tableau. Pourquoi essayer d'utiliser des div à la place?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.