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;
}