[RESOLU ] Problème avec la commande display inline sur un div

bonjour,
je souhaite mettre une image en fond de lien.
la commande background sur un lien ne permet malheureusement pas de mettre une image plus large que la longueur de texte compris dans la balise <a>.
exple:mon lien fait 6 caractères, je ne peux pas afficher une image plus large que ces 6 caractères.
J' ai donc créer un div englobant ce lien.
la balise div étant une balise de type bloc, j' ai voulu annuler le retour à la ligne avec la commande display inline.
Le retour à la ligne est bien annulé mais malheureusement, les propriétés de dimensions de la balise div ( width et height ) sont également annulées.
Comment résoudre le problème ?
le but étant de créer un bouton cliquez ici mais en inscrivant "cliquez ici" dans ma page html afin que "cliquez" ici soit reconnu par les moteurs de recherches.
merci de vôtre aide.
Modifié par krsytof (31 Jul 2007 - 13:53)

Salut,

krsytof a écrit :
la commande background sur un lien ne permet malheureusement pas de mettre une image plus large que la longueur de texte compris dans la balise <a>.

Comme par défaut la balise <a> est de type inline c'est normal que tu ne puisse pas lui donner de dimensions. Une solution est de lui mettre l'attribut display:block;.

Par exemple :

[b]CSS[/b]
.test {
	background:transparent url(include/images/fondsite.gif) ;
	display:block;
	width:150px;
	height:50px;
	padding:35px 0;
	text-align:center;
	color:yellow;
}

[b]HTML[/b]
<a href="#" class="test">123456</a>

A+

salut et merci, effectivement, j' arrive à redimmensionner la balise <a> mais celle-ci passe automatiquement à la ligne.
Commet faire pour qu' elle reste sur la même ligne ?

Ben en voyant ton code ce serait plus facile !

voici le html:

a écrit :
<h4>Logiciels utilisés:</h4>
- Virtualdub : <a class="telecharger" href="../logitheque/VirtualDub-1.6.18.zip">Télécharger Virtualdub</a>
<div class="installation">
texte</div>

et le CSS:

h4
{
text-decoration:underline;
text-indent:15px;
background-image:url("photos/puce2.png");
background-repeat:no-repeat;
background-position:left;
margin-left:30px;
}
.telecharger
{
background-image:url("photos/fond-telechargement.png");
background-repeat:no-repeat;
display:block;
width:233px;
height:30px;
font-size:16px;
font-weight:bold;
text-indent:20px;
padding-top:5px;
text-decoration:none;
color:#2E5B35;
}
.installation
{
text-align:justify;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}

Voilà ce que ça me donne, j' aimerai que les boutons télécharger soient sur la même ligne que le nom du logiciel:
http://chrisllers.free.fr/changer-taille-video.html

ça me parait bien complexe juste pour ce que je veux faire.
c' est la seule solution ?

Bien complexe ?

Ben sinon il existe toujours plein de solutions... par exemple une table avec deux cellules et le tour est joué ...
Modifié par Heyoan (23 Jul 2007 - 16:50)

le problème avec ce que tu me poposes c' est que je ne pourrais pas coller l' image "télécharger" juste après le texte ( à cause de margin-left: 100px; ).

Alors une autre solution :

[b]html[/b]

- Virtualdub :<a class="telecharger" href="xxx"><span class="texte_download">Télécharger Virtualdub</span></a>

[b]css[/b]
.telecharger {
	background-image:url("http://chrisllers.free.fr/photos/fond-telechargement.png");
	background-repeat:no-repeat;
	font-size:16px;
	font-weight:bold;
	text-indent:20px;
	text-decoration:none;
	color:#2E5B35;
	padding:5px 0 10px;
	margin-left:10px;
}

.texte_download {
	padding-right:60px;
	padding-left:20px;
}

A+
Modifié par Heyoan (23 Jul 2007 - 18:47)

effectivement ça marche.
mais ça pose un autre problème c' est que mes images de fond ne font pas toutes la même largeur, du coup, je serait obligé de faire des span class différents pour toutes les largeurs.
crois-tu qu' il existe un truc plus simple en empêchant uniquement le retour à la ligne ?

j' ai finalement trouvé cette solution qui est excellente:
http://gatsu.ftp.free.fr/html/bouton/testbt.html