CSS - problema con texto que identifica el input, no puedo moverlo

 
Vista:
sin imagen de perfil

problema con texto que identifica el input, no puedo moverlo

Publicado por Hugo (7 intervenciones) el 02/10/2021 02:14:51
Hola, buenas noches.

Soy novato en programación y estoy intentando hacer un formulario al cual le coloco 2 inputs de tipo "date" que serían fecha desde y fecha hasta, los dos en una misma fila.
El problema es que cuando lo hago responsive uno de los inputs se desplaza hacia abajo, lo cual es correcto, pero el texto que lo identifica (en este caso "Hasta:" ) no y no sé como moverlo.
Adjunto print de pantalla para que se observe mejor.
Si alguien me puede ayudar, desde ya muchas gracias.
Sin-titulo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de pablo

problema con texto que identifica el input, no puedo moverlo

Publicado por pablo (37 intervenciones) el 04/10/2021 03:49:38
Hola Hugo podrías colocar el código de dicha parte por favor

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

problema con texto que identifica el input, no puedo moverlo

Publicado por Hugo (7 intervenciones) el 05/10/2021 02:25:30
Estimado Pablo, muchas gracias por tu interés.

Adjunto el código y te agradezco si me puedes ayudar.

Copio el código aquí.

HTML:

<html>
<head>
<title>Intranet</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../index.css">
<link rel="stylesheet" type="text/css" href="../Reclamos2/reclamos2.css">
<link rel="stylesheet" type="text/css" href="internacion.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div id="Logo">
<img src= "../logo-01.png" class="soc"/>
</div>
<div id="Cabecera">
</div>

<div id="Contenido">
<figure>
<img src= "../Hospital.jfif" class="fondo">
</figure>
<div id="cont-form">
<form action="#" method="post" class="form">
<div class="formulario">
<h2 class="titulo">Internación</h2><br><br>

<p>Seleccione:</p><br>
<label><input type="radio" name="internacion" value="hijo"/>Hijo/a menor de edad</label><br>
<label><input type="radio" name="internacion" value="madre"/>Madre</label><br>
<label><input type="radio" name="internacion" value="padre"/>Padre</label><br>
<label><input type="radio" name="internacion" value="conyuge"/>Cónyuge/Concubino</label><br>
<span>Desde:<input type="date" name="desde" class="fecha" required/></span>
<span class="Hasta">Hasta:<input type="date" name="hasta" class="fecha" required/></span><br>
<input type="submit" value="Ingresar" class="ingresar">
</div>
</form>
</div>
</body>
</html>

CSS:

/*reclamos2.css*/

*{
box-sizing:border-box;
}
body{
background-color:020640/*8DB6CB*/;
}
#Logo{
border-bottom: 4.5px solid;
color:020A4D;
}
#cabecera{
border-bottom: 4.5px solid;
color:020A4D;
}
#contenido{
background-color:020640;
height:auto;

}
#cont-form{
position:absolute;
left:20%;
top:22%;
width:60%;

}

.titulo{
padding:20px;
background-color:3F4048;
color:white;
font-size:25px;
font-weight:100;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom: 5px solid;
}
.form{
margin: 0 auto;
width:80%;
height:auto;
top:23%;
background-color:020640;
border-radius:10px;
border:3.5px solid;
color:white;
opacity:0.95;
}


input{
margin:8px;
margin-bottom:25px;
padding:6px;
border-radius:10px;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:600;
font-size:90%;
color:black;
width:9%;
text-align:center;
box-sizing:border-box;
font-size:15px;

}
input:focus{
background-color:C7D8EE;

}
p{
margin-left:3%;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:500;
font-size:90%;
color:white;
}

.fondo{
position:relative;
left:10%;
width:80%;
height:auto;
}
.fecha{
width:auto;
}

