1

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

/* ------- */

/* 1.0 - Menu de navegación */

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

#menu li{
  float: left;
  width: 20%;
}
#menu li:first-child a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  display: block;
  padding: 16px 16px 16px 16px;
  text-align:center;
  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>

Si se dan cuenta, la palabra computación solo queda en "computacio", ¿Cuál es el error? , estoy aprendiendo css3 hace poco y voy aprendiendo, pero coloqué el texto de los <a> (que están dentro de los <li> ), con display:block(para que se comporte como un bloque) y con el texto centrado, entonces ¿Por qué tampoco se ve?

1
  • 1
    Es porque le estás dando un ancho al elemento li. Una opción es eliminar width: 20%; del estilo : #menu li{} el 4 sep. 2017 a las 16:59

3 respuestas 3

1

Leyendo por los comentarios, veo que quieres que el menú ocupe el 100% de la pantalla.

Para ello, puedes agregarle al menú la propiedad width: 100% para que ocupe el 100% del ancho de la pantalla.

Después, para que no se corten los textos si son más largos deberías de usar min-width en vez de width. De esta manera, como mínimo, cada celda ocupará el 20% del total pero, en caso de que el texto necesite más espacio, esa celda tomará el espacio correspondiente (solo le indicas el espacio mínimo que tomará cada celda, pero no el máximo para que se pueda expandir como corresponda).

Tu ejemplo modificado:

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

/* ------- */

/* 1.0 - Menu de navegación */

#menu{
  width: 100%;
  list-style-type:none;
  margin:0;
  padding:0;
  top:0;
  position: fixed;
}

#menu li{
  float: left;
  min-width: 20%;
}
#menu li:first-child a{
  background-color:gray;
}
#menu li a{
  background-color: black;
  color: white;
  display: block;
  padding: 16px 16px 16px 16px;
  text-align:center;
  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>

1
  • Perfecto, muchas gracias
    – ESCM
    el 4 sep. 2017 a las 20:14
1

Simplemente cambia la propiedad width: 20%; en tu #menu li{} por width: auto;

body {
  background-color: #000000;
}

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

#menu li {
  float: left;
  width: auto;
}

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

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

#menu li a:hover {
  background-color: gray;
}
href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" type="text/css">
<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
  • no me sirve, ya que necesito usar el 100% de la ventana con los li
    – ESCM
    el 4 sep. 2017 a las 19:11
0

el problema es que le estás dando un ancho fijo, si queres que se adapte al contenido usa display: inline-block, sin widh; sino with: auto

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.