0

Tengo una lista de navegacion en la cual quiero que el color de fondo ocupe mas lugar pero no lo logro. Intente utilizar witdh en .clase1 .clase2 .clase3 y tambien en nav pero no logro que el fondo se agrande y ocupe mas lugar. Necesito que el fondo empieze desde el principio del lado izquierdo de la pagina y termine en la section que se ubica a la derecha de la lista de navegacion

Mi codigo html es el siguente:

header{
    background-color:#900c37;
        border-radius: 20px 0px 20px 0px;
    padding: 2px;
    width: 98%;
    margin: 0;
}

.menu {
       position: fixed;
       top: 10;
       margin-left: 10px;
}

ol li{
    display:table;
    margin:0px auto 0px auto;
    padding: 1px
    
}

section {
        margin-left: 200px;
      }



h1 {
    color: white;
    text-align:center;
}

.clase1{
  background-image: linear-gradient(to right, rgba(255,186,3,0), rgba(252, 186, 3, 1));
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}
  
.clase2{
  background-image: linear-gradient(to right, rgba(209,64,36,0), rgba(209, 64, 36, 1));
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}

.clase3{
  background-image: linear-gradient(to right, rgba(156,9,26,0), rgba(156, 9, 26, 1));
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}

img{
        
        display: block;'
        width: 130px;
        height: 40px;
}
<!DOCTYPE html>

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Ejericio 1</title>
        <link rel="stylesheet" href="css/css.css">
        <script src="js/js.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    
    <body>
        <header>
        <h1>Gestion de Series</h1>
        </header>
        <nav class="menu"><ol>
              <li><a href ="#Series" class="clase1"> Series</a></li>
              <li><a href ="#Opiniones" class="clase2"> Opiniones</a></li>
              <li><a href ="#Estadistica" class="clase3"> Estadisticas</a></li>
              </ol>
        </nav>
        
        <section>
           <article class="manejo-de-series">
              <h2 id="Series">Manejo de Series</h2>
              <p>
              Nombre
              <br>
              <input type="text" name="texto" placeholder="Nombre">
              <br>
              Descripcion
              <br>
              <input type="text" name="texto" placeholder="Descripcion">
              <br>
              Cantidad de temporadas
              <br>
              <input type="text" name="texto">
              <br>
              Capitulos por temporada
              <br>
              <input type="text" name="texto">
              </p>
              <p>
              <button type="button"> Agregar/Actualizar </button>
              <button type="button"> Reset </button>
              <button type="button"> Previo </button>
              <button type="button"> Siguiente </button>
              </p>
              <p>
              <a href="https://www.imdb.com/" target="_blank">  <img src="imagenes/IMDb.png" alt="IMDb"> </a>
              </p>
           </article>
           </section>

Agradezco ayuda para poder solucionar mi problema. Gracias

1 respuesta 1

1

1.- Lo que yo te recomendaría es que agregues un div que envuelva a estos dos elementos nav y section para que puedas manipularlos de una manera mas fácil, quedando tu estructura de la siguiente manera:

<div class="container-nav">
        <nav class="menu">
         
        </nav>
        
        <section>
          
        </section>
  </div>

2.- Nota que hemos agregado un div con la clase container-nav, este envuelve a tu nav y a tu section

3.- Una vez hecho lo anterior, le damos un display flex a tu container-nav ahora es una caja flexible y los elementos que hay dentro podemos manipularlos con mas facilidad, estos son algunos estilos que le hemos dado a este div:

.container-nav {
  display: flex;
  width: 90%;
  max-width: 550px;
  justify-content: space-between;
}

4.- Ahora vamos con el elemento que tiene la clase menu, de primera mano le quitamos la propiedad position: fixed; y se la cambiamos por position: relative; y yo le quitaria el margen superior e izquierdo tambien. Quedando tus estilos de la siguiente manera:

.menu {
  position: relative;
  flex: auto;
}

5.- Ahora vamos con los estilos de tu li de primera mano yo le quitaria el display: table; y los margenes que has agregado, quedando tus estilos de esta manera:

ol li {
  padding: 1px;
  list-style: none;
}

6.- Ahora vamos con tu section, de igual forma quitamos los margenes que has agregado quedando tus estilos de la siguiente manera:

section {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
}

7.- Ahora vamos con la parte responsive de este menu, y aqui la importancia de utilizar flex-box lo unico que vamos a hacer es que cuando la pantalla sea pequeña, vamos a cambiarle la direccion a nuestro container-nav quedando los estilos de la siguiente manera:

@media (max-width: 500px) {
  .container-nav {
    flex-direction: column;
  }
}

8.- TE DEJO UNA GUIA PARA QUE PUEDAS COMPRENDER LAS PROPIEDADES DE FLEX-BOX QUE UTILIZAMOS EN ESTE EJERCICIO

Conceptos Básicos de flexbox

Usando las cajas flexibles CSS

9.- Te dejo un ejemplo de como quedaría tu menu aplicando lo anterior.

header {
  background-color: #900c37;
  border-radius: 20px 0px 20px 0px;
  padding: 2px;
  width: 98%;
  margin: 0;
}

.container-nav {
  background: #000;
  display: flex;
  width: 98%;
  max-width: 550px;
  justify-content: space-between;
}

.menu {
  background: coral;
  position: relative;
  flex: auto;
}

ol li {
  padding: 1px;
  list-style: none;
}

section {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
}

h1 {
  color: white;
  text-align: center;
}

.clase1 {
  background-image: linear-gradient(
    to right,
    rgba(255, 186, 3, 0),
    rgba(252, 186, 3, 1)
  );
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}

.clase2 {
  background-image: linear-gradient(
    to right,
    rgba(209, 64, 36, 0),
    rgba(209, 64, 36, 1)
  );
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}

.clase3 {
  background-image: linear-gradient(
    to right,
    rgba(156, 9, 26, 0),
    rgba(156, 9, 26, 1)
  );
  text-decoration: none;
  color: #000000;
  border-radius: 20px 0px 20px 0px;
}

img {
  display: block;
  width: 130px;
  height: 40px;
}

@media (max-width: 500px) {
  .container-nav {
    flex-direction: column;
  }
}
<header>
        <h1>Gestion de Series</h1>
        </header>
        <div class="container-nav">
        <nav class="menu">
          <ol>
              <li><a href ="#Series" class="clase1"> Series</a></li>
              <li><a href ="#Opiniones" class="clase2"> Opiniones</a></li>
              <li><a href ="#Estadistica" class="clase3"> Estadisticas</a></li>
              </ol>
        </nav>
        
        <section>
           <article class="manejo-de-series">
              <h2 id="Series">Manejo de Series</h2>
              <p>
              Nombre
              <br>
              <input type="text" name="texto" placeholder="Nombre">
              <br>
              Descripcion
              <br>
              <input type="text" name="texto" placeholder="Descripcion">
              <br>
              Cantidad de temporadas
              <br>
              <input type="text" name="texto">
              <br>
              Capitulos por temporada
              <br>
              <input type="text" name="texto">
              </p>
              <p>
              <button type="button"> Agregar/Actualizar </button>
              <button type="button"> Reset </button>
              <button type="button"> Previo </button>
              <button type="button"> Siguiente </button>
              </p>
              <p>
              <a href="https://www.imdb.com/" target="_blank">  <img src="imagenes/IMDb.png" alt="IMDb"> </a>
              </p>
           </article>
           </section>
          </div>
           </header>

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.