0

El selector nav no muestra el color del background que quiero.

Estuve inspeccionando y dice que tiene 0px de height, y no entiendo por qué.

Captura de pagina

/* Aqui comienza el codigo CSS*/

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#contenedor_principal {
  width: 1200px;
  border: 1px solid #ccc;
  margin: 0px auto;
  margin-top: 20px;
}

#header {
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: rgb(0, 131, 174);
  color: white;
  line-height: 90px;
}


/*! REVISAR ALGO LE PASA */

nav {
  background-color: #00ECFF;
}

#menu ul li {
  display: block;
  float: left;
  margin: 5px;
  padding: 15px;
  line-height: 2px;
  border-right: 1px solid #ccc;
}

.clearfix {
  float: none;
  clear: both;
}

#menu ul li a {
  color: #444;
}

#menu ul li:hover {
  background-color: blue;
}

#menu ul li:hover a {
  color: white;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>Ejercicio de CSS</title>
</head>

<!-- Body -->

<body>
  <div id="contenedor_principal">
    <!-- Header -->
    <header id="header">
      <h1>Ejercicio de CSS</h1>
    </header>

    <!-- Menu de navegacion -->
    <nav id="menu">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Articulos</a></li>
        <li><a href="#">Categorias</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>

    <!-- Contenido principal -->
    <main id="Principal">
      <section>
        <div class="clearfix">

        </div>
        <div>
          <h2>Noticias de ultima hora</h2>
          <p>Texto de prueba</p>
        </div>
      </section>

      <aside>
      </aside>
    </main>

    <!-- Pie de pagina -->
    <footer>
      <p>Todos los derechos reservados &copy;</p>
    </footer>
  </div>
</body>

</html>

0

1 respuesta 1

1

El problema es el float que estas utilizando en la lista, ya que esta propiedad remueve el elemento del flujo normal como se menciona a continuación en propiedad float, o en otras palabras "se queda flotando".

Lo que yo sugeriria es que cambies la propiedad display a inline-block para que estos se alineen de forma horizontal y remueve la propiedad float: left, de tu lista para que deje de hacer lo antes mencionado.

Quedaria de la siguiente forma:

/* Aqui comienza el codigo CSS*/

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#contenedor_principal {
  width: 1200px;
  border: 1px solid #ccc;
  margin: 0px auto;
  margin-top: 20px;
}

#header {
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: rgb(0, 131, 174);
  color: white;
  line-height: 90px;
}

nav {
  background-color: #00ECFF;
}

#menu ul li {
  /* ------- Aquí hacemos la modificación ------ */
  display: inline-block;
  margin: 5px;
  padding: 15px;
  line-height: 2px;
  border-right: 1px solid #ccc;
}

.clearfix {
  float: none;
  clear: both;
}

#menu ul li a {
  color: #444;
}

#menu ul li:hover {
  background-color: blue;
}

#menu ul li:hover a {
  color: white;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>Ejercicio de CSS</title>
</head>

<!-- Body -->

<body>
  <div id="contenedor_principal">
    <!-- Header -->
    <header id="header">
      <h1>Ejercicio de CSS</h1>
    </header>

    <!-- Menu de navegacion -->
    <nav id="menu">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Articulos</a></li>
        <li><a href="#">Categorias</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>

    <!-- Contenido principal -->
    <main id="Principal">
      <section>
        <div class="clearfix">

        </div>
        <div>
          <h2>Noticias de ultima hora</h2>
          <p>Texto de prueba</p>
        </div>
      </section>

      <aside>
      </aside>
    </main>

    <!-- Pie de pagina -->
    <footer>
      <p>Todos los derechos reservados &copy;</p>
    </footer>
  </div>
</body>

</html>

1
  • Muchas Gracias, entendi perfectamente. Tendre cuidado con la propiedad float a partir de ahora. Saludos :) el 14 nov. a las 14:18

Tu Respuesta

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

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