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;
}

[tus01]

Sinon il y a cette solution: creer une image de background "ovale" et faire un repeat-x: le problème c'est que j'obtiens une dent de scie:

Mon image de départ
/-\
| |
\-/

Le résultat avec un repeat-x:
/-\ /-\ /-\
| | | | | |
\-/ \-/ \-/

Concernant le triangle qui est en dehors de l'image sur les 4 coins, j'ai mis un fond transparent. Existe-t-il une manière de répéter l'image en mettant une marge négative pour que seule la deuxième moitié de l'image ne se répète (la première moitié celle de gauche recouvrant l'ancienne image) ?

[c_s_s]

Bon, avec le code HTML que tu as, ça va être difficile de faire un bouton extensible.
Il faudrait deux éléments dans la cellule et tu n'en as qu'un (le lien).

Avec deux éléments, voilà comme tu pourrais faire :

Code html :

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

1
2
3
<span class="gauche">
	<a class="droite" href="#">Lien</a>
</span>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.gauche {
	background:url(bouton_g.gif) no-repeat left top;
	padding-left:5px;
	float:left;
	clear:left;
}
.gauche a {
	display:block;
	height:20px;
	line-height:20px;
	background:url(bouton_d.gif) no-repeat right top;
	padding:0 15px 0 10px;	
}

L'exemple en ligne : http://www.ellm.net/labo/dvp/tus01.html

[tus01]

Merci pour ton aide, je vais tester tout de suite cette solution.

Thibault

[tus01]

Hello,

Ca fonctionne très bien. Par contre ma classe qui affiche la partie gauche du bouton est utilisée pour d'autres contrôles, du coup je me retrouve avec des partie gauche de boutons un peu partout dans ma page, et je n'ai aucun moyen de changer la classe utilisée pour le bouton (vu que le code est généré automatiquement).

[c_s_s]

Tu as peut-être moyen de cibler plus précisément les parties gauche sur lesquelles tu veux une image de fond ou non.

Ex :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="bloc_machin">
	<span class="gauche">
		<a class="droite" href="#">Lien</a>
	</span>
</div>
 
<div class="bloc_bidule">
	<span class="gauche">
		<a class="droite" href="#">Lien</a>
	</span>
</div>

Si tu veux une image de fond uniquement sur les parties gauche qui se trouvent dans le bloc "bloc_machin", tu peux faire :

Code css :

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

1
2
3
.bloc_machin .gauche {
	background:url(bouton_g.gif) no-repeat left top;
}

Tu peux aussi faire l'inverse, à savoir spécifier que tu en veux pas d'image de fond pour les parties gauche qui sont dans un bloc "bloc_bidule"

Code css :

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

1
2
3
.bloc_bidule .gauche {
	background:none;
}