Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Crear menú de navegación que ocupe toda la pantalla

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

Volver
Nuevo Tema
<<>>
 
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
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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
Val: 10
Ha aumentado su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

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
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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

Publicado por ScriptShow (125 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

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

Publicado por Alex (1 intervención) el 02/05/2019 23:52:19
Y para que los elementos li se queden centrados, ¿sería posible? ahora siempre quedan en la parte izquierda de la pantalla. Gracias.
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
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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

Publicado por ScriptShow (125 intervenciones) el 04/05/2019 13:01:39
Saludos,

veamos una opción posible:

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
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
padding: 0;
font-family: Orbitron, Sans-serif;
}
.nav {
overflow: hidden;
text-align: center;
background-color: #000000;

}
.nav a {
color: #FFFFFF;

padding: 20px 20px;
display: inline-block;
text-decoration: none;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.nav a:hover {
color: #FFFFFF;

background-color: #BBBBBB;

}
@media screen and (max-width: 600px) {
.nav a {
float: none;
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<div id="header"></div>
<div class="nav">
<a href="#">INICIO</a>
<a href="Integrantes.html">INTEGRANTES</a>
<a href="Media.html">MEDIA</a>
<a href="Blog.html">BLOG</a>
<a href="Foro.html">FORO</a>
</div>
</body>
</html>

No mezcles el "header" y su contenido con el "nav" Menú.

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

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

Publicado por taekwa (1 intervención) el 26/01/2023 05:12:13
tengo el mismo problema me podrian ayudar?


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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* menu */
 
#menu ul {
 list-style:none;
 margin:0;
 padding:0;
}
 
/* items del menu */
 
#menu ul li {
 background-color:#2e518b;
 }
 
/* enlaces del menu */
 
#menu ul a {
 display:block;
 color:#fff;
 text-decoration:none;
 font-weight:400;
 font-size:15px;
 padding:10px;
 font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-transform:uppercase;
 letter-spacing:1px;
}
 
/* items del menu */
 
#menu ul li {
 position:relative;
 float:left;
 margin:0;
 padding:0;
 height: 100%;
}
 
/* efecto al pasar el ratón por los items del menu */
 
#menu ul li:hover {
 background:#5b78a7;
}
/* menu desplegable */
 
#menu ul ul {
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#eee;
 padding:0;
}
 
/* items del menu desplegable */
 
#menu ul ul li {
 float:none;
 width:150px
}
 
/* enlaces de los items del menu desplegable */
 
#menu ul ul a {
 line-height:120%;
 padding:10px 15px;
}
 
/* items del menu desplegable al pasar el ratón */
 
#menu ul li:hover > ul {
 display:block;
}
.group {
	border: 3px solid #999999;
	padding: 20px;
	width: 1200px;
	color: #006;
border-radius: 8px;
border-color:#036;
 
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(209,238,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(209,238,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,238,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,238,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(209,238,255,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(209,238,255,1) 100%); /* W3C */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1eeff',GradientType=0 ); /* IE6-9 */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
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 Ivan

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

Publicado por Ivan (45 intervenciones) el 26/01/2023 12:47:57
Hola,

un menú consta de 3 partes:

- El contenedor <nav>, <ul>, <div> suelen ser las opciones más frecuentes, establecen su posicionamiento general en la página.
- Los elementos "cajas" del menú <li> suele ser lo habitual, establecen su alineamiento dentro del contenedor horizontal, vertical, float, etc.
- Lo enlaces <a> que establecen el estilo visual del enlace.

Puedes mirar algunos artículos que tengo publicados en mi blog donde explico de manera extensa diversos tipos de menús.

https://fashehlabs.com/css/menu-horizontal-o-vertical-responsive-multinivel/

Un saludo!
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

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

Publicado por JuanDRSoft (4 intervenciones) el 17/02/2023 17:31:33
hola, estoy trabajando en css y html en mis videos para youtube por si te interesa, saludos

https://youtu.be/wGWYKFgJXf4
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