Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problema centrando nav

CSS - Problema centrando nav

Volver
Nuevo Tema
<<>>
 
Vista:

Problema centrando nav

Publicado por Nahuel (1 intervención) el 13/06/2016 21:05:07
Por algun motivo mi nav no queda centrado con mi header. Este es mi codigo

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
<h1 align="center">
<img src= Imagenes\header.jpg>
</h1>
</div>
	<span class="fuente-1">
	<div class="inner">
	<nav>
	<ul>
	<li><a href=”A”>Inicio</a></li>
	<li><a href=”A”>Modelos</a></li>
	<li><a href=”A”>Redes</a></li>
	<li><a href="A">Contacto</a></li>
	</ul>
 
	</div>
	</nav>
 
 
<style type="text/css">
 
 
	body{
		background-color:#000000;

	}
 
	 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline-block;
 
	}
 
	li {
    float: left;
    padding: 0;
    margin: 0;
	text-align: center;
	}
 
	li a {
    display: block;
    color: #FFFFFF;

    text-align: center;
    padding: 0;
    margin: 0;
    text-decoration: none;
    width: 200px;
    /*height: 100%;*/
	}
 
 
	.header
	{
	margin: 0;
	padding-bottom: 50px;
	text-align: center;
	}
 
 
	.inner {
		width: 100%;
		/*max-width:960px;*/
		margin:0 auto;
		padding-bottom: 50px;
		font-size: 325%;
		text-align: center;
 
	}
 
 
	@font-face
	{
	font-family: "BebasNeue";
	src: url(Fuentes/BebasNeue.otf) format("opentype");
	}
 
	.fuente-1
	{
	font-family: "BebasNeue"
	}
 
 
 
</style>
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
sin imagen de perfil

Problema centrando nav

Publicado por CaroVL (6 intervenciones) el 13/06/2016 21:14:49
Hola

Puedes usar el margin-auto como se muestra en este ejemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#nav {

width:750px;
margin:0 auto;
list-style:none;
}
#nav li {

float:left;
}
#nav a {

display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}

o quiza tu css no se actualiza, lo que podrías hacer es eliminar el link de tu css para mandarlo llamar y volver a colocarlo, sin eliminar tu css de tu proyecto.

Saludos
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

Problema centrando nav

Publicado por Kayla G (3 intervenciones) el 16/06/2016 20:47:15
Hola!
Ten en cuenta qué tipo de posición estás utilizando! generalmente es eso!

Te dejo esta página para que puedas entender un poco mejor esto, está muy bien explicado para qué sirve cada una
http://www.desarrolloweb.com/articulos/atributo-position-css.html

También te dejo este ejemplo:

Primero creamos la estructura:
1
2
3
4
5
6
7
8
<nav>
        <ul>
            <li><a href="#">Sección</a></li>
            <li><a href="#">Otra sección</a></li>
            <li><a href="#">La tercera sección</a></li>
            <li><a href="#">Última sección</a></li>
        </ul>
</nav>

Después mediante CSS eliminamos los estilos de lista, y hacemos que los <li> floten a su izquierda:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
        nav{
            height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */
            margin: 0 auto; /* Centro el contenedor */
            overflow: hidden;
            text-align: left;
            width: 960px; /* Defino el ancho de mi página */
        }
        ul{
            float: left;
            list-style-type: none; /* Elimino los estilos de lista */
            padding: 0;
        }
        li{
            float: left; /* Floto los li para que se dispongan horizontalmente */
        }
        li a{
            padding: 10px; /* El padding añadirá separación entre los elementos */
        }
</style>

Cuando definimos la propiedad float del li a left, no sólo ajustamos la disposición a horizontal, sino que además los estamos alineando a la izquierda y al revés con float:right;. Si conocemos el ancho total de los li podríamos ajustar al centro mediante padding en el ul, pero en la mayoría de CMS, donde el número de elementos de un menú puede variar, esta solución obliga a cambiar el css cada vez que añadamos, modifiquemos o suprimamos elementos. ¿Cómo alineamos nuestro menú al centro si el ancho del mismo es variable? Tan fácil como añadir 4 líneas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
        ul{
            float: left;
            list-style-type: none;
            padding: 0;
            /* AÑADIMOS */
            position: relative;
            left: 50%;
        }
        li{
            float: left;
            /* AÑADIMOS */
            position: relative;
            right: 50%;
        }
</style>

Espero haberte ayudado! :)
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