Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1524 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème CSS sur un bouton

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème CSS sur un bouton

n°1590398
chrisllers
Posté le 23-07-2007 à 19:07:58  profilanswer
 

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.
je voudrais que le lien de téléchargement soit à la suite du nom du logiciel.


Message édité par chrisllers le 04-12-2007 à 17:40:35
mood
Publicité
Posté le 23-07-2007 à 19:07:58  profilanswer
 

n°1590440
tpierron
Posté le 23-07-2007 à 21:28:33  profilanswer
 

Bienvenue dans le monde merveilleux du CSS positionning.
 
La seule chose que je vois qui ne soit pas trop crade, c'est d'ajouter l'attribut CSS "float: right" sur ton lien. Faudra aussi le déplacer avant ton texte (- VirutalDub ...), et mettre un br pour "couper" le float (attribut "clear: both" ), genre :
 
...
<div>
<a class="telecharger" href="http://chrisllers.free.fr/logitheque/VirtualDub-1.6.18.zip">Télécharger Virtualdub</a> - Virtualdub :<br style="clear: both" />
</div>
...
 
Bon, il y aura un "ressort" horizontal entre le texte et le le lien, mais ça devrait être pas trop génant.

n°1590481
chrisllers
Posté le 23-07-2007 à 23:37:41  profilanswer
 

salut et merci,
je viens d' essayer mais ça ne marche pas aussi biuen sous IE que FF.
J' ai fait scrupuleusement ce que tu m' as dit.
le lien qui précède le texte.
Le float:right; dans le CSS, le lien par à droite normal.
J' ai ensuite mis le code  :<br style="clear: both" />  
un ligne saute mais le float n' est pas coupé.
La seule chose qui soit à peu près correcte pour l' instant, c' est effectivement un float:right; avec en plus un margin-right de 300px our ramener le tout sur la gauche.
Mais je ne sais pas si c' est très correct tout ça.

n°1590514
xtof_83
Freeride Spirit
Posté le 24-07-2007 à 02:43:51  profilanswer
 

Ah la vache vous êtes beau tout les 2...
Rajoute en cas du flash dans le br.... ça marchera mieux
 
sinon : http://gatsu.ftp.free.fr/html/bouton/testbt.html

n°1590525
tpierron
Posté le 24-07-2007 à 05:18:24  profilanswer
 


Bah, c'est ce que j'obtiens avec IE 6 et Firefox :
 
http://img164.imageshack.us/img164/2553/sitepi0.th.png
 
Sans le br, le lien écraserait une partie du texte. Le code à cet endroit est :
 
<h4>Logiciels utilisés:</h4>
<a class="telecharger" href="../logitheque/VirtualDub-1.6.18.zip" style="float: right">Télécharger Virtualdub</a> - Virtualdub : <br style="clear: both">
 
Rien modifié d'autre.

n°1590628
chrisllers
Posté le 24-07-2007 à 11:15:29  profilanswer
 

justement tpierron, je voudrais que le bouton soit collé à gauche du texte.
xtof_83, ça m' a l' air mieux comme méthode.
Cependant, comme tu l' as peut être vu, j' ai une flèche jaune à droite du lien.
avec ta méthode,  l' image s' adapte à la largeur du texte, ce qui est bien mais ne me permet pas d' afficher le coté droit de bouton avec cette fameuse flèche.
J' ai vu qu' il y a avait un border:1 px solid;
On ne peux pas remplacer cette bordure par la partie droite de mon image ( donc avec cette fameuse flèche ) ?
Ou alors, peut on coller systématiquement l' image avec la flèche à droite du lien ?


Message édité par chrisllers le 24-07-2007 à 11:29:13
n°1591564
xtof_83
Freeride Spirit
Posté le 25-07-2007 à 23:16:30  profilanswer
 

Tu met le background à droite, un padding-right, et voilà, il y a pas de souci
 
