1

Mi problema es que dado el siguiente código HTML5

<!DOCTYPE html>

<html>

<head>
    
    <title>Prueba_1</title>
    <meta charset="utf-8">
    <meta name="author" content="Sergio">
    <meta name="Copyright" content="Facebook Inc.">
    <!--Si seleccionamos "noindex", entonces ocultamos la página al usuario al no ser indexable-->
    <meta name="robots" content="index">
    <!--Investigar sobre este metadato-->
    <meta name="robots" content="follow">
    <meta name="keywords" content="primer programa, HTML5, Sergio, lista de la compra">
    <meta name="description" content="Esta web pretende servir de prueba para practicar HTML5">
    <link rel="icon" type="image/ico" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" tyoe="text/css" href="estilo3.css">

</head>

<body>

    <header>
        
        <nav>
            
            <ul>
            
            <li><a href="index.html">Inicio</a></li>
            <li><a href="Página_2.html">Comida</a></li>
            <li><a href="Página_3.html">Mi cuenta</a></li>  

            </ul>

        </nav>

    </header>

    <h1>Bienvenido a la tercera página</h1>

    <div ID="caja1">Hola mundo</div>
    <div ID="caja2"></div>
    <div ID="caja3"></div>
    <div ID="caja4"></div>

</body>

</html>

donde la hoja de estilo "normalize.css" pone suprime la configuración estándar para "tenerlo todo a cero" y la hoja de estilo "estilo3.css" es la siguiente:

#caja1{
    width: 200px
    height: 200px;
    background-color: green;
    margin: auto;
}

#caja2{
    color: red;
}

#caja3{
    color: yellow;
}

#caja4{
    color: blue;
}

El objetivo es crear cuatro cajas 200x200px y situarlas en diferentes lugares de la página: el centro, a los lados, arriba, abajo...para así trabajar un poco con las cajas como tal y ver cómo interactúan entre sí. No quiero poner texto dentro ni nada más que ver cómo son y cómo funcionan.

El problema es que las cajas "aparecen" en la página. Las comillas se deben a que, según el código en vivo sobre la página (me refiero al código que se ve al abrir la página en el navegador y pulsar Ctrl+Mayus+I), la altura es de 0px. Esto provoca que, evidentemente, no sean visibles.

He pensado que podría ser algún tipo de problema con la herencia en cascada, aunque es complicarme la vida: el programa es bien sencillo y no hay otros elementos además de las 4 cajas. Lo mismo tiene relación con la hoja normalize (no la comparto porque es larguísima), pero tengo entendido que es una hoja muy empleada para "normalizar" los programas, luego, si estuviera mal, mucha gente se habría quejado de ello.

Por lo tanto, no tengo ni idea de por qué la altura es cero en las cuatro cajas, a no ser que se escriba texto en ellas, a pesar de que se especifican las dimensiones.

2
  • La altura es 0: porque no tiene contenido. No estás especificando las dimensiones con CSS. Si específicas las dimensiones el contenido no será necesario
    – Rodrigo
    Commented el 17 ene. 2021 a las 12:42
  • Solo tiene las dimensiones la primera caja porque no me interesa seguir probando código si la primera no funciona. Gracias Commented el 23 ene. 2021 a las 21:39

2 respuestas 2

2

Debes de especificar la altura de todas las cajas en tu código css, ya que si estas no poseen contenido y no especificas su ancho y altura al mismo tiempo estas no serán visibles en tu web.
Ejemplo:

#caja1{
    width: 200px;
    height: 200px;
    background-color: green;
    margin: auto;
}

#caja2{
    width: 200px;
    height: 200px;
    color: red;
}

#caja3{
    width: 200px;
    height: 200px;
    color: yellow;
}

#caja4{
    width: 200px;
    height: 200px;
    color: blue;
}

Nota: En las primeras lineas css, en tu selector "#caja1", posee un error de sintaxis, falta el ";" luego de especificar el ancho de tu primera caja, Espero te sea de ayuda :D.

Mas informacion: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja

1
  • Solo tiene las dimensiones la primera caja porque no me interesa seguir probando código si la primera no funciona. Gracias por el punto y coma, me lo comí de lleno. Commented el 23 ene. 2021 a las 21:39
1

Tú código contenía un error, faltaba un ";" al final de width:200px. Eso hacía que el height se interpretase como parte del valor del width.

#caja1{
    width: 200px /*Falta un ";" de cierre*/
    height: 200px;
    background-color: green;
    margin: auto;
}
2
  • Gracias por el punto y coma. Me lo comí de lleno. Commented el 23 ene. 2021 a las 21:40
  • Para eso estamos Commented el 24 ene. 2021 a las 23:11

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.