-1

Recientemente empecé una pagina todo iba bien pero e creado un div con la clase "cfrasedeldia" que contenga un párrafo pero al abrir esta pagina ese párrafo no se muestra.

E investigado pero no e encontrado información para solucionarlo pero yo creo que el problema esta en el codigo css.

_______ ignoren esto

Lorem ipsum dolor sit amet. Ut quis quia id reiciendis iste sit facilis voluptas nam earum velit. Et tenetur sunt in delectus perspiciatis et perspiciatis provident? 33 similique fuga non quam voluptatem et recusandae nobis est neque quaerat rem animi ipsum 33 quisquam vero et deleniti molestias. Sit Quis tenetur est tempora quos ut explicabo blanditiis et itaque.

Vel voluptatibus maiores qui suscipit necessitatibus quo ipsum natus et atque internos sed excepturi galisum ut laboriosam quia et exercitationem. Qui doloribus consequatur a necessitatibus consectetur et velit voluptatem qui placeat quas ut impedit libero non enim sint qui earum odio.

Qui repellendus unde ipsum architecto non tempora possimus et reprehenderit ullam. Sed fuga accusamus 33 animi enim ducimus omnis.

ignoren esto _______

introducir la descripción de la imagen aquí

body {
    margin: 0;
}

.menup {
    width: 100%;
    height: 100px;
    background-image: radial-gradient(circle at 95.45% -4.17%, #859fff 0, #3c78f2 50%, #0054d3 100%);
    position: absolute;

    
}
#doce {
    font-size:  80px;
    margin-top: -15px;
    font-family: 'League Gothic', sans-serif;
    display: flex;
    list-style: none;
    position: absolute;
    left: -50px;
    top: 0%;
    
}

.menup li {
    padding: 10px;
}

.cfrasedeldia {
    height: 400px;
    width: 100%;
    background: darkorange;
    display: block;
    
  }

  #frasedeldia {
    
    color: green;
  }
<!DOCTYPE html lang="es">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="index.css" rel="stylesheet" TYPE="text/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=League+Gothic&display=swap" rel="stylesheet">
  <title>Rcss</title>
</head>
<body>
  <div class="menup">
    <ul id="doce">
      <li>
        Menu
      </li>
      <li>
        Parte 
      </li>
    </ul>
  </div>
  <div class="cfrasedeldia">
    <p id="frasedeldia">
      Una opcion es una oportunidad
    </p>
  </div>
    
</body>
</html>

5
  • por favor ingresa el código de tu proyecto acá, no con una captura de pantalla, así puedo testear en mi localhost.
    – Roy
    el 7 mar. 2022 a las 22:26
  • Prueba con un display: block a su padre .cfrasedeldia. de lo contrario, edita tu pregunta y agrega el código en formato texto el 7 mar. 2022 a las 23:09
  • ya e agregado el código igualmente el display: block no lo soluciona
    – Ringoelie
    el 7 mar. 2022 a las 23:15
  • veo que ya resolviste tu duda, por otro lado veo que usas sublime text, pero no particionas la vista del editor por eso usas 2 ventanas para html y css, te recomiendo que apreta alt + shift + 2 así la ventana se divide en dos y podes trabajar tranquilo sin estar cambiando de ventana.
    – Roy
    el 8 mar. 2022 a las 1:25
  • Porqué vandalizas tu propia publicación añadiendo un lorem ipsum? el 8 mar. 2022 a las 3:18

2 respuestas 2

3

buen Día...

La posición absoluta no toma como referencia su elemento contenedor , sino la ventana del navegador, tal como la tienes en el CSS, de seguro este div está detrás de la class=menup y del id=doce

Para solucionarlo y si vas a trabajar con absoluta debes calcular donde comienza y termina cada div en términos de píxeles.

Por favor, recuerda siempre que al hacer preguntas con el código de ejemplo el mismo no debe ser imágenes debes copiarlo y pegarlo como código encerrando el mismo con tres comillas invertidas (```).

1

Bien bien... Realice varios cambios en tu código para solucionar. Espero que este sea solamente una práctica, y no un proyecto o trabajo terminado. Porque así como está, está algo mal estructurado.

Problema: El .menup tiene una posición absoluto, lo cual hace que .cfrasedeldia se quede abajo e invisible parcialmente (lo que hizo que no se vea el párrafo, el texto).

Solución: Para que .cfrasedeldia no se quede debajo de .menup, entonces a .cfrasedeldia le damos un margen hacia arriba con margin-top con la dimensión del ancho de .menup: en este caso, 100 píxeles.

También modifique #doce porque no necesita ser posición absoluta, porque su padre .menup ya es absoluto.

Espero que te sirva.

body {
    margin: 0;
}

.menup {
    background-image: radial-gradient(circle at 95.45% -4.17%, #859fff 0, #3c78f2 50%, #0054d3 100%);
    display: block;
    position: absolute;
    top: 0;
    Left: 0;
    width: 100%;
    height: 100px
}
#doce {
    font-size:  80px;
    font-family: 'League Gothic', sans-serif;
    display: flex;
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0
}

.menup li {
    padding: 10px;
}

.cfrasedeldia {
    height: 400px;
    width: 100%;
    margin-top: 100px;
    background: darkorange;
  }

  #frasedeldia {
    width: 100%;
    color: green;
  }
<!DOCTYPE html lang="es">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="index.css" rel="stylesheet" TYPE="text/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=League+Gothic&display=swap" rel="stylesheet">
  <title>Rcss</title>
</head>
<body>
  <div class="menup">
    <ul id="doce">
      <li>
        Menu
      </li>
      <li>
        Parte 
      </li>
    </ul>
  </div>
  <div class="cfrasedeldia">
    <p id="frasedeldia">
      Una opcion es una oportunidad
    </p>
  </div>
    
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.