Discussion :

[tus01]

Bonjour,

Je souhaiterai créer une classe bouton qui me permette de créer un bouton à coins arrondis et dont la largeur dépend du texte contenu dans le bouton.

Je souhaiterai donc insérer un sprite pour le background de façon à ce que le bouton soit automatiquement étiré en fonction de la largeur du texte contenu, une image pour la bordure de gauche avec les deux coins arrondis, et une image pour la bordure de droite avec deux autres coins arrondis.

Je ne sais pas si cette technique peut être réalisée. L'intérêt est de ne pas avoir a toucher au code HTML déjà existant (c'est du code JSP qui me génère le HTML et l'application est très complexe, d'où le souhait de faire de la manière la plus simple possible).

Merci pour votre aide.

Thibault Schalck

[c_s_s]

Bonjour,

Peux-tu nous montrer ton code HTML existant, histoire de voir ce qu'il est possible de faire en CSS.

Merci.

[tus01]

Voici le code que j'ai (en analysant avec Firebug):

Code :

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

1
2
3
4
5
6
7
8
9
 
<td class="urLayoutDefault">
<a id="DLG_VARIABLE_vsc_Button2" class="urBtnStd"
onclick="ur_Button_click(event);"
onkeydown="ur_Button_keypress(event);"
ocl="sapbi_page.sendCommandArray([['TARGET_DIALOG_REF',
'DLG_VARIABLE',0],['BI_ADVANCED','DLG_VARIABLE_vsc',0],['BI_COMMAND_TYPE','DLG_VARIANT_SAVEAS',0]],event);"
href="javascript:void(0);" st="" ct="B">Save As...</a>
</td>

Ceci est du code Javascript. Le code CSS qui est affiché pour cet élément est:

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
.urBtnStd:hover, .urBtnTgl:hover {ur_nn7.c...iTg%3D%3D (ligne 1)
background-color:#E4E9EB;
border-color:#303047 #B8C1CC #B8C1CC #303047;
color:#4E4E4E;
text-decoration:none;
}
.urBtnStd:link, .urBtnTgl:link, .urBtnStdD:link, .urBtnTglD:link {ur_nn7.c...iTg%3D%3D (ligne 1)
text-decoration:none;
}
.urBtnStd {ur_nn7.c...iTg%3D%3D (ligne 1)
-moz-box-align:center;
-moz-box-sizing:border-box;
background-color:#E4E9EB;
border-color:#B8C1CC #303047 #303047 #B8C1CC;
border-style:solid !important;
border-width:1px !important;
color:#3FA6CC;
cursor:pointer;
display:-moz-inline-box;
font-size:0.7em;
font-weight:bolder;
height:14px;
padding:0 4px 0 5px;
text-align:center;
text-decoration:none;
white-space:nowrap;
width:auto !important;
}
Hérité detable#DLG_VARIABLE_vsc_VariantRow.urMatrixLayout
.urMatrixLayout {ur_nn7.c...iTg%3D%3D (ligne 1)
font-size:medium;
font-style:normal;
font-weight:normal;
}
Hérité detable#DLG_VARIABLE_dlgBase_MATRLayout.urMatrixLayout
.urMatrixLayout {ur_nn7.c...iTg%3D%3D (ligne 1)
font-size:medium;
font-style:normal;
font-weight:normal;
}
Hérité detable#DLG_VARIABLE_dlgBase_ml.urMatrixLayout
.urMatrixLayout {ur_nn7.c...iTg%3D%3D (ligne 1)
font-size:medium;
font-style:normal;
font-weight:normal;
}
Hérité debody.urBdyStd
.urTrcBodyFrm {ur_nn7.c...iTg%3D%3D (ligne 1)
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
}
.urBdyStd {ur_nn7.c...iTg%3D%3D (ligne 1)
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
}

Pour information je travail sur un portail, donc le code ci-dessus est généré automatiquement, d'où pour moi l'interêt de créer ma propre classe CSS plutôt que de chercher où modifier le code pour que tout ce qui est généré m'affiche des boutons comme je le souhaite.

MErci pour ton aide.

[tus01]

Pour information, le code doit absolument fonctionner sous IE7

[c_s_s]

Il n'y a pas de CSS associé au td .urLayoutDefault ?

[tus01]

Si j'ai cela:

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
.urLayoutDefault {
padding:2px 4px 2px 0;
}
// Hérité de table#DLG_VARIABLE_vsc_VariantRow.urMatrixLayout
.urMatrixLayout {
font-size:medium;
font-style:normal;
font-weight:normal;
}
// Hérité de table#DLG_VARIABLE_dlgBase_MATRLayout.urMatrixLayout
.urMatrixLayout {
font-size:medium;
font-style:normal;
font-weight:normal;
}
// Hérité de table#DLG_VARIABLE_dlgBase_ml.urMatrixLayout
.urMatrixLayout {
font-size:medium;
font-style:normal;
font-weight:normal;
}
// Hérité de body.urBdyStd
.urTrcBodyFrm {
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
}
.urBdyStd {
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
}