1

buenos días, tengo una barra de vacacional dentro de un DIV, lo que necesito es que la barra abarque el ancho de la pantalla, pero no sale del DIV donde esta, lo hice con unos H1 y H2 y si funciono pero no con la NAV, les paso el código.

La barra tiene que estar dentro de el DIV Agrupar en todo momento.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="agrupar.css" >
    </head>

    <body>
        <div id="agrupar">
            <nav>
                <ul>
                    <li><a>PRINCIPAL</a></li>
                    <li><a>FOTOS</a></li>
                    <li><a>VIDEOS</a></li>
                    <li><a>CONTACTO</a></li>
                    <li><a>ACORTADOR</a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>
#agrupar {
    width:950px;
    margin:-60px auto;
}


nav {
    overflow:hidden;
    background:#e24f62;
    padding:10px;
    border-top:3px solid #9b111e;
    border-bottom:3px solid #9b111e;    
    content:" ";
    list-style:none;
    width:100%;
}

De antemano, muchas gracias.

8
  • Hola @Vagabundo05, ¿quisiste decir "...pero no sale del DIV donde esta..." o por el contrario, deseas que salga del DIV? el 22 mar. 2020 a las 19:38
  • No se entiende la duda amigo trata de ser más claro
    – user128299
    el 22 mar. 2020 a las 19:59
  • Esta dentro del DIV, pero quiero que se desborde o salga de el. el 22 mar. 2020 a las 20:03
  • @Vagabundo05, Voy a modificar algo la respuesta en función de lo que has comentado, pero agrégalo a tu pregunta para que se entienda mejor. Creo que quisiste decir que se saliera del elemento nav la lista desordenada, ¿cierto? el 22 mar. 2020 a las 20:06
  • No tiene sentido, si deseas que lo supere o desborde no es mejor quitar ese contenedor? Y así que el nav que es bloque tome su ancho natural?
    – user128299
    el 22 mar. 2020 a las 20:13

1 respuesta 1

1

IMPORTANTE: Lea los comentarios puestos en el código de esta publicación.

La mejor forma de lograr que cubra todo el ancho disponible es que no se defina su anchura, ya que como el elemento nav es un elemento de bloque lo hace de forma natural.

Partiendo del siguiente fragmento:

nav {
  overflow: hidden;
  background: #e24f62;
  padding: 10px;
  border-top: 3px solid #9b111e;
  border-bottom: 3px solid #9b111e;

  /* Esta propiedad solamente tiene sentido en los
     pseudos elemento «::before» y «::after» */
  content: " ";

  /* Esta propiedad no tiene sentido acá, ya que el elemento
     «nav» no es una lista desordenada: */
  list-style: none;

  /* Debes eliminar esta propiedad, no es necesaria. El
     elemento «nav» es un elemento de bloque, por lo tanto,
     cubre todo el ancho de la pantalla de forma natural */
  width: 100%;
}

Recomendación

Para lograr el efecto deseado debes realizar el siguiente cambio:

  • Eliminar la propiedad content de la regla nav {} ya que el elemento no es un elemento de bloque.

  • Eliminar width: 100%, ya que no es necesaria, dado que es un elemento de bloque y los elementos de bloque cubren todo el ancho disponible.

Por lo tanto, se podrían realizar los siguientes cambios:

nav {
  overflow: hidden;
  background: #e24f62;
  padding: 10px;
  border-top: 3px solid #9b111e;
  border-bottom: 3px solid #9b111e;
  color: white;
}

Y para eliminar las viñetas de las listas desordenadas podrías implementarlo así:

nav {
  list-style: none;
}


Reproducción de ejemplo

Entendiendo lo anteriormente expuesto podemos observar el ejemplo que se reproduce a continuación:

body,
html {
  padding: 0;
  margin: 0;
  
}

/* Cambios sin las propiedades
   «content», «width» y «list-style».*/
nav {
  overflow: hidden;
  background: #e24f62;
  padding: 10px;
  border-top: 3px solid #9b111e;
  border-bottom: 3px solid #9b111e;
  color: white;
}

ul {
  /* Quitar la viñeta a la lista desordenada */
  list-style: none;
}
<div id="agrupar">
  <nav>
    <ul>
      <li><a>PRINCIPAL</a></li>
      <li><a>FOTOS</a></li>
      <li><a>VIDEOS</a></li>
      <li><a>CONTACTO</a></li>
      <li><a>ACORTADOR</a></li>
    </ul>
  </nav>
</div>

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.