Centrar un menú con CSS

GuilleRade · #1 (**permalink**) 25/01/2012, 09:40

Hola a todos!

Antes que nada agradezco de antemano por este foro de gran ayuda para los webmasters y en especial para diseñadores web amateurs como yo (:

Tengo un problema a la hora de centrar un menú. Lo que quiero hacer es que #menu y #bbody estén centrados. Sin embargo no logro hacerlo de ninguna manera. Pero a su vez, quisiera que tanto #header como #menu se repita horizontalmente como ocurre en sitios como este:

http://alertpay.com/.

Si alejan el sitio, verán lo que quiero lograr, que esté todo centrado pero a su vez que el header y la barra del menú se siga extendiendo pero manteniendo su contenido centrado.

HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Confiable</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>
<body>
<div id="page">

<div id="header">

</div>
 <div id="menu" style="border:solid 2px blue">
   <ul style="border:solid 1px orange">
   <li class="botons">Inicio</li>
   <li><a href="#">Quiénes somos</a></li>
   <li><a href="#">Servicios</a></li>
   <li><a href="#">Productos</a></li>
   <li><a href="#">Cómo llegar</a></li>
   <li class="redessociales"></li>
   </ul>
 </div>

<div id="bbody">
</div>

<div id="bfooter">
</div>
</div>
</body>
</html>

CSS

Código:

body {padding:0; margin:0;}
page {margin:0; padding:0; width:100%;}

/* HEADER
------------------------------------------------------------------*/
#header {
	width:1006px;
	background-image:url(images/header_back.gif);
	height:75px; 
	margin:0;
	}
	
#menu { 
    width:1006px; 
	height:42px;
	margin:0;
	padding:0;
	background-image:url(images/menu_back.gif); 
	background-repeat:repeat-x;
    }

.clear{clear:both;}

#menu ul {
width: 1006px;
list-style: none;
margin:0;
}

#menu ul li {
border:none;
background-image:url(images/botonm.gif);
background-repeat:no-repeat;
height:42px;
width:169px;
text-align:center;
font: bold 0.9em Verdana, Geneva, sans-serif;
float:left;
}

#menu ul li:hover {
background-position:0 -42px;
}

#menu ul li:active {
background-position:0 -84px;
}

#menu ul li a {
padding-top:12px;
padding-bottom:12px;
display:block;
color: #333;
text-decoration: none;
text-shadow: 0.1em 0.1em #265306;
color:white;
}

li.botons {line-height:42px !important;}

#menu .botons {background-image:url(images/botons.gif) !important; color:#333 !important;}
#menu .botons:hover, :active {background-position:top !important;}
.redessociales {background-image:url(images/boton_socialnet.gif) !important; width:114px !important; height:42px !important; display:compact;}
.redessociales:hover, :active {background-position:top !important;}
	
/* END HEADER
------------------------------------------------------------------*/
/* BODY
------------------------------------------------------------------*/
#bbody {
	clear:both; 
    background-image:url(images/bbody.gif); background-repeat:repeat-y; 
    width:1006px; height:400px;
	margin:0;
	padding:0;
	}

C2am · #2 (**permalink**) 25/01/2012, 10:24

Hola

Código CSS:

Ver original#menu{
   width:100%; 
}
 
#menu ul {
    margin:0 auto;
}

Espero que te sirva
Saludos

GuilleRade · #3 (**permalink**) 25/01/2012, 10:43

Hola! Gracias por tu respuesta.

La parte del menú está resuelta gracias a ti. Solo falta centrar (y tampoco logro hacerlo) al bbody, que es esto:

C2am · #4 (**permalink**) 25/01/2012, 10:59

Es lo mismo que al centrar la lista ul
Aplicas margen izquierdo y derecho en auto.

Aquí el como y el porque.
Aquí sobre margin

Saludos

GuilleRade · #5 (**permalink**) 25/01/2012, 11:06

Muchas gracias!

Había puesto margin: 0 auto pero el width estaba en 100% en lugar de 1006px :P

Saludos genio!