28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde,

j'essaie désespéramment de créer des boutons en css, qui me permettraient de ne pas avoir à créer autant d'images que de boutons.

Pour cela, j'ai pensé à créer un bouton avec 2 divs (une image de fond par div pour faire le début et la fin du bouton).

Ca marche si je fixe la taille de la div, mais c'est justement ce que je veux éviter, je voudrais que la longueur de la div s'adapte en fonction du texte.

Est ce que c'est possible ou pas ??

voilà ce que j'aimerais obtenir :
upload/1365-screenshot1.gif

voilà ce quer j'obtiens si je ne fixe pas la largeur de la div :
upload/1365-screenshot2.gif

voilà le code que j'ai essayé
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>test</title>
	<style>
		
		div.btnBlue {
			background: green url(img/buttons/buttonBlueBG.gif) no-repeat top left;
			height: 24px;
			text-align: left;
			padding-top: 2px;
			padding-left: 4px;
			width: auto;  /*que mettre à la place de auto ?*/
		}
		div.btnBlueInner {
			background: url(img/buttons/buttonBlueInnerBG.gif) no-repeat top left;
			height: 24px;
			width: 6px;
			margin-top: -2px;
			float: right;
		}
	</style>
</head>

<body>
<a>
	<div class="btnBlue"><div class="btnBlueInner"></div><img src="img/iconBack.gif" alt="IconBack" /> Email MSG </div>
</a>

</body>
</html>

Modifié par nab_ (14 Mar 2006 - 11:02)