Pourquoi ce prendre la tête quand c'est tellement simple

n°1591682
chrisllers
Posté le 26-07-2007 à 10:20:36  profilanswer
 

en fait, j' ai retourné mon image.
la flèche est maintenant à gauche.
Mais il y a un problème sur le bord droit du bouton.
en effet, j' ai fait comme sur le lien que tu as mis plus haut :
j' ai créer une image plus grande qui s' adapte à la longeur du texte, ça c' est vraiment génial et je t' en remercie.
Mais dans mon cas, j' aimerai que systématiquement, la partie droit de mon bouton qui fini en arrondi mais sans flèche ce coup-ci, se colle automatiquement à la fin pour "finir" le fond.
Car actuellement avec la technique que tu m' as proposée, j' ai ceci, le fon se coupe brutalement
http://img442.imageshack.us/img442/7277/sanstitre1ss9.png


Message édité par chrisllers le 26-07-2007 à 10:21:43
n°1592467
xtof_83
Freeride Spirit
Posté le 27-07-2007 à 15:45:57  profilanswer
 

avec un lien comme ceci :
 
<a href="op"><span>Telec....</span></a>
 
Tu peux tout faire, alors réfléchi, un peu et op  :
indice :
Sur a tu applique le grand background
sur span tu mets ton bord arrondi...voilà

n°1593025
chrisllers
Posté le 29-07-2007 à 19:46:50  profilanswer
 

je n' arrive pas à obtenir le bon résultat.
effectivement la partie droite de l' image s' affiche avant "télécharger" mais si je mets un margin-left ou padding-left, le "télécharger" se décale aussi.


Message édité par chrisllers le 29-07-2007 à 19:47:27
mood
Publicité
Posté le 29-07-2007 à 19:46:50  profilanswer
 

n°1593031
xtof_83
Freeride Spirit
Posté le 29-07-2007 à 20:02:07  profilanswer
 

Montre ton code

n°1593089
chrisllers
Posté le 30-07-2007 à 00:07:25  profilanswer
 

alors le code du lien est celui-ci:

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


 
et la partie en html est celle-ci:

Code :
  1. - Virtualdub: <a class="telecharger" href="logitheque/VirtualDub-1.6.18.zip">Télécharger Virtualdub</a>


 
et la partie droite de l' image que j' aimerai ajouter s' appelle test.png
merci pour ton aide. ;)

n°1593122
xtof_83
Freeride Spirit
Posté le 30-07-2007 à 05:34:44  profilanswer
 

Bon je te fais un exemple demain en soirée...donc tu l'auras Mardi pour toi ;)

n°1593194
chrisllers
Posté le 30-07-2007 à 11:05:16  profilanswer
 

merci, c' est sympa !

n°1593553
xtof_83
Freeride Spirit
Posté le 31-07-2007 à 05:08:17  profilanswer
 
n°1593562
gatsu35
Posté le 31-07-2007 à 07:55:15  profilanswer
 

