Alignement span sur input button

Version imprimable

1 pièce(s) jointe(s)

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 :

Pièce jointe 147857

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:

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:

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>

Bonjour !

Je propose :

Code:

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>

05/06/2014, 14h54
predalpha

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 ?

Mieux que ça :

Code:

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>

05/06/2014, 16h42
predalpha

Merci beaucoup Muchos, cela fonctionne !