Methode porte coulissant pour un bouton

Bonjour,
alors voilà je souhaiterais réaliser un bouton contenant deux images une image à gauche de longueur fixe et une image à droite de longueur variable selon la longueur du texte. J'ai réalisé ce bouton via la même méthode que pour la création des onglet "porte coullissante". Seulement je voudrais que la position de ce bouton soit variable. Un div align center sur ce bouton ne fonctionne pas celui-ci étant flottant.
mon css :

 #bouton_vertclair span{
      float:left;
      background:url(images/btnvertclair_right254x16.gif) no-repeat right top;
      height:20px;
      }
       #bouton_vertclair span:hover{
      float:left;
      background:url(images/btnvertclair_right254x16_hover.gif) no-repeat right top;
      height:20px;
      }
    #bouton_vertclair a {
      display:block;
      background:url(images/btnvertclair_left20x16.gif) no-repeat left top;
      padding:1px 20px;
      color: white;
	font-weight:bold;
      }

ma page :

<div id="bouton_vertclair"><span><a href="#">Ajouter </a></span>
				</div>

Comment faire pour que la position du bouton soit variable et non aligné à gauche? Avez vous une meilleur solution pour réaliser un tel bouton?

Salut,

si tu veux que le bouton soit centré et en même temps pouvoir lui donner des marges verticales, je ne vois pas d'autre solution que de
1. laisser tomber le float,
2. utiliser display: block et centrer le bouton avec margin: xxx auto edit(ce qui nécessite de donner une largeur au bouton !).

Sinon, à quoi sert le <span> ? (à part gaspiller quelques octets de bande passante)
Modifié par Thomas D. (05 May 2008 - 09:35)

Ok je comprends cependant je voudrais un bouton commun, et laisser la possibilité de pouvoir modifier l'alignement de celui-ci dans le code html, la taille du bouton doit dépendre de la taille du texte, pour ça je trouvais la méthode de la porte coulissante intéressante.
Pourquoi le span prendrait plus d'octet(par curieusité), as tu une autre solution?

Merci à toi

Re.

Le span ne prend pas spécialement plus d'octets qu'une autre balise, simplement il n'est pas nécessaire

Pour ce qui est de la méthode des portes coulissantes, je ne vois pas ce que ça change d'abandonner le float

Pour adapter la taille du bouton à celle du texte, désolé mais ça ne me semble pas possible pour le moment (à moins de se contenter du lien "normal" et d'abandonner le contrôle sur les marges & paddings verticaux).

a écrit :
moins de se contenter du lien "normal" et d'abandonner le contrôle sur les marges & paddings verticaux

.
C'est à dire aurais tu un exemple, ca pourrais me convenir!! En tout cas merci à toi pour tes précieux conseils...

Les liens sont des éléments de type inline, donc tu peux contrôler l'alignement en utilisant text-align sur un de leurs ancêtres. Par exemple, pour un lien centré, tu fais simplement :

<p class="center"><a href="#" title="...">Mon lien</a></p>

p.center {
  text-align: center;
}

exactement comme pour tout autre texte.

J'ai pas mal planché sur le sujet l'année passée et j'ai une solution toute faite pour toi, par contre il y a peut être deux trois trucs qui ne sont pas utiles à toi de les enlever si tu vois que ça marche sans.

.container{
	
	line-height:20px;
}
a {
	position: relative;
	cursor: hand;
	background: url("images/btn_bg2.gif") no-repeat right top;
	padding: 3px 5px 3px 5px;
	text-decoration: none;
	font: bold 11px Arial, Helvetica, sans-serif;
	white-space: nowrap;
	color: white;
	height: 17px;
	line-height:20px;
}
a .leftCorner {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 20px;
	display: block;
	background: white url("images/btn_bg1.gif") no-repeat 0px 0px;
	padding: 0;
	cursor: hand;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/


/* End;
IE5-Mac hack */

a:hover {
	background-position: 100% -25px;
}

a:hover .leftCorner {
	background-position: 0px -25px;
}

a:active {
	background-position: 100% -75px;
}

a:active .leftCorner {
	background-position: 0% -75px;
}

et l'html :

<span class="container"><a href="#">Button test<div class="leftCorner"></div></a></span> lorem 
<span class="container"><a href="#">Button test<div class="leftCorner"></div></a></span>

pour les images:



Dis moi si ça t'a aidé. Faut tester sur explorer parce qu'il y a sans doute un soucis de clignotement en rollover (explorer re-load les images alors que ce sont les même qu'on déplace).
Modifié par trouille2 (06 May 2008 - 16:02)

Bonjour à vous

trouille2, je te remercie par avance de bien vouloir placer ton code dans la balise appropriée, s'il te plait... Rappel des règles du forum

Ci-joint les images :
image gauche:

image droite

méthode sans float :



on remarque que la taille de l'image n'est pas rétrécie .

p.bouton_vertclair {
      background:url(img/btnvertclair_right254x16.gif) no-repeat left top;
      }
     a.bouton_vertclair {
      display:block;
      background:url(img/btnvertclair_left20x16.gif) no-repeat left top;
      padding:1px 20px;
	 height:20px;
	 font-size:1em;
	 font-weight:bold;
	 color:white;
	text-decoration:none !important;font-size:10px;font-family:Verdana,arial,helvetica,sans-serif;
	
      }

<p class="bouton_vertclair"><a class="bouton_vertclair">test</a></p>
De plus l'alignement ne se fait toujours pas, je sèche, je comprends pas!
Modifié par romano2003 (05 May 2008 - 17:58)

cool, je vais tester ca tout à l'heure. Je vous tiens au courant.