28173 sujets

CSS et mise en forme, CSS3

Attacher une image sur un lien à dimension variable

bonjour,
je vas essayer d' être clair:
j' ai un code css me permettant de mettre une image de fond à certains de mes liens.
cette image de fond est très large.
Du coup, lorsque je tape une decription assez longue, la taille du lien s' adapte et laisse apparaître l' image de fond.
méthode décrite ici:
http://gatsu.ftp.free.fr/html/bouton/testbt.html
dans cet exemple, l' image de fond est celle ci:
http://gatsu.ftp.free.fr/html/bouton/bt_bg.jpg
malheureusement, j' aimerai rajouter à droite et automatiquement la fin de mon fond qui se termine en arrondi car cette méthode ne le permet pas.
existerait il une solution ?
voici ce que j' ai avec cette méthode:
http://img74.imageshack.us/img74/1804/aaakj1.png

et voici ce que j' aimerai avoir:

http://img74.imageshack.us/img74/6634/bbbbbs8.png

ça marche les liens imageshack dans ce forum ?
Modifié par krsytof (26 Jul 2007 - 23:26)
Bonjour,

Tu peux avec ton lien (en display: block; position: relative) placer à droite l'image du bout droit de ton bouton en position: absolute; right: 0; en ayant préalablement défini un padding-right à ton lien égal au width de l'image de ton morceau droit du bouton. (methode des portes coulissantes).
est-ce que tu pourrais me détailler un peu car je débute dans le CSS, et là, c' est un peu compliqué pour moi ce que tu me dis.
Modifié par krsytof (27 Jul 2007 - 18:08)
Re,

Bon un peu à la bourre, mais voici le code pour une des solutions possible.
	   <style type="text/css">

*{padding: 0; margin: 0;}

a{
padding: 5px 20px 5px 60px;
position: relative;
background: url(bouton_gauche.png);
text-decoration: none;
color: #000;
font-weight: bold;
}

a img{
position: absolute;
right: -12px;
top: 0;
border: 0;
}
       </style>
   </head>
 <body>
<a href="#" > Item 1<img src="bouton_droite.png" alt=""></a>
</body>
</html>

upload/5854-boutondroit.png upload/5854-boutongauch.png

Si tu as besoin, je repasse plus tard ou voir là
j' ai du mal.
*{padding: 0; margin: 0;}


qu' est ce que c' est ?
j' ai essayé sans vraiment comprendre, l' image se retrouvait en haut et à droite de la page.
mon code original pour le lien est celui-ci:

.telecharger
{
background-image:url("photos/fond-telechargement.png");
background-repeat:no-repeat;
text-decoration:none;
padding: 5px 15px 9px 55px;
border-right:1px solid black;
font-weight:bold;
line-height:30px;
color:black;
}


Mon image que je souhaiterai mettre à droite s' appelle:
test.png

je crois que le code que tu me donnes met l' image en position relative, il me semble que si la page est redimmensionnée (ctrl et + ), l' image ne bougera pas, est-ce exacte ?
Bonjour,

Alors
*
est un sélecteur universel, c'est à dire que toutes les balises css auront les propriétés que tu auras défini.
*{margin: 0; padding: 0;}

éliminera (remise à 0) tous les margins et paddings par défaut de chaque navigateur (ce qui en soit permet de réinitialiser par le vide et d'avoir un résultat identique pour chaque navigateur car par défaut chaque navigateur a ses propres valeurs pour chaque balise)
Certains démarrent leur css par cette ligne et après ré-implémente les margins et paddings à leur guise tout au long de la css, d'autres ne l'utilisent qu'en test en cas problèmes de compatibilité. Comme d'habitude, il y du pour et du contre pour chaque utilisation Smiley cligne

Bon pour en revenir à la chose, il faudrait revoir dans les bons tutos que l'on trouve ici, les positionnements css, il me semble que ça doit être encore un peu confus pour toi.

Mon bout de code est juste une piste à suivre et juste pour en comprendre le principe et ensuite à toi de l'adapter Smiley biggrin

Bon courage

Ctrl + ne re-dimensionne pas la page mais augmente sur certain navigateur la taille de la police et oui dans ce code la taille de l'image suit mais ... qu'en longueur !!
Modifié par ghost (30 Jul 2007 - 01:31)
Sujet clos
Aller à