Skip to main content
se eliminó 1 carácter en el cuerpo; etiquetas editadas
Origen Enlace
Dev. Joel
  • 23.9k
  • 3
  • 30
  • 47

/* 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", cual 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 porqué tampoco se ve? 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?

/* 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", cual 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 porqué tampoco se ve?

/* 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?

Origen Enlace
ESCM
  • 5.1k
  • 9
  • 43
  • 84

Palabras muy extensas quedan fuera del li

/* 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", cual 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 porqué tampoco se ve?