Hola, ¿alguien me podría ayudar en este reto por favor? No sé como hacer que se solape y esté centrado. <ul> <li>El Html:</li> </ul> <co...

Juan Sebastián Vargas Castañeda

Pregunta

student•

Hola, ¿alguien me podría ayudar en este reto por favor? No sé como hacer que se solape y esté centrado.

El Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reto 2</title>
    <link rel="stylesheet" href="./reto2styles.css">
</head>
<body>
    <main>
        <div class="first-block">
            <h2>Lorem</h2>
        </div>
        <div class="second-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Quisquam nemo autem error voluptas dolores excepturi officia 
                magni saepe odit fuga assumenda et omnis voluptatem, voluptates 
                quidem at optio veniam eum.
            </p>
        </div>
        
    </main>
</body>
</html>

El CSS:

Cindy Alejandra Castilla Ramírez

student•

También puedes utilizar el elemento z-index=1 en la caja Lorem, inmediatamente queda superpuesta.

Joorkar Rocha

student•

Si quieres que se sobreponga first-block, cambia el position relative por absolute

Luis Antonio Vargas Avila

student•

Hola! Para que el solape del título quede frente yo le puse el estilo directo en <h3> sin <div>

<h2 class="title">

y en CSS

.title {

    position: relative;
    margin: 0 auto;

}

Juan Sebastián Vargas Castañeda

student•

Hola muchachos ¡Muchas gracias a todos por su aporte! Ya logré entender mejor y centrarlo. Solo que el bloque de abajo se solapa al de arriba. Eso es lo único que no he entendido, cómo hacer para ajustar eso.

David Díaz

student•

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <div class="firts-block">
            <h2>Lorem</h2>
        </div>
        <div class="second-block">
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo similique, adipisci quia corporis, placeat ducimus necessitatibus possimus perspiciatis, perferendis quaerat debitis labore alias. Ut, adipisci eligendi. Ut consectetur commodi
                velit!
            </p>
        </div>
    </main>
</body>

</html>```

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');

{ box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: 'Nunito', sans-serif; }

.firts-block { position: relative; display: flex; width: 100%; height: 50px; justify-content: center; z-index: 10; }

.firts-block h2 { width: 24%; background: cadetblue; justify-content: center; align-items: center; display: flex; border-radius: 7px; font-size: 1.8em; }

.second-block { position: relative; display: flex; justify-content: center; width: 100%; height: center; z-index: 20; /* PARA DETERMINAR QUE ELEMENTO VA SOBRE OTRO, ES COMO SI FUERAN CAPAS A MAYOR NUMERO MAS ENFRENTE ESTA LA CAPA */ }

.second-block p { font-size: 1.6em; width: 40%; height: 200px; text-align: center; background: antiquewhite; }```

Espero sea lo que necesites, la verdad me confundí un poco en lo que quieres, saludos 😁

David Díaz

student•

Te recomiendo que uses la propiedad position: absolute en el h2 y p luego asignas la propiedad display:flex y justify-content: center en "firtsblock" y "secondblock".

Gustavo Adolfo Nieto Gómez

student•

Hola de nuevo, encontré como solapar ambos contenedores, usa números negativos, por ejemplo para bajar la parte de abajo del primer contenedor usa bottom: -20px; por ejemplo.

PERO OJO: Recuerda agregar lo de esta clase, el position a ese contenedor, si no lo agregas no veras el efecto de solape.

    position: relative;
    bottom: -2rem;

John Cardenas

student•

Para aplicar lo enseñado en la clase: dale a

.first-block

position:absolute

y a

.second-block

position:relative

y juega con las propiedades top, right, left y bottom de este último 👀

Para centrar los dos elementos (divs dentro de main), puedes darle a la etiqueta

main

un width de 90% (o el porcentaje que quieras) y un

margin: 0 auto

Tu puedes :D

Gustavo Adolfo Nieto Gómez

student•

¡Hola! estoy atorado también con el solape, pero te puedo ayudar con el centrado, intenta aplicando esto al selector que quieres centrar

margin: 0 auto;

Hola, ¿alguien me podría ayudar en este reto por favor? No sé como hacer que se solape y esté centrado. <ul> <li>El Html:</li> </ul> <co...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]