.descripcion{
position:relative;
left:10%;
width:70%;
height:25%;
}
.pre{
height:7%;
}
.lib, .pre, .prod{
margin:8px;
margin-bottom:25px;
padding:5px;
border-radius:10px;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:600;
font-size:90%;
color:black;
width:9%;
text-align:center;
}
.ingresar{
width:28%;
height:10%;
color:white;
font-family: OpenSans;
font-size:22px;
background-color:0B16BB;
border:20px;
border-radius:20px;
position:relative;
left:32%;
text-align:center;
}
h2{
text-align:center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

/*internacion.css*/

p{
font-size:17px;
}
label{
font-size:18px;
margin-left:5%;
}
span{
font-size:18px;
margin-left:7%;
}
.Hasta{
margin-left:1%;
}
.ingresar{
width:35%;

}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo

problema con texto que identifica el input, no puedo moverlo

Publicado por pablo (37 intervenciones) el 05/10/2021 22:51:46
hola Hugo aquí el código arreglado, yo te sugiero que tengas algunas media querys a la hora de aplicar responsive, de todas maneras espero te pueda ayudar mi solución
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
<html>
<head>
<title>Intranet</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../index.css">
<link rel="stylesheet" type="text/css" href="../Reclamos2/reclamos2.css">
<link rel="stylesheet" type="text/css" href="internacion.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kaisei+HarunoUmi:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div id="Logo">
<img src= "../logo-01.png" class="soc"/>
</div>
<div id="Cabecera">
</div>
 
<div id="Contenido">
<figure>
<img src= "../Hospital.jfif" class="fondo">
</figure>
<div id="cont-form">
<form action="#" method="post" class="form">
<div class="formulario">
<h2 class="titulo">Internación</h2><br><br>
 
<p>Seleccione:</p><br>
<label><input type="radio" name="internacion" value="hijo"/>Hijo/a menor de edad</label><br>
<label><input type="radio" name="internacion" value="madre"/>Madre</label><br>
<label><input type="radio" name="internacion" value="padre"/>Padre</label><br>
<label><input type="radio" name="internacion" value="conyuge"/>Cónyuge/Concubino</label><br>
 <div class="fechas" >
<span>Desde:
  <input type="date" name="desde"  class="fecha" required/></span>
<span class="Hasta">Hasta:
  <input type="date" name="hasta" class="fecha" required/>
   </span>
  </div>
   <br>
<input type="submit" value="Ingresar" class="ingresar">
</div>
</form>
</div>
</body>
</html>
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
*{
box-sizing:border-box;
}
body{
background-color:#020640/*8DB6CB*/;
}
#Logo{
border-bottom: 4.5px solid;
color:020A4D;
}
#cabecera{
border-bottom: 4.5px solid;
color:#020A4D;
}
#contenido{
background-color:#020640;
height:auto;
 
}
#cont-form{
position:absolute;
left:20%;
top:22%;
width:60%;
 
}
 
.titulo{
padding:20px;
background-color:3F4048;
color:white;
font-size:25px;
font-weight:100;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom: 5px solid;
}
.form{
margin: 0 auto;
width:80%;
height:auto;
top:23%;
background-color:#020640;
border-radius:10px;
border:3.5px solid;
color:white;
opacity:0.95;
}
 
 
input{
margin:8px;
margin-bottom:25px;
padding:6px;
border-radius:10px;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:600;
font-size:90%;
color:black;
width:9%;
text-align:center;
box-sizing:border-box;
font-size:15px;
 
}
input:focus{
background-color:#C7D8EE;
 
}
p{
margin-left:3%;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:500;
font-size:90%;
color:white;
}
 
.fondo{
position:relative;
left:10%;
width:80%;
height:auto;
}
.fecha{
width:auto;
}
 
.descripcion{
position:relative;
left:10%;
width:70%;
height:25%;
}
.pre{
height:7%;
}
.lib, .pre, .prod{
margin:8px;
margin-bottom:25px;
padding:5px;
border-radius:10px;
font-family: 'Kaisei HarunoUmi', serif;
font-weight:600;
font-size:90%;
color:black;
width:9%;
text-align:center;
}
.ingresar{
width:28%;
height:10%;
color:white;
font-family: OpenSans;
font-size:22px;
background-color:#0B16BB;
border:20px;
border-radius:20px;
position:relative;
left:32%;
text-align:center;
}
h2{
text-align:center;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
 
/*internacion.css*/
 
p{
font-size:17px;
}
label{
font-size:18px;
margin-left:5%;
}
span{
font-size:18px;
margin-left:7%;
}
.Hasta{
margin-left:30px;
}
.ingresar{
width:35%;
 
}
.fechas{
  display:flex;
  flex-direction: column;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

problema con texto que identifica el input, no puedo moverlo

Publicado por Hugo (7 intervenciones) el 06/10/2021 02:51:58
Muchas gracias por tu tiempo.

No me solucionó el problema ya que me sigue quedando igual, pero voy a probar colocándole media querys como me sugeriste.

Gracias nuevamente!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

problema con texto que identifica el input, no puedo moverlo

Publicado por Hugo (7 intervenciones) el 07/10/2021 04:03:41
Estimado Pablo, ahora sí logré que quedará y para ello utilicé media querys como me sugeriste.
Tus aportes, han sido de gran ayuda y solucionaron mi problema, te quedo enormemente agradecido.
Adjunto para que lo puedas ver.

Saludos y gracias nuevamente.
Sin-titulo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar