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 :

Alignement span sur input button


Sujet :

Positionnement en CSS

  1. #1
    Membre chevronné Avatar de predalpha
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    392
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 392
    Par défaut Alignement span sur input button
    Bonjour chers webmasters,

    je suis en train de développer un petit site internet et j'ai besoin de vous pour un problème d'alignement en CSS.

    L'objectif est d'obtenir la figure suivante :

    Nom : Sans-titre-1.jpg
Affichages : 686
Taille : 2,6 Ko

    Le carré bleu est un input button, le rouge est un élément span.
    Le carré bleu ne me pose pas de problème, toute fois, je n'arrive pas à positionner le span(en rouge)

    Voici un peu de code ci-dessous :
    CSS
    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
    .tuile {
        margin:0 auto;
        font-size:x-large;
        border : 0px solid transparent;
        height:80%;
        width:80%;
        background-color : #0096ed;
    }
     
    /* Styles pour le cricket */
    .cricketSmall{
        float:right;
        height:20%;
        width:20%;
        background-color:red;
        z-index:50;
    }
    HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="submit" name="ctl00$ContentPlaceHolder1$ButtonCricket_15$btCricket" value="15" id="ContentPlaceHolder1_ButtonCricket_15_btCricket"class="tuile"/>
    <span id="ContentPlaceHolder1_ButtonCricket_15_lblCricket" class="cricketSmall"></span>

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Bonjour !

    Je propose :
    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
    27
    28
    29
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>En rouge et bleu</title>
    <style>
    html, body {
      height: 100%;
    }
    button {
      position: relative;
      height: 80%;
      width: 80%;
      background: #0096ed;
    }
    span {
      position: absolute;
      top: 0;
      right: 0;
      height: 20%;
      width: 20%;
      background: red;
    }
    </style>
    </head>
    <body>
      <button type="sumbit"><span></span></button>
    </body>
    </html>

  3. #3
    Membre chevronné Avatar de predalpha
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    392
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 392
    Par défaut
    Ta solution fonctionne bien mais je ne peux pas insérer la balise span à l'intérieur du bouton.
    Pourrait-on envisager de placer le bouton et le span dans un div ?

  4. #4
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Mieux que ça :
    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>En rouge et bleu (bis)</title>
    <style>
    html, body {
      height: 100%;
    }
    p {
      position: relative;
      height: 80%;
      width: 80%;
    }
    input {
      width: 100%;
      height: 100%;
      background: #0096ed;
    }
    span {
      position: absolute;
      top: 0;
      right: 0;
      height: 20%;
      width: 20%;
      background: red;
    }
    </style>
    </head>
    <body>
    <p>
      <input type="submit" />
      <span></span>
    </p>
    </body>
    </html>

  5. #5
    Membre chevronné Avatar de predalpha
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    392
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 392
    Par défaut
    Merci beaucoup Muchos, cela fonctionne !

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

Discussions similaires

  1. Menu simple en vertical en cliquant sur un input-button
    Par mecmec dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 24/10/2013, 17h07
  2. Réponses: 3
    Dernier message: 06/04/2010, 11h56
  3. Rollover sur un Input Button
    Par whorian dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 27/01/2008, 11h02
  4. forcer l'alignement dans un input text
    Par simoryl dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 06/12/2005, 12h10
  5. [HTML] présision sur <input>
    Par mavina dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 22/08/2005, 12h32

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