le bouton là au niveau CSS est à chier (oui je sais meme si j'en suis l'auteur c'est de la merde en baton).

 

Après un an de travaux et d'essais, j'en suis arrivé à ceci :
HTML :

Code :
  1. Version normale :
  2. <a href="#"><strong>Texte de mon bouton</strong></a>
  3. Version avec image :
  4. <a class="btn" href="#"><strong><img src="/img/pictos/btnCroix.png" alt="annuler" /> Annuler</strong></a>


CSS :

Code :
  1. .btn, .btn strong, button.btn span {background:url(skin/btnGrey.png) no-repeat left top; vertical-align:middle;}
  2. .btn, button.btn span {display:-moz-inline-box; display:inline-block; padding-left:9px;}
  3. .btn strong{display:block; height:38px;  color:#FFF; background-position:right top; line-height:34px; _width:1%; white-space:nowrap; padding-right:10px;  cursor:pointer; font-weight:normal}
  4. .btn img {margin-top:4px; vertical-align:-8px;}



Message édité par gatsu35 le 31-07-2007 à 07:55:59
n°1593828
xtof_83
Freeride Spirit
Posté le 31-07-2007 à 15:19:53  profilanswer
 

Je savais qu'une version à jour existait....Mais je mettais plus la main dessus ;)
 
J'update dés que je peux.

n°1594778
chrisllers
Posté le 02-08-2007 à 10:32:22  profilanswer
 

Ok merci xtof, j' essaierai, j' ai pas trop le temps en ce moment.
Je te dirai si c' est OK.
merci !

n°1652761
chrisllers
Posté le 04-12-2007 à 16:59:52  profilanswer
 

Bonjour,
je me suis enfin penché sur le problème.
j' ai fait plusieurs essais et j' avoue que je ne comprends pas bien le code.
Je peux en effacer certaines partie sans que celà change quoi que ce soit ( je les laisse qund même au cas où ).
Le meilleur résultat que j' obtiends pour ce fameux bouton est celui-ci:
http://chrisllers.free.fr/essai.html
Il y a 2 bugs.
- l' écriture est trop basse, comment la faire remonter ?
- il y a un surlignement rouge que je n' arrive pas à faire partir même avec text-decoration: none;
Comment faire pour régler ces deux bugs ?
merci de votre aide

n°1654318
chrisllers
Posté le 07-12-2007 à 10:23:25  profilanswer
 

UP ! SVP

n°1654532
kao98
...
Posté le 07-12-2007 à 14:46:11  profilanswer
 

Tu veux un bouton ? Pourquoi ne pas utiliser "<button>" ?

Code :
  1. <html>
  2. <head>
  3.     <style>
  4.         button
  5.         {
  6.             border:solid 1px red;
  7.             background:black;
  8.             width:150px;
  9.         }
  10.         span
  11.         {
  12.             color:white;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>
  18.         <span>Téléchargez ici</span>
  19.     </button>
  20. </body>
  21. </html>


Je n'ai pas mis d'image, mais tu peux en mettre une dans les propriété CSS de "button". Tu vois bien, avec ce code, que tu peux choisir la taille de ton bouton sans problème. Ce code doit au moins fonctionner sous IE>=6, Opera>=9 et FF>=1.5.
 
Edit: ouais, heu, en fait, visuellement, stop, mais conceptuellement, spa terrible. A oublier !
 
Edit 2 : si ton soucis, c'est juste que les moteurs de recherche reconnaissent le texte du lien, et rien de plus, AMHA un title sur le lien et/ou l'image est amplement suffisant !

Code :
  1. <a href="#" title="Téléchargez truc"><img src=".jpg" alt="image" title="Téléchargez truc" /></a>


Message édité par kao98 le 07-12-2007 à 15:23:49

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1654671
chrisllers
Posté le 07-12-2007 à 16:15:19  profilanswer
 

Salut, oui mais ce que je veux surtout que la taille du bouton  s' adapte en fonction de ce que je tape.
Je ne crois pas que ce que tu me proposes puisse le faire, est-ce que je me trompe ?

n°1654675
kao98
...
Posté le 07-12-2007 à 16:16:56  profilanswer
 

Effectivement, non.


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
n°1655018
chrisllers
Posté le 08-12-2007 à 18:13:14  profilanswer
 

D' ailleurs le code que j' ai essayé ne fonctionne pas sur opera
help !!

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème CSS sur un bouton

 

Sujets relatifs
Problème de type sur Variable de formulaireprobleme fread magic
probleme integration flash dans firefoxProblème avec fonction IF NOT EXIST
Problème de closure ? [JAR] Problème avec un Jar dans un autre JAr
[PHP]Probleme de tableau aprés un explodeProbleme repaint et passage de variables
problème de compilation[CSS débutant] Problème sur un bouton
Plus de sujets relatifs à : Problème CSS sur un bouton


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR