Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Subir texto de div

CSS - Subir texto de div

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 02/07/2020 18:38:03
Hola tengo lo siguiente

1
2
3
4
5
<header class="">
   <input type="hidden" id="p5" name="p5" value="<?php echo $p5; ?>">
   <div class="numeros">5</div>
   <div class="pregunta"><?php echo $p5; ?></div>
</header>

Con este estilo
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
header {
    padding: 2em;
}
.numeros {
    color: var(--colorRojo);
    font-weight: bold;
    border: 2px solid var(--colorRojo);
    width: 75px !important;
    height: 75px !important;
    text-align: center;
    font-size: 2.5em;
    display: table-cell;
}
.pregunta {
    font-family: nexa-bold;
    font-size: 1.5em;
    padding-left: 2em;
    color: var(--colorRojo);
    font-weight: bold;
    display: table-cell;
    line-height: 1;
    vertical-align: text-top;
    background-color: #b0aeae;
    margin-top: -100px !important;
}

Que me genera esto
margin

Si se fijan, aunque tengo margin-top: -100px !important; no logro hacer que el texto inicie justo donde inicia el borde de los números, o donde yo quiera.

Alguna idea de porque ese comportamiento? De hecho antes ya le subido textos de divs así, pero no se aca que sera lo malo.

PD: El color gris es para resaltar.
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por joel (252 intervenciones) el 02/07/2020 20:44:32
Hola Kathyu, eso te pasa por el display:table-cell.

Si te fijas, la parte inferior de la primera linea del texto esta alineada en la parte inferior del numero 5.

Si quitas la propiedad display:table-cell del numero, veras que se quitan esos margenes, de igual manera si disminuyes el tamaño del numero veras que el texto también te sube.

Yo no soy muy partidario de utilizar el display tipo table.
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 03/07/2020 10:28:58
Si quito lo de display:table-cell queda así
noCell

Si le pongo display inline-block
inlineBlock

Y lo que quiero como resultado es este
final

Osea, que la pregunta o frase quede alineado con el texto, es super raro porque pensé que era por los elementos que usaba antes, antes los dos divs estos eran, un span y un h1 y pensé que si los pasaba a divs podría alinearlos, pero ya veo que eso tiene algo raro

Otra cosa, porque no funciona el margin en negativo? Eso siempre me ha funcionado, es mas ni en el debbuger del navegador puedo hacer que se suba, nadaaaaaaaa
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por joel (252 intervenciones) el 03/07/2020 12:52:46
Una manera es utilizando postiion... con este código:
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
<style>
header {
    padding: 2em;
}
.numeros {
    color: Red;
    font-weight: bold;
    border: 2px solid Red;
    width: 75px !important;
    height: 75px !important;
    text-align: center;
    font-size: 2.5em;
    position:absolute;
}
.pregunta {
    font-family: nexa-bold;
    font-size: 1.5em;
    padding-left: 2em;
    color: Red;
    font-weight: bold;
    line-height: 1;
    background-color: #b0aeae;
    position:relative;
    margin-left:79px;
}
</style>
 
<header class="">
   <input type="hidden" id="p5" name="p5" value="ssss">
   <div class="numeros">5</div>
   <div class="pregunta">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley</div>
</header>

Queda así:

Screenshot_20200703_124254




Pero por lo que veo tu quieres que quede así:

Screenshot_20200703_125205

Y el código seria este:
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
<style>
header {
    padding: 2em;
}
.wrapper {
    display:flex;
    align-items:center;
}
.numeros {
    color: Red;
    font-weight: bold;
    border: 2px solid Red;
    width: 75px !important;
    height: 75px !important;
    text-align: center;
    font-size: 2.5em;
    position:absolute;
}
.numeros:before {
    content: "";
    display:inline-block;
    height:100%;
    vertical-align: middle;
}
.pregunta {
    font-family: nexa-bold;
    font-size: 1.5em;
    padding-left: 2em;
    color: Red;
    font-weight: bold;
    line-height: 1;
    background-color: #b0aeae;
    position:relative;
    margin-left:79px;
}
</style>
 
<header class="">
   <input type="hidden" id="p5" name="p5" value="ssss">
    <div class="wrapper">
        <div class="numeros">5</div>
        <div class="pregunta">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley</div>
    </div>
</header>


Te sirve?
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 03/07/2020 13:38:28
Déjeme hacer pruebas, no he revisado pero el resultado de su segunda imagen es lo que yo quiero.

Cuando haga las pruebas yo le respondo, por el momento tengo un pedido urgente de Fiverr (bajo de agua )
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 03/07/2020 16:41:17
Super excelente !!!!!!!!!!!!

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
.wrapper {
    display: flex; // Porque Flex?
    align-items: center;
}
.numeros {
    color: var(--colorRojoPlanB);
    font-weight: bold;
    border: 2px solid var(--colorRojoPlanB);
    width: 75px !important;
    height: 75px !important;
    text-align: center;
    font-size: 2.5em;
    position: absolute; // Al ser absoluto impera y domina sobre el relativo?
}
/* Todo este código, con que propósito?? */
.numeros:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
 
.pregunta {
    font-family: nexa-bold;
    font-size: 1.5em;
    padding-left: 2em;
    color: var(--colorRojoPlanB);
    font-weight: bold;
    display: table-cell;
    line-height: 1;
    vertical-align: text-top;
    position: relative; // Este se acopla al absoluto?
    margin-left: 79px; // Porque exactamente 79??
    // Usted ocupó mucho texto y aun así todo se hace justo, alineado horizontal...
}

Me puede aclarar las dudas de los coments anteriores?

He aca algunos resultados. Todo se ve muy bien.

5

10

Como pueden ver, en las respuestas de la pregunta 10 (y en todas) me pasaba lo mismo, ahora voy a modificar el estilo para dejarlas todas alineadas
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por joel (252 intervenciones) el 03/07/2020 20:49:45
Hola, intento comentarte...

1
2
3
4
.wrapper {
    display: flex; // Porque Flex?
    align-items: center;
}
Flex permite de manara simple alinear los elementos que contiene de muchas maneras... en este caso verticalmente, adaptándose al contenido.

1
position: absolute; // Al ser absoluto impera y domina sobre el relativo?
Si pruebas a cambiarlo, veras que el tamaño del cuadro variara... hace que tenga el tamaño que has indicado

1
2
3
4
5
6
7
/* Todo este código, con que propósito?? */
.numeros:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
Simplemente centra el numero verticalmente dentro del recuadro.

1
position: relative; // Este se acopla al absoluto?
Este lo puedes quitar... no hace nada... me lo deje... lo siento!!

1
margin-left: 79px; // Porque exactamente 79??
Tu tienes puesto que el numero tenga una anchura de 75px y le has puesto un borde de 2px a cada lado... 75+2+2=79


Espero que te ayude a entenderlo... cualquier duda...
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 04/07/2020 01:19:02
Ufff mucho de eso no me lo sabia. Eso del 79 sigo sin entenderlo lo estudiare mas.

Gracias, muy fino en ayudar.
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por joel (252 intervenciones) el 04/07/2020 08:34:17
Intento explicarme...

Tu has puesto una anchura de tu recuadro de 75px, y también has puesto un borde de 2px a todo su alrededor para saber la anchura total de tu div, tienes que sumar la anchura definida mas la anchura del borde de cada lado.

No se si me he sabido explicar...
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 04/07/2020 10:45:41
Si, pero lo usa como margin, ese es mi punto, porque darle un margin-left: 79px; exactamente.
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por joel (252 intervenciones) el 04/07/2020 11:03:18
El numero al ser con postition: absolute, tiene su lugar fijo. Si no ponemos esa separación en el div de la pregunta, se pondría sobre el numero.

Prueba a quitarlo, veras como se comporta.
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 Kathyu
Val: 101
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Subir texto de div

Publicado por Kathyu (30 intervenciones) el 04/07/2020 11:25:28
Excelente por ahí si queda claro.
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