Discussion :

[hackiles]

Bonjour,

Le style de mes boutons est actuellement divisé en 2 classes:

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
.button {
	background:url(../images/design/button-l.gif) no-repeat left;
	padding-left:9px;
	display:block;
	float:right;
	text-decoration:none !important;
	margin-left: 10px;
}
	.button span {
		cursor:pointer;
		display:block;
		height:26px;
		line-height:26px;
		color:#101d36 !important;
		background:url(../images/design/button-r.gif) no-repeat right;
		padding-right:9px;
		white-space:nowrap;
	}

Il faudrait que je puisse tout mettre sur .bouton
J'ai essayé mais cela pose un problème pour les images de fonds, il ne peut y en avoir qu'une seule. Comment obtenir le même résultat mais sans 'span' ?

[Auteur]

comme ceci (sans garantie) :

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
 
.fond1{
	background:url(../images/design/button-l.gif) no-repeat left;
}
 
.fond2{
	background:url(../images/design/button-r.gif) no-repeat right;
}
 
.button {
	padding-left:9px;
	display:block;
	float:right;
	text-decoration:none !important;
	margin-left: 10px;
 
	cursor:pointer;
	height:26px;
	line-height:26px;
	color:#101d36 !important;
	padding-right:9px;
	white-space:nowrap;
}

[hackiles]

J'ai essayé et j'ai toujours le même problème, seul le .fond2 s'affiche.

Est-ce du à une propriété spéciale avec 'span' ?

[Macmillenium]

Bonjour,

Le problème vient peut-être de ton HTML ...
Si par exemple ton reprend :

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
 
.button {
	background:url(../images/design/button-l.gif) no-repeat left;
	padding-left:9px;
	float:right;
	text-decoration:none !important;
	margin-left: 10px;
}
 
.button span {
	cursor:pointer;
	display:block;
	height:26px;
	line-height:26px;
	color:#101d36 !important;
	background:url(../images/design/button-r.gif) no-repeat right;
	padding-right:9px;
	white-space:nowrap;
}

et

Code xhtml :

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

1
2
 
<button class="button"><span>bla</span></button>

Sa donne quoi ?

[Auteur]

tu attribues bien tes classes de cette manière :

Code html :

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

1
2
 
<span class="button fond1">.....</span>

ou

Code html :

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

1
2
 
<span class="button fond2">.....</span>

Sinon vérifie la casse de tes fichiers (minuscules / majuscules) ça peut avoir une influence.
Il y a un truc qui me chagrine : ton span est en display:block ? Dans ce cas pourquoi ne pas utiliser un div à la place ?

Tu peux également nous donner le code HTML pour voir comment sont faits tes boutons ?

[hackiles]

Merci à vous deux !

Pour le code html, il fonctionnait bien, il étais de la forme:

Code :

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

<a href="#" class="button"><span>Connexion</span></a>

Or, j'utilise ruby on rails pour faire mon application et cela me simplifierais grandement la tâche si je pouvais avoir mon style sans 'span'. La solution avec class='button fond1 fond2' serait parfaite mais une seule image de fond s'affiche. Est-ce possible ou faut-il nécessairement un '<span></span>' ?

[Auteur]

La solution avec class='button fond1 fond2' serait parfaite mais une seule image de fond s'affiche. Est-ce possible ou faut-il nécessairement un '<span></span>' ?

ah je viens de comprendre le problème :

Code css :

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

1
2
3
4
5
6
7
8
 
.fond1{
	background:url(../images/design/button-l.gif) no-repeat left;
}
 
.fond2{
	background:url(../images/design/button-r.gif) no-repeat right;
}

Tu as une image qui est calée à gauche pour faire la partie gauche du bouton et l'autre qui est calée à droite pour former la partie droite ?

Dans ce cas la réponse est radicale : impossible de superposer deux images de fond sur un élément. Tu ne peux pas fusionner ces deux images pour n'en faire qu'une seule ?

[edit]
Ou alors.... mets fond1 sur la balise <a> et mets fond2 sur la balise <span> mais sans garantie aucune.

Autre remarque : ton span est en display:block. Par défaut une balise <a> est de type inline or une balise inline ne peut pas contenir une balise de type block. Ou alors mets <a> en display:block également (ce n'est pas vraiment fait pour ça ) Ou laisse tout en inline.
[/edit]

[hackiles]

Exact une image pour la partie gauche, une image pour le fond et la partie droite.

Pourtant cela marche avec <span>, bizarre ...

Impossible de fusionner les deux images car la longueur du bouton change en fonction du texte contenu par le bouton ... (je débute mais je vois difficile comment faire une seule image à moins d'avoir une image par bouton différent ...)

Il va donc falloir que je règle le problème autrement.

En tout cas merci pour votre aide !

[Macmillenium]

Autre remarque : ton span est en display:block. Par défaut une balise <a> est de type inline or une balise inline ne peut pas contenir une balise de type block. Ou alors mets <a> en display:block également (ce n'est pas vraiment fait pour ça ) Ou laisse tout en inline.

Il a déjà un float:right => pas besoin d'un display:block puisqu'un contexte de formatage bloc a été conféré grâce au float

(je débute mais je vois difficile comment faire une seule image à moins d'avoir une image par bouton différent ...)

Tout est possible

Ton code à l'air bon mais en regardant un petit peu plus je trouve que tu as un float:right sur .button qui est retiré du flux et n'englobe plus son enfant <span>.
C'est pour cette raison que tu ne vois pas le background sur .button.
Il faut ajouter un overflow:hidden et normalement c'est bon:

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
.button {
	background:url(../images/design/button-l.gif) no-repeat left;
	padding-left:9px;
	float:right;
        overflow:hidden;
	text-decoration:none !important;
	margin-left: 10px;
}
 
.button span {
	cursor:pointer;
	display:block;
	height:26px;
	line-height:26px;
	color:#101d36 !important;
	background:url(../images/design/button-r.gif) no-repeat right;
	padding-right:9px;
	white-space:nowrap;
}

et tu garde le même html

Code xhtml :

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

1
2
 
<a href="#" class="button"><span>Connexion</span></a>

[Auteur]

Il a déjà un float:right => pas besoin d'un display:block puisqu'un contexte de formatage bloc a été conféré grâce au float

J'ai lire la CSS un peu vite Je n'ai pas vu le float:right.