1. #1
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 31
    Points : 22
    Points
    22

    Par défaut Mise en forme bouton input

    Bonsoir à tous

    Je suis novice dans la "programmation" je suis entrain de creer un formulaire, j'ai un bouton envoyer et reset que je souhaite modifier l'aspect, j'ai modifier la class mais il prend pas l'aspect que je souhaite, il reste identique.
    le bouton et "input" j'ai voulu prendre l'aspect d'un bouton " li"
    Je vous et le liens de la page avec les 3 boutons, c'est en cours de création, soyez indulgent, les 3 boutons sont "envoyer" et "réinitialiser" c'est cela que je veux modifier et l'autre c'est "comme celui la".
    Voici le lien vers la page : http://yakasolutions.pagesperso-orange.fr/contact2.html

    Merci par avance.

    @+Filou

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 094
    Points : 34 904
    Points
    34 904

    Par défaut

    Bonjour,
    j'ai modifier la class mais il prend pas l'aspect que je souhaite, il reste identique.
    tu as modifié la classe certes mais qu'as tu mis comme propriétés/valeurs dans cette classe ?

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 31
    Points : 22
    Points
    22

    Par défaut

    Bonjour

    En mettant la class sa reprend pas les mêmes infos les mêmes propriétés que l'autre ?

    Cdlt

    @+Filou

  4. #4
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 31
    Points : 22
    Points
    22

    Par défaut

    quelle difference entre :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <ul>
    	<li class="send"><a href="test.html"><i class="fa fa-share"></i>Webmaster</a></li>
    </ul>
    et
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="submit" class="send" value="Envoyer">

    au niveau de la class les boutons devraient ils pas être identique ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 094
    Points : 34 904
    Points
    34 904

    Par défaut

    Difficile de répondre simplement à tes interrogations !

    au niveau de la class les boutons devraient ils pas être identique ?
    Oui et non cela va dépendre de ce qu'il y a comme régles définies dans la classe.

    Si l'on regarde comment et définie ton lien, balise <a>, on ce rend compte que l'élément hérite de ses parents, c'est le C de CSS pour cascade.

    CSS récupéré (*), et épuré, dans ton document :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    .cBtn ul li {
        border-radius: 4px;
        float: left;
        list-style: none;
        background: #092bf8;
        box-shadow: 0px 2px 0px 0px #000;
    }
    .forma .cBtn .clear, .cBtn .send {
        margin-bottom: 0;
        margin-top: 4px;
        padding: 10px;
        padding-right: 17px;
        padding-left: 17px;
    }
    .cBtn ul li:last-child {
        margin-right: 0;
    }
    .cBtn ul li a {
        text-decoration: none;
        text-transform: uppercase;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }
    .forma .cBtn .clear a, .cBtn .send a {
        font-family: 'Roboto', 'sans-serif';
        font-weight: 700;
    }
    on constate donc qu'il n'y a pas de classe send « directe » et donc si tu l'appliques à ton <input> rien ne sera appliqué.

    En gros à toi de créer ta propre classe à affecter à <input> pour qu'il ressemble à ton <a>, ne pas oublier le changement de couleur au survol.

    Peut être devrais tu jeter un oeil du côté de : Les meilleurs cours et tutoriels pour apprendre le CSS

    (*) dans le navigateur, faire click droit sur l'élément à analyser et choisir dans le menu Inspecter/Examiner l'élément.

  6. #6
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    mars 2013
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2013
    Messages : 31
    Points : 22
    Points
    22

    Par défaut

    Bonjour

    Merci pour ton aide c'est bon j'ai créer ma propre class comme vous m'avez dit.
    Je penser qu'en remettant la même class cela était bon, je suis novice dans le sujet.
    Encore merci.

    @+Filou

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

Discussions similaires

  1. [AC-2010] Mise en forme boutons inaccessible
    Par Dixies dans le forum IHM
    Réponses: 4
    Dernier message: 24/12/2012, 17h11
  2. Réponses: 1
    Dernier message: 04/06/2007, 09h58
  3. Réponses: 3
    Dernier message: 09/08/2006, 09h25
  4. [access2002] [bouton De Mise En Forme]
    Par louroulou dans le forum Access
    Réponses: 1
    Dernier message: 02/06/2006, 19h16
  5. Mise en forme / Alignement de boutons
    Par Sebou77 dans le forum AWT/SWING
    Réponses: 3
    Dernier message: 28/04/2006, 18h29

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