Discussion :

[laurentSc]

Bonsoir,

je cherche à faire des coins arrondis à l'aide d'images de fond. Mais le code suivant ne marche pas (les images sont dans le même répertoire que le code) :

Code html :

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

1
2
3
4
5
6
7
<div class="board">
<div class="topRightCorner"></div>
<div class="topLeftCorner"></div>
test
<div class="bottomRightCorner"></div>
<div class="bottomLeftCorner"></div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
.siteMap2 .board{background-color:#eaeaea;width:100%;color:#626469;margin-bottom:0px!important;}
.siteMap2 .board a{font-family:Arial;font-size:11px;padding:1px 0;}
.siteMap2 .topLeftCorner,
.siteMap2 .topRightCorner,
.siteMap2 .bottomLeftCorner,
.siteMap2 .bottomRightCorner{width:2px;height:2px;background-repeat:no-repeat;font-size:0px;color:#87d300;}
.siteMap2 .topLeftCorner{background:url("topleftroundcorner.png");topleft;}
.siteMap2 .topRightCorner{background:url("toprightroundcorner.png");float:right;topright;}
.siteMap2 .bottomLeftCorner{background:url("bottomleftroundcorner.png");bottomleft;}
.siteMap2 .bottomRightCorner{background:url("bottomrightroundcorner.png");float:right;bottomright;}

Quelle est la raison ?

[papajoker]

ou est la classe siteMap2 dans le code html ?
ou bien
pourquoi une classe siteMap2 dans le css ?

[laurentSc]

En fait, le code html que j'ai montré est inclus dans une table html :

Code html :

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
<table cellspacing=0 cellpadding=0 width="790" style="border:1px solid white" class="siteMap2">
...
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="Menu1" ><tr><td>
<table cellspacing="0" cellpadding="0"><tr><td>
<div class="board">
<div class="topRightCorner"></div>
<div class="topLeftCorner"></div>
test
<div class="bottomRightCorner"></div>
<div class="bottomLeftCorner"></div>
</div>
</td></tr></table>
</td></tr></table>
</td>
...

et comme j'ai un peu modifié le code CSS (qui n'est pas de moi) en voulant répondre (et que j'anticipe une question) :

Code css :

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
.siteMap2 .normal,
.siteMap2 .selected{cursor:pointer;}
.siteMap2{width:790px;}
.siteMap2 a{color:inherit;font-family:inherit;font-size:inherit;margin:0;padding:0;}
.siteMap2 .normal *{font-weight:bold;color:white;}
.siteMap2 *{margin:0;padding:0;font:bold ;font-family: Arial;font-style:normal;text-decoration:none;color:#626469;}
.siteMap2 .Menu1{height:20px;}
.siteMap2 .Menu1 *{width:240px;font-weight:normal;}
.siteMap2 .Menu1 a{width:100%;font-weight:inherit;color:#626469;}
.siteMap2 .Menu1_roundTop .top{height:5px;background-color:transparent;line-height:0;background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greytop.gif");}
.siteMap2 .Menu1 .normal *{font-weight:bold;color:#626469;}
.siteMap2 .Menu1 .selected .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1 .selected *{font-weight:bold;color:white;}
.siteMap2 .Menu1 .selected a{width:115px;font-weight:bold;color:white;}
.siteMap2 .Menu1_rollover .Menu1_roundTop .top{background-image:url("http://www.schneider-electric.fr/gc_1_0/images/structure/roundCorner_greentop.gif");}
.siteMap2 .Menu1_rollover .Menu1_content{background-color:#87D300;height:20px;}
.siteMap2 .board{background-color:#eaeaea;width:100%;color:#626469;margin-bottom:0px!important;}
.siteMap2 .Menu1 .board a{font-family:Arial;font-size:11px;padding:1px 0;}
.siteMap2  .Menu1 .topLeftCorner,
.siteMap2 .Menu1 .topRightCorner,
.siteMap2 .Menu1 .bottomLeftCorner,
.siteMap2 .Menu1 .bottomRightCorner{width:2px;height:2px;background-repeat:no-repeat;font-size:0px;color:#87d300;}
.siteMap2 .Menu1 .topLeftCorner{background:url("topleftroundcorner.png");topleft;}
.siteMap2  .Menu1 .topRightCorner{background:url("toprightroundcorner.png");float:right;topright;}
.siteMap2 .Menu1 .bottomLeftCorner{background:url("bottomleftroundcorner.png");bottomleft;}
.siteMap2 .Menu1 .bottomRightCorner{background:url("bottomrightroundcorner.png");float:right;bottomright;}

[Candygirl]

Bonsoir,

Quel est l'intérêt de le mettre dans un tableau ?
Ne peux-tu pas simplement utiliser un border-radius ?

[laurentSc]

Quel est l'intérêt de le mettre dans un tableau ?

Le code n'est pas de moi, et même si je sais qu'on déconseille une mise en page à l'aide de tables, le code marche et sa taille me décourage de changer ça.

Ne peux-tu pas simplement utiliser un border-radius ?

On m'avait déjà dit que c'est incompatible avec IE (http://www.developpez.net/forums/d13...ndis-sous-ie8/) et je voudrais utiliser la 3e solution que préconisait Rodolphe...

[papajoker]

Voila, du code bien sale pour ie8 (non testé)
j'ai mis 8px pour les arrondis, ils étaient a 2px ! ca dépend de l'image !

Code :

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

1
2
3
4
5
6
7
8
9
10
.board{ padding:8px; margin:0.5em 0; background-color:#eaeaea; width:100%; color:#626469; position:relative; }
.board a{font-family:Arial;font-size:11px;padding:0;  }
.board .topLeftCorner,
.board .topRightCorner,
.board .bottomLeftCorner,
.board .bottomRightCorner{width:8px;height:8px;background-repeat:no-repeat;font-size:0px; overflow:hidden; position:absolute; }
.board .topLeftCorner{background:url("topleftroundcorner.png");top:0; left:0;}
.board .topRightCorner{background:url("toprightroundcorner.png");top:0; right:0 ;}
.board .bottomLeftCorner{background:url("bottomleftroundcorner.png");bottom:0;left:0;}
.board .bottomRightCorner{background:url("bottomrightroundcorner.png");bottom:0;right:0;}

et le cadre sans tables

Code html :

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

1
2
3
4
5
6
7
<div class="board" style="width:200px">
   <div class="topRightCorner"></div><div class="topLeftCorner"></div>
 
      test de cadre de 200px
 
   <div class="bottomRightCorner"></div><div class="bottomLeftCorner"></div>
</div>

[Candygirl]

On m'avait déjà dit que c'est incompatible avec IE

Les utilisateurs de IE8 (soit, en principe, uniquement les personnes qui sont encore sur XP et qui n'auraient pas opté pour un navigateur alternatif plus performant) voient simplement une "rectangle droit" au lieu d'arrondi. Est-ce que c'est grave ? Cela nuit-il à l'accessibilité du site ? Non, absolument pas !

Cela n'a aucun sens d'utiliser cette technique, qui alourdit le code, juste pour un effet esthétique sur un vieux navigateur.

[Bovino]

Non mais j'en reviens pas...

le code marche et sa taille me décourage de changer ça.

En revanche, tu as manifestement plein de temps à perdre pour des coins arrondis qui comme tout le monde te l'a dit ou suggéré ne servent à rien (au passage, utiliser ce temps pour apprendre les bases ne te parait toujours pas utile... ).

J'imagine que tu es l'employé du mois !