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