Tengo un menu con 9 botones y necesito centrarlos para que se vean siempre centrados sin importar la resolución del monitor.
Para el caso de mi resolucion se deberia ver asi:
Código html:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper_menu">
<ul class="menu menu_black">
<li class="nodrop"><a href="link1" target="_blank">Boton 1</a></li>
<li class="nodrop"><a href="link2" target="_blank">Boton 2</a></li>
<li class="nodrop"><a href="link3" target="_blank">Boton 3</a></li>
<li class="nodrop"><a href="link4" target="_blank">Boton 4</a></li>
<li class="nodrop"><a href="link5" target="_blank">Boton 5</a></li>
<li class="nodrop"><a href="link6" target="_blank">Boton 6</a></li>
<li class="nodrop"><a href="link7" target="_blank">Boton 7</a></li>
<li class="nodrop"><a href="link8" target="_blank">Boton 8</a></li>
<li class="nodrop"><a href="link9" target="_blank">Boton 9</a></li>
</ul>
</div>
<br><br>
</body>
</html>
Código PHP:
#wrapper_menu {
margin:0 auto;
display:block;
position: relative;
}
.menu {
list-style:none;
margin:0px auto 0px auto;
height:43px;
}
.menu li {
float:left;
text-align:center;
position:relative;
margin-right:20px;
margin-top:6px;
border:none;
background: -moz-linear-gradient(top, #212121, #161616);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#161616));
background: -o-linear-gradient(top, #212121, #161616);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.menu li.fullwidth {
position: static !important;
}
.menu li:hover {
background:#161616;
border:1px solid #000000;
border-bottom:none;
margin-right:19px;
background: -moz-linear-gradient(top, #212121, #161616);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#161616));
background: -o-linear-gradient(top, #212121, #161616);
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menu li.nodrop:hover {
background:#292929;
padding: 4px 10px 4px 9px;
border-bottom:1px solid #161616;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#292929));
background: -o-linear-gradient(top, #212121, #292929);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.menu li.nodrop:hover a {
padding: 0px;
}
.menu li a {
color: #EEEEEE;
outline:0;
padding: 5px 10px 3px 10px;
text-decoration:none;
display:block;
}
.menu li:hover a {
color:#ffffff;
position:relative;
z-index:11;
padding: 4px 9px 4px 9px;
}
.menu li:hover div a {
display:inline;
}
.menu li .drop {
padding-right:27px;
background:url("img/drop_dark.png") no-repeat right 13px;
}
.menu li:hover .drop {
padding-right:27px;
background:url("img/drop_dark.png") no-repeat right 12px;
}
.menu p,
.menu ul,
.menu li,
.menu h2,
.menu h3 {
color:#ffffff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
.menu p {
font-size:12px;
line-height:18px;
margin:0;
margin-bottom:10px;
}
.menu .strong {
font-weight:bold;
}
.menu .italic {
font-style:italic;
}
.menu h2,
.menu h3 {
border-bottom:1px solid #333333;
margin-top:7px;
}
.menu h2 {
font-weight:400;
font-size:21px;
margin-bottom:18px;
padding-bottom:11px;
}
.menu h3 {
font-weight:600;
font-size:14px;
margin-bottom:14px;
padding-bottom:7px;
}
.menu li:hover div a {
text-decoration:none;
border:none;
padding:0;
}
.menu_black {
background: #36373A;
border: 1px solid #444;
}
.menu_black li:hover div a {
color:#CCC;
}
.menu_black li:hover div a:hover {
color:#EEE;
}
.menu_black li ul li a:hover {
color:#EEE;
}
