Alignement span sur input button

**predalpha** · 05/06/2014, 13h35

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>

**Muchos** · 05/06/2014, 14h30

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>

**predalpha** · 05/06/2014, 14h54

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 ?

**Muchos** · 05/06/2014, 15h46

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>

**predalpha** · 05/06/2014, 16h42

Merci beaucoup Muchos, cela fonctionne !

Alignement span sur input button

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager