0

Estoy realizando un menú horizontal para mi página, pero al reducir el tamaño de la pantalla para hacer que la página sea responsive, per el menú no se hace más pequeño, sino que se amontonan unos con otros. He probado algunas cosas pero ninguna ha dado resultado.

He buscado información en varios sitios pero sigo sin comprender que he hecho mal, os adjunto el código original. Cualquier ayuda es bienvenida.

He añadido lo que he realizado en otros intentos y no funcionaba

<html>
  <style>   
    .menuhorizontal{
      width: 100%;
      margin: 0px auto;
      background-color: ;
      text-align: center;
    }
    .menuhorizontal ul {
      list-style-type: none;
      display: inline-block;
    }

    .menuhorizontal ul li {
      float: left;
      margin-top: 10px;
      font-size: 1.5em;
      padding: 2px;
      margin: 3px;
      border: 1px solid black;
     }
    .menuhorizontal li {
      font-size: 1.5em;
      padding: 2px;
      margin: 3px;
      border: 2px solid black;
      border-radius: 10px;
      background-color: white;
    }
    a {
      padding: 5px;
      font-family: "Times New Roman", Times;
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: blue;
    }
    li:hover {
      background-color: none;
    }
    .active {
      font-weight: bold;
      color: Black;
    }

    @media screen and (max-width: 100px) {
      .menuhorizontal {
         width: 25%;
       }
     }

  </style>
  <body>
    <div class="menuhorizontal">
      <ul>
        <li>
          <a href="index.html" class="active">Inicio</a>
        </li>
        <li>
          <a href="1.html">Quienes Somos</a>
        </li>
        <li>
          <a href="2.html">Nuestras Actvidades</a>
        </li>
        <li>
          <a href="">Contacto</a>
        </li>
      </ul>
    </div>
  </body>
</html>

10
  • Uso de media querys en CSS. developer.mozilla.org/es/docs/CSS/Media_queries
    – Excorpion
    Commented el 14 dic. 2020 a las 16:42
  • Lo que haces, es sobre-escribir estilos, dependiendo del tamaño de la pantalla, generalmente su ancho.
    – Excorpion
    Commented el 14 dic. 2020 a las 16:42
  • ¿Y qué distribución deben de tener y a qué tamaño de pantalla?
    – user128299
    Commented el 14 dic. 2020 a las 17:11
  • Hay un par de templates para tamaños de pantalla, pero el resto se los das tu a tu comodidad
    – Excorpion
    Commented el 14 dic. 2020 a las 17:27
  • @BetaM pues lo que busco es que se queden horizontalmente pero reduzcan en tamaño
    – Fst0
    Commented el 14 dic. 2020 a las 17:30

1 respuesta 1

0

Una buena idea para visualizar los cambios que haces
es añadir color a los contenedores, en este caso al menu.
Luego, dentro de cada media query, debes ir estilizando la pagina web.

.menuhorizontal{
      width: 100%;
      margin: 0px auto;
      background-color: ;
      text-align: center;
    }
    .menuhorizontal ul {
      list-style-type: none;
      display: inline-block;
    }

    .menuhorizontal ul li {
      float: left;
      margin-top: 10px;
      font-size: 1.5em;
      padding: 2px;
      margin: 3px;
      border: 1px solid black;
     }
    .menuhorizontal li {
      font-size: 1.5em;
      padding: 2px;
      margin: 3px;
      border: 2px solid black;
      border-radius: 10px;
      background-color: white;
    }
    a {
      padding: 5px;
      font-family: "Times New Roman", Times;
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: blue;
    }
    li:hover {
      background-color: none;
    }
    .active {
      font-weight: bold;
      color: Black;
    }
    
     
     @media screen and (max-width: 1000px) {
      .menuhorizontal {
         width: 50%;
         background-color: blue;
       }
     }

    @media screen and (max-width: 500px) {
      .menuhorizontal {
         width: 25%;
         background-color: red;
       }
     }
<html>
  <body>
    <div class="menuhorizontal">
      <ul>
        <li>
          <a href="index.html" class="active">Inicio</a>
        </li>
        <li>
          <a href="1.html">Quienes Somos</a>
        </li>
        <li>
          <a href="2.html">Nuestras Actvidades</a>
        </li>
        <li>
          <a href="">Contacto</a>
        </li>
      </ul>
    </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.