Discussion :

[predalpha]

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 :



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>