1

estoy teniendo problemas con un ejercicio de la universidad.

Estoy intentando hacer una barra superior para mi página web:

introducir la descripción de la imagen aquí

pero me queda así:

introducir la descripción de la imagen aquí

Si intento centrarlo usando widht no me queda igual ya que me ocupan una proporcion pero no dejando espacio en la izquierda y derecha.

introducir la descripción de la imagen aquí

Como puedo hacer para reducir el espacio de la derecha de cada uno?

os pongo mi css:

*{margin:0;padding:0;box-sizing:border-box;font-size:10;}

#navSup a{
    text-decoration:none;
    color:inherit;
    font-size:14px;
} 

#navSup li{
    display:inline-block;
    background-color:#000;
    text-align:center;
    color:#fff;
    width: 20%; 
}


#navSup li:hover{
    background-color:#fff;
    color:#000;
}

#navSup li{
    float:left;
    padding:10px;
    background-color:#000;
    text-align:center;
    color:#fff;
    margin: auto;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Indice página web</title>
        <meta name="description" content="Ejercicio PEC2 Lenguajes y estandares web" />
        <link href="css/estilos.css" rel="stylesheet" type="text/css" />
    </head>


    <body>

            

        <nav><ul id=navSup>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Diseño Gráfico</a></li>
            <li><a href="#">Sobre mí</a></li>
            <li><a href="#">Herramientas Color</a></li>
            <li><a href="#">Contactar</a></li>
            </ul></nav>
            

        <div class="container">

            <div class="container3">

                <!--Este es el contenedor con los elementos de sección, en donde debes incluir el texto que has de marcar   -->  
      

            </div>

        </div> 


        <div class="container2">
            <!-- Aquí introducimos el contenido principal de nuestra página -->
            <main>



            </main>

            <!-- aqui está nuestro pie de página -->

            <footer>

     

            </footer>
        </div>




    </body>
</html>

Necesito que quede como la primera imagen y no consigo que los espacios funcionen. Sé que me falta algo reelacionado con los margenes pero no acabo de conseguirlo... :(

Muchas gracias!

2 respuestas 2

1

Comentarios:

  • Yo colocaría el menú nav dentro de una etiqueta mas (por ejemplo un section)
    • Lo anterior para que cuando le damos el ancho a este última (al section), podamos internamente re ajustar al contenedor de los elementos de navegación de manera independiente
  • En lugar de usar un inline-block yo me apoyaría de flexbox
    • Para que con esto le podamos indicar al menú que en el eje horizontal mueva los elementos colocando un espacio al rededor de ellos
  • Le damos un ancho menor del 100% al menú
    • El ancho menor del 100% en razón de la etiqueta donde incrustemos al menú
  • Para poder centrar al menú nos apoyamos de un margin: 0 auto;

Con lo propuesta anterior se estará logrando:

  • Tener al menú incrustado en otra etiqueta que de ancho ocupe el 100% del body
  • Poder modificar el ancho del menú (etiqueta nav sin que esto comprometa el ancho de la etiqueta padre)

Propuesta:

    <style>
      * {
        color: white;
        margin: 0;
        padding: 0;
      }
      .contenedor {
        background-color: black;
      }
      .contenedor-menu {
        display: flex;
        justify-content: space-around;
        width: 50%;
        margin: 0 auto;
      }
      .contenedor-menu__elemento {
        list-style: none;
      }
    </style>
    <section class="contenedor">
      <nav class="contenedor-menu">
        <li class="contenedor-menu__elemento">
          1
        </li>
        <li class="contenedor-menu__elemento">
          2
        </li>
        <li class="contenedor-menu__elemento">
          3
        </li>
      </nav>
    </section>

Referencias

0

Yo igual recomendaría usar flexbox en lugar de float, este último está quedando en desuso, aunque igual te funciona con float.

Yo limitaria el ancho de tu contenedor UL al deseado, colocaria un 100% al nav, lógicamente como estás flotando los li, no ocupan espacio en tu contenedor, por lo que nav y ul como tal, no se visualizan en el dom, esto lo puedes solucionar con un overflow: hidden;

Esta sería una salida rápida a tu proyecto, lógicamente tienes que prepararte para defender el proyecto, que es preferible, documentarse es lo mejor si quiere hacer las cosas bien.

*{margin:0;padding:0;box-sizing:border-box;font-size:10px;}

nav {
  width: 100%;
  overflow: hidden; /*expando contenedor a alto del contenido flotante */
  background-color:#000;
}
#navSup {
  width: 100%;
  max-width: 1000px; /* limito el ancho de ul */
  margin: auto; /* centro ul */ 
}
#navSup a{
    text-decoration:none;
    color:inherit;
    font-size:14px;
}

#navSup li{
    display:inline-block;
    background-color:#000;
    text-align:center;
    color:#fff;
    width: 20%; 
}

#navSup li:hover{
    background-color:#fff;
    color:#000;
}

#navSup li{
    float:left;
    padding:10px;
    background-color:#000;
    text-align:center;
    color:#fff;
    margin: auto;
}
<nav><ul id=navSup>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Diseño Gráfico</a></li>
            <li><a href="#">Sobre mí</a></li>
            <li><a href="#">Herramientas Color</a></li>
            <li><a href="#">Contactar</a></li>
            </ul>
            </nav>
            

        <div class="container">

            <div class="container3">

                <!--Este es el contenedor con los elementos de sección, en donde debes incluir el texto que has de marcar   -->  
      

            </div>

        </div> 


        <div class="container2">
            <!-- Aquí introducimos el contenido principal de nuestra página -->
            <main>



            </main>

            <!-- aqui está nuestro pie de página -->

            <footer>

     

            </footer>
        </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.