CSS - Crear menú de navegación que ocupe toda la pantalla

   
Vista:
Imágen de perfil de ermitoba

Crear menú de navegación que ocupe toda la pantalla

Publicado por ermitoba (4 intervenciones) el 01/09/2017 16:51:50
Llevo 1 hora buscando la manera de hacerlo pero no me sale.
Captura
Una vez vista la foto, me gustaría preguntar ¿qué tengo que hacer para que dicho menú (lo que tiene un fondo en negro) me ocupe el 100%. De izquierda a derecha, sin margenes.
Código HTML:
1
2
3
4
5
6
7
8
9
<div id="header">
<ul class="nav">
<li><a href="#">INICIO</a></li>
<li><a href="Integrantes.html">INTEGRANTES</a></li>
<li><a href="Media.html">MEDIA</a></li>
<li><a href="Blog.html">BLOG</a></li>
<li><a href="Foro.html">FORO</a></li>
</ul>
</div>


CÓDIGO CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#header{
margin: auto;
width: 100%;
font-family: Orbitron;
}
ul{
list-style: none;
}
.nav li a{
background-color: black;
color: white;
text-decoration: none;
padding: 20px 20px;
display:block;
}
.nav li a:hover{
background-color:#BBBBBB; 
}
.nav > li{
float: left;
}
Espero que me puedan ayudar, Gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique

Crear menú de navegación que ocupe toda la pantalla

Publicado por Enrique (43 intervenciones) el 01/09/2017 17:52:39
creo que te falta esto en la etiqueta ul
1
2
3
4
5
6
7
8
ul{
list-style: none;
width: 100%;
}
.nav > li{
float: left;
width: 20%;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip

Crear menú de navegación que ocupe toda la pantalla

Publicado por kip (3 intervenciones) el 01/09/2017 18:13:33
Modifica tu CSS a este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#header {
    width: 100%;
    font-family: Orbitron;
    display: table;
    background-color: #000;
}
ul {
    list-style: none;
}
.nav li {
    display: table-cell;
}
.nav li a {
    color: white;
    text-decoration: none;
    padding: 20px 20px;
}
.nav li a:hover{
    background-color:#BBBBBB; 
}

De esa forma tendras un nav header adecuado.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

Crear menú de navegación que ocupe toda la pantalla

Publicado por ScriptShow (48 intervenciones) el 02/09/2017 03:54:42
Saludos,

Veamos un ejemplo responsive:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
* {
margin: 0;
padding: 0;
font-family: Orbitron, Sans-serif;
-webkit-transition: all .8s;
transition: all .8s;
}
.nav {
color: #FFFFFF;
overflow: hidden;
list-style-type: none;
background-color: #000000;
}
.nav li {
float: left;
}
.nav li a {
color: #FFFFFF;
display: block;
padding: 20px 20px;
text-align: center;
text-decoration: none;
}
.nav li a:hover {
background-color:#BBBBBB;
}
@media screen and (max-width: 600px){
.nav li {float: none;}
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">INICIO</a></li>
<li><a href="Integrantes.html">INTEGRANTES</a></li>
<li><a href="Media.html">MEDIA</a></li>
<li><a href="Blog.html">BLOG</a></li>
<li><a href="Foro.html">FORO</a></li>
</ul>
</body>
</html>

Reduce el tamaño de la ventana para ver el efecto responsive.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad