0

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li{
  float: left;
}
#menu li:first-child > a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li a:hover{
  background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="home.html">Inicio</a></li>
    <li><a href="maths.html">Matemáticas</a></li>
    <li><a href="physics.html">Física</a></li>
    <li><a href="computacion.html">Computación</a></li>
    <li><a href="others.html">Otros</a></li>
  </ul>
</body>
</html>

Como podría hacer para que el tamaño horizontal del menú sea del tamaño del body, osea adaptable a cualquier ventana. Solo con css

4
  • ¿usas bootstrap o algun framework?, de esamanera es muy sencillo adaptar tu navbar menu al espacio completo de la pantalla, es mas puedes mantenerlo si haces un scroll. el 4 sep. 2017 a las 16:37
  • Uso normalize css, pero no funciona
    – ESCM
    el 4 sep. 2017 a las 16:38
  • Intenté con 100% de width y 100vw de width, pero nada
    – ESCM
    el 4 sep. 2017 a las 16:39
  • Te recomiendo descargar Bootstrap que trae ya creado ciertos navbar menú y es muy complejo en cuanto a creación de vistas: getbootstrap.com si lo descargas avísame por ayuda y te indico como dejarlo al 100% el 4 sep. 2017 a las 16:40

3 respuestas 3

2

Puedes usar calc() para que te calcule la anchura del elemento li on the fly:

#menu li {
  float: left;  
  text-align: center;
  width: calc(100% / 5); /* Cantidad de elementos li */
}

body{  
  background-color: #000000;
}

#menu li {
  float: left;  
  text-align: center;
  width: calc(100% / 5); /* Cantidad de elementos li */
}

#menu {
  list-style-type:none;
  margin:0;
  padding:0; 
}

#menu li:first-child > a{
  background-color:gray;
}

#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}

#menu li a:hover{
  background-color:gray;
}
<ul id="menu">
  <li><a href="home.html">Inicio</a></li>
  <li><a href="maths.html">Matemáticas</a></li>
  <li><a href="physics.html">Física</a></li>
  <li><a href="computacion.html">Computación</a></li>
  <li><a href="others.html">Otros</a></li>
</ul>

1

/* General */
body{
  background-color: #000000;
}

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  list-style-type:none;
  margin:0;
  padding:0;
  text-align: center;
}
#menu li{
  float: left;
  width: 20%;
}
#menu li:first-child > a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  padding: 16px 16px 16px 16px;
  display:block;
  font-family: monospace;
  text-decoration:none;
  border-bottom: 2px solid white;
}
#menu li a:hover{
  background-color:gray;
}
/* ------------------------- */
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Astro cosmos</title>
  <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
  </head>
<body>
  <ul id="menu">
    <li><a href="home.html">Inicio</a></li>
    <li><a href="maths.html">Matemáticas</a></li>
    <li><a href="physics.html">Física</a></li>
    <li><a href="computacion.html">Computación</a></li>
    <li><a href="others.html">Otros</a></li>
  </ul>
</body>
</html>

Espero que te sirva si es lo que buscas.

3
  • Dividiste solo el 100/5 cada li, no??
    – ESCM
    el 4 sep. 2017 a las 16:49
  • sii le puse un width de 20% a tus li, si vas agregar mas li, pues ya tienes que jugar con el porcentaje del ancho, cualquier duda me cuentas.
    – zerokira
    el 4 sep. 2017 a las 16:56
  • @EduardoSebastian si crees que mi respuesta fue suficiente puedes aceptarla?
    – zerokira
    el 4 sep. 2017 a las 17:05
1
#menu {
    margin: 0;
    padding: 0;
    font-size: 0;
    list-style: none;
    background-color: #000000;
    height: 100vh;
    width: 100%; // YOU NEED IT IN YOUR CODE
}
#menu li {
    display: inline-block;
    font-size: 0;
    text-align: center;  
    height: 100vh;
    width: 20%; // AND IT TOO :)
}
#menu li a {
    text-decoration: none;
    display: inline-block;
    padding: 15px;
    font-size: 15px;
    color: #FFFFFF; 
    font-family: monospace;
    width:16vw;
}

https://jsfiddle.net/adivirgilio/5mzzayyq/4/

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.