Impossible d'éviter un saut de ligne en trop

**Zebulon777** · 22/10/2014, 15h25

Salut la compagnie et j'espère ne pas me tromper d'endroit pour poser ma demande d'aide.

Sur le net, j'ai trouvé un petit effet (tout fait) pour un bouton OUI / NON :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<span class="Effet3D3">Auto-Information : </span>
<label id="sliderLabel"> 
<input id="CB_AutoInfo" type="checkbox" onclick="Trt_AutoInfo()"/> 
<span id="slider"> 
<span id="sliderOn">OUI</span> 
<span id="sliderOff">NON</span> 
<span id="sliderBlock"></span> 
</span> 
</label>

Le CSS qui va avec :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
#sliderLabel {
    border:1px solid #a2a2a2;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
    display:block;
    height:30px;
    overflow:hidden;
    position:relative;
    width:100px;
}
 
#sliderLabel input {
    display:none;
}
 
#sliderLabel input:checked + #slider {
    left:0;
}
 
#slider {
    left:-50px;
    position:absolute;
    top:0;
    -webkit-transition:left .25s ease-out;
    -moz-transition:left .25s ease-out;
    -o-transition:left .25s ease-out;
    -ms-transition:left .25s ease-out;
    transition:left .25s ease-out;
}
 
#sliderOn,
#sliderBlock,
#sliderOff {
    display:block;
    font-family:arial,verdana,sans-serif;
    font-weight:bold;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:center;
    top:0;
}
 
#sliderOn {
    background:#3269aa;
    background:-webkit-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-moz-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-o-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:-ms-linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    background:linear-gradient(top,#3269aa 0%,#82b3f4 100%);
    color:white;
    left:0;
    width:54px;
}
 
#sliderBlock {
    background:#d9d9d8;
    background:-webkit-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-moz-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-o-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:-ms-linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    background:linear-gradient(top,#d9d9d8 0%,#fcfcfc 100%);
    border:1px solid #a2a2a2;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    height:28px;
    left:50px;
    width:50px;
}
 
#sliderOff {
    background:#f2f3f2;
    background:-webkit-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-moz-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-o-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:-ms-linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    background:linear-gradient(top,#8b8c8b 0%,#f2f3f2 50%);
    color:#8b8b8b;
    left:96px;
    width:54px;
}

Nom : Oui_Non.png
Affichages : 87
Taille : 7,5 Ko

Mon problème est donc qu'il y a toujours une saut de ligne avec le texte et je voudrai que le bouton "OUI/NON" soit juste après les ":" du texte ?

Je galère avec cette bêtise depuis quelques temps, donc merci d'avance pour votre aide.

**Bovino** · 22/10/2014, 16h03

Supprime le display:block; de #sliderLabel et ça devrait être bon.

**Zebulon777** · 23/10/2014, 08h12

Oula, ça fonctionne pas trop bien

Nom : Oui_Non_02.png
Affichages : 113
Taille : 7,4 Ko

**MachroSpectrus18** · 23/10/2014, 13h26

Bonjour,

Vérifiez s'il n'y a pas de problème avec les span. Sinon, essayez de modifier les width et les height.

Bonne journée.

**Zebulon777** · 23/10/2014, 14h18

Non, non, aucun problème avec les span, de plus si j'enlève le display:block; de #sliderLabel, comme indiqué par Didier, le bouton OUI/NON n'est plus utilisable.

Je cherche à avoir un truc du genre :

Auto-Information : OUI/NON

**NoSmoking** · 23/10/2014, 19h59

Bonjour,
j’enlèverais bien display:block, mais je mettrais display:inline-block.

**Zebulon777** · 24/10/2014, 08h21

AH yes !
C'est presque ça, il faudrait juste arriver à ce que "Auto-Information" et les boutons soient centrés :

Nom : Oui_Non_03.png
Affichages : 81
Taille : 8,0 Ko

Nom : Oui_Non_03.png
Affichages : 81
Taille : 8,0 Ko

Il faudrait donc remonter légèrement "Auto-Information", mais ce que je ne comprends pas c'est que "valign" ne semble pas être pris en compte ?

Je vous mets ce qui pourrait vous aider à m'aider

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
18
19
20
21
 
<tr valign="middle" >
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td colspan="2" >&nbsp;</td>
	<td colspan="2" align="center" class="arrow_box" id="Cell_Info">
		<span class="Effet3D3">Auto-Information : </span>
		<label id="sliderLabel"> 
			<input id="CB_AutoInfo" type="checkbox" onclick="Trt_AutoInfo('OUI')"/> 
			<span id="slider"> 
				<span id="sliderOn">OUI</span> 
				<span id="sliderOff">NON</span> 
				<span id="sliderBlock"></span> 
			</span> 
		</label>
		<br/>
	</td>
	<td colspan="2" >&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
</tr>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.Effet3D3{
font-family: Arial, sans-serif;
line-height: 1em;
color: #dee603;
font-weight:bold;
font-size: 25px;
text-shadow:0px 0px 0 rgb(127,135,-92),1px 1px 0 rgb(42,50,-177),2px 2px 0 rgb(-43,-35,-262), 3px 3px 0 rgb(-128,-120,-347),4px 4px 3px rgba(0,0,0,0.5),4px 4px 1px rgba(0,0,0,0.5),0px 0px 3px rgba(0,0,0,.2);}

**rodolphebrd** · 24/10/2014, 09h42

Salut,

on peut supprimer le line-height: 1em; de .Effet3D3 et lui ajouter un vertical-align: top;

http://codepen.io/anon/pen/xsokB

**Zebulon777** · 24/10/2014, 10h10

Merci, ça fonctionne presque, mais je crois avoir trouvé mieux (car je ne touche qu'au slider et pas à tous les objets de la classe), par contre, je ne sais pas si c'est très orthodoxe et si ça fonctionnera à tous les coups, vous me dites ?

J'ai donc juste ajouté la ligne en rouge, qu'en pensez-vous ?

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
#sliderLabel {
    border:1px solid #a2a2a2;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
/*    display:block;*/
	display:inline-block;
vertical-align:-60%;
    height:30px;
    overflow:hidden;
    position:relative;
    width:100px;
}

Nom : Oui_Non_04.png
Affichages : 79
Taille : 18,2 Ko

**rodolphebrd** · 24/10/2014, 13h25

A deux pixels près c'est la même chose mais c'est plus long à trouver.

Donner une valeur négative en pourcentage à vertical-align est possible.

**Zebulon777** · 24/10/2014, 14h52

Oui, mais ça m'embêtait de toucher à la classe "Effet3D3", car ça modifait d'autres choses que je ne voulais pas toucher.
Mais si tu me dis que ma solution ne posera pas de problème, ça me va

En tout cas, merci pour ton aide et à une prochaine