Mimetisme ancres/boutons

Bonjour,

je cherche à obtenir un look commun entre certains liens d'une page et le bouton d'envoi de formulaire sur cette même page.

en fait il faudrait que les balises <a> aient la même largeur que les boutons, avec une bordure, un fond, le texte centré sans souligné et une argeur déterminée.

j'ai donc quelque chose du genre :

a.bouton {
  width : 150px
  background-color : #103090;
  color: #fff;
  border : 2px solid blue;
  cursor : pointer;
/*  display : block; */
/* OU DISPLAY : autre chose ? */
  text-align :center;
  text-decoration : none;
  margin : 3px; padding:5 px;
  font-family:Arial;
  font-weight:bold;
  min-width:150px; /* essai au cas où... */
}

mais ca ne marche pas super.
- si on met le display:block; l'élément a bien une largeur définie, mais se comporte comme une DIV et donc il faut le floater si on veut en aligner plusieurs;
- et si on ne le met pas, on n'a pas de largeur définie puisque c'est un élément en ligne

j'aimerai éviter d'utiliser des images à la place du bouton et des liens mais c'est peut être la seule solution !

je vous envoie ce post car la, je seche un peu !
merci d'avance

Héfeustz
Modifié par hefeustz (14 Jan 2008 - 19:18)

Salut,

On peut avoir ton HTML ?

Une classe CSS ne veut rien dire sans contexte.

Le plus simplement possible

<a class="bouton" href="/dossiers/lister"> Retour à la liste </a>
ou à la rigueur :
<span class="bouton"><a ...></a></span>

et ca doit ressembler comme deux gouttes d'eau au bouton de validation du formulaire :
<input type=submit" value="Enregistrer les modifications" class="btn_class" />

voilà, j'espere que ca va t'inspirer

Salut,

Chez moi, ça fait un bouton mais j'ai corrigé :

padding:5px;

au lieu de

padding:5 px;

Pas d'espace entre 5 et px

J'espère que cela convient car je n'avais pas la classe btn_class
Modifié par papyjo (15 Jan 2008 - 15:56)

on y est presque...
enfin fait peu importe ce qu'il y a dans la classe btn_class et les padding éventuels et ce qu'il faudra mettre dedans

le problème principal est : faut il absolument mettre un "display:block;" sur la balise <a> pour qu'elle acquière une _vraie_ largeur, c'est à dire pour qu'elle dessine une bôite suffisamment grande pour que le texte soit _centré_ dedans, puisque par défaut <a> est une balise "inline" dont la largeur est exactement celle du texte qu'elle contient ?

surtout avec le fait que les balises block se placent les unes en dessous des autres et que les pseudo boutons ainsi créés ne s'aligneraient pas comme des boutons de boite de dialogue windows gebre :

[Oui][Non][Annuler]

sauf à mettre des "float:left" partout avec tous les embêtements que ca suppose...

donc vois tu une solution ou alors je prends Paint et je dessine des images à la main (nouveau, éditer, suivant, précédent, annuler, retour à la liste, etc) c'est moins souple et un peu plus long à faire (il n'y en a pas tant que ca) mais au moins ca marchera ?