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

  1. #1
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 799
    Points : 10 782
    Points
    10 782

    Par défaut Placer un caractère dans un button en décalant sa position verticale

    Salut

    Un peu de code
    Code HTML : 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
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
                            button {
                                    position:absolute;
                                    left:216px;
                                    top:3px;
                                    font-size:26px;
                                    height:21px;
                                    /* padding-top:-2px !important; */
                                    /* padding-bottom:2px !important; */
                            }
                    </style>
    	</head>
    	<body>
    		<button id="btnRetour" title="Retour">&#11186;</button>
    	</body>
    </html>
    Une petite image
    Nom : BtnFleche.jpg
Affichages : 32
Taille : 4,0 Ko
    Voila, en
    1 j'ai le caractère que je veux mettre dans le bouton btnRetour
    2 le résulta qui ne me convient pas
    3 se que je voudrai obtenir.
    Je ne peux/veux pas changer la hauteur du bouton, pour être vue correctement, le font-size:26px est à mon avis indispensable.

    Est-il possible de centrer verticalement le caractère dans son conteneur Button ?
    En dernier recours, je pourrai faire deux images du bouton (une non survoler et l'autre au survole) puis simuler cette image comme un boutton, mais cela me contrarie

    Merci de votre aide.
    ProgElecT
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  2. #2
    Membre extrêmement actif Avatar de Sodium
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    1 026
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : avril 2014
    Messages : 1 026
    Points : 1 407
    Points
    1 407

    Par défaut

    Un line-height égal à la hauteur du bouton ne fonctionne pas ?

    Sinon ben :

    Code HTML : 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
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                            button {
                                    position:absolute;
                                    left:216px;
                                    top:3px;
                                    font-size:26px;
                                    height:21px;
                                    /* padding-top:-2px !important; */
                                    /* padding-bottom:2px !important; */
                            }
     
                            button span {
                                margin-top: -10px;
                                display: block;
                            }
                    </style>
        </head>
        <body>
            <button id="btnRetour" title="Retour">
                <span>&#11186;</span>
            </button>
        </body>
    </html>

  3. #3
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 799
    Points : 10 782
    Points
    10 782

    Par défaut

    Un line-height égal à la hauteur du bouton ne fonctionne pas ?
    Ben non justement, même en lui ajoutant !important.
    Merci Sodium c'est cela fonctionne très bien avec ta solution
    ProgElecT
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

  4. #4
    Membre extrêmement actif Avatar de Sodium
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2014
    Messages
    1 026
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : avril 2014
    Messages : 1 026
    Points : 1 407
    Points
    1 407

    Par défaut

    Pas de problèmes, je te conseille tout de même d'appliquer un reset CSS et de forcer la hauteur du bouton pour ne pas avoir de surprises d'un navigateur à l'autre

  5. #5
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 394
    Points : 32 686
    Points
    32 686

    Par défaut

    Bonjour,
    Citation Envoyé par ProgElect
    Je ne peux/veux pas changer la hauteur du bouton, pour être vue correctement,
    Lorsque l'on affecte une taille de fonte à un élément la moindre des choses et que celui-ci puisse contenir proprement le texte mis, donc le forcer à une hauteur inférieure au contenu potentiel n'est en soit pas très judicieux.

    Il est dans ce cas plus simple de mettre la propriété line-height à 1 pour que le contenu se centre verticalement et que le conteneur s'ajuste à la juste taille.
    De plus pour augmenter la hauteur il te suffit de jouer sur la valeur de ta line-height.


    Citation Envoyé par ProgElect
    ... cela fonctionne très bien avec ta solution
    Ajouter un élément neutre uniquement dans le but de le décaler à l'affichage j'appelle cela du bidouillage ce qui rend le code inutilement « lourd ».


    Citation Envoyé par Sodium
    je te conseille tout de même d'appliquer un reset CSS et de forcer la hauteur du bouton pour ne pas avoir de surprises d'un navigateur à l'autre
    Si l'on veut appliquer un « reset » pour ce satisfaire l'esprit, notamment pour le padding, il faudrait également redéfinir les styles au :hover, :focus, :active entre autres border-xxxxxx ...

    en conclusion, voilà qui devrait être suffisant :
    HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button class="btn-retour" id="btnRetour" title="Retour">&#11186;</button>
    CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .btn-retour {
      font-size: 1.625em;   /*26px;/**/
      line-height: 1;
    }


    Nota :
    Pour définir la taille de la fonte, je te conseilles de passer aux unités em (unité relative au parent) ou rem (unité relative au document) et d'oublier les px.

    Complément d'information : line-height

  6. #6
    Rédacteur/Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    4 799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 62
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 4 799
    Points : 10 782
    Points
    10 782

    Par défaut

    Salut

    Merci NoSmoking de ces nouvelles informations.

    Je vais revoir la disposition/emplacement de ces 3 boutons en ne passant pas par ce "bricollage" qui, pour l'instant, me permet de continuer à avancer dans mon petit programme.
    ProgElecT
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.

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

Discussions similaires

  1. Se placer après le 2ème caractère dans une chaine
    Par danydan01 dans le forum Syntaxe
    Réponses: 3
    Dernier message: 06/05/2011, 11h24
  2. Réponses: 3
    Dernier message: 24/06/2009, 16h19
  3. Correspondaces caractères ° dans le XML
    Par boborde dans le forum XML/XSL et SOAP
    Réponses: 3
    Dernier message: 28/11/2002, 17h51
  4. Adresse des polices de caractères dans la RAM video ?
    Par Anonymous dans le forum x86 16-bits
    Réponses: 5
    Dernier message: 27/05/2002, 18h29
  5. Réponses: 3
    Dernier message: 09/05/2002, 02h39

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