Foros del Web » Creando para Internet » CSS »

Centrado vertical de Nav en Header

Estas en el tema de Centrado vertical de Nav en Header en el foro de CSS en Foros del Web. Hola a todos, soy el Nano y estoy un poco pez. Aquí va la duda. Quiero centrar el menú de navegación dentro del header. Adjunto ...
  #1 (permalink)  
Antiguo 30/11/2012, 03:18
 
Fecha de Ingreso: noviembre-2012
Mensajes: 3
Antigüedad: 7 años
Puntos: 0
Centrado vertical de Nav en Header

Hola a todos, soy el Nano y estoy un poco pez.
Aquí va la duda.
Quiero centrar el menú de navegación dentro del header. Adjunto HTML y CSS:
<div id="main">
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li><a href="#">film</a></li>
<li><a href="#">cast</a></li>
<li><a href="#">Extras</a></li>
</ul>
</div>

</div>

******************************************

/* ******** */
/* DOCUMENT */
/* ******** */

html,
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: sans-serif;
background-color: yellow;
}

#main {
position: relative;
width: 68.571em;
/* i.e., 960px */
margin: 0 auto 0 auto;
background-color: red;
}

/* ******************* */
/* HEADER & SITE TITLE */
/* ******************* */

#header {
position: relative;
/* reset the positioning context for the sake of the logo/title and
primary nav */
height: 12em;
overflow: hidden;
/* without this producers will gleefully play hob with the layout */
text-align: center;
background-color: pink;
}


/* ****************** */
/* PRIMARY NAVIGATION */
/* ****************** */

#nav {
position: absolute;
bottom: 0;
/* The goal is to take the nav out of the document flow, yet make it
flush with the bottom of #header */
overflow: auto;
/* Ensure that this element expands to the height of its contents */
margin: 0;
padding: 0;
list-style-type: none;
/* resets */
background-color: orange;
}


#nav li {
font-size: 18px;
height: 1.4em;
width: 188px;
float: left;
margin: 0;
padding: 0;
}

#nav li a {
display: block;
width: 179px;
height: 1em;
border-left: 1px solid #eee;
padding: .143em 0 .143em 8px;
}
  #2 (permalink)  
Antiguo 30/11/2012, 03:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Centrado vertical de Nav en Header

Bienvenido a FDW. Intenta usar highlight cuando posteas algo de código.

No puedes centrar elementos flotados, por lo que tienes que primero quitar eso y cambiarlo por un display:inline-block. También el elemento que los contiene, tendría que tener el texto centrado y un ancho de 100%.

Etiquetas: header, nav, vertical, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:28.