IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[CSS][sémantique Web] boutons SUBMIT et images


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 70
    Points : 73
    Points
    73
    Par défaut [CSS][sémantique Web] boutons SUBMIT et images
    Ma question concerne le bouton submit dans les formulaires.

    Pour faire des boutons graphiques, la quasi-totalité des gens utilise un input de type image. Même si sémantiquement, ce n'est pas l'équivalent d'un submit (il est fait pour renvoyer les coordonnées du click sur l'image).

    Ma question concerne la modification graphique des boutons SUBMIT par les CSS, pour les rendre plus "jolis". Je sais qu'on peut modifier les bordures, le fond, la taille comme n'importe quel élément HTML. Mais ce que je voudrais, ce serait masquer complètement le texte du bouton (le value), pour avoir un bouton avec juste une image. Etant donné qu'on ne peut pas insérer de span comme dans les titres (en html, input n'est pas un vrai bloc), et que le text-ident ne semble pas marcher, vous voyez une solution ?

  2. #2
    Membre chevronné Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Points : 1 967
    Points
    1 967
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    background-image: url(images/bouton.gif);
    Permet de changer l'image de "fond" d'un bouton et de mettre le texte du bouton dans l'attribut habituel

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 70
    Points : 73
    Points
    73
    Par défaut
    Oui, je sais changer le background d'un bouton, ça c'est bon.

    Ce que je voudrais faire, c'est masquer complètement le texte du bouton, pour que celui-ci soit purement graphique.

    Un peu comme quand on met un background dans un H1, puis qu'on masque le texte original en l'entourant d'un <span> qu'on place en invisible.

  4. #4
    Membre chevronné Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Points : 1 967
    Points
    1 967
    Par défaut
    Ben en mettant aucun texte sur ton bouton ca marche pas ?

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Décembre 2004
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2004
    Messages : 70
    Points : 73
    Points
    73
    Par défaut
    J'ai pas essayé.

    Mais bon, niveau accessibilité, si je commence à supprimer du contenu, c'est pas top...

  6. #6
    Membre chevronné Avatar de Oluha
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    2 183
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 183
    Points : 1 967
    Points
    1 967
    Par défaut
    je vois pas où est le problème puisque de toutes facons tu ne veux pas l'afficher...

  7. #7
    tyx
    tyx est déconnecté
    Membre du Club
    Profil pro
    Inscrit en
    Avril 2005
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2005
    Messages : 52
    Points : 54
    Points
    54
    Par défaut
    Si on met pas de texte, les navigateurs en mettent par défaut me semble-t-il.

    J'ai déjà eu le problème et je dois dire qu'aucune solution ne m'a paru très efficace.

    Il y a bien ce code css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    line-height: 1000px ; font-size: 0px ;
    qui à l'air de fonctionner avec IE et Firefox mais pas avec opéra et d'autres certainement.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Boutons submit avec images
    Par valou79 dans le forum ASP
    Réponses: 8
    Dernier message: 16/12/2012, 02h37
  2. Bouton submit en image
    Par Godard dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 12/08/2010, 09h43
  3. formulaire bouton submit avec image
    Par nickg dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/02/2008, 15h33
  4. Problème de boutons submit en images
    Par shawn12 dans le forum Langage
    Réponses: 4
    Dernier message: 07/04/2006, 09h52
  5. Formulaire et bouton submit avec image mapée
    Par dody dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 06/12/2004, 16h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo