Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/07/2011, 17:37
Avatar de darkra
darkra
 
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 10 años, 10 meses
Puntos: 0
Centrar botones de Menu

Hola,

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 CSS:

Código PHP:
#wrapper_menu {

    
margin:0 auto;
    
display:block;
    
positionrelative;

}
.
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(linear00%, 0100%, from(#212121), to(#161616));
    
background: -o-linear-gradient(top#212121, #161616);
    
-moz-border-radius5px;
    -
webkit-border-radius5px;
    -
khtml-border-radius5px;
    
border-radius5px;
}
.
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(linear00%, 0100%, from(#212121), to(#161616));
    
background: -o-linear-gradient(top#212121, #161616);
    
-moz-border-radius5px 5px 0px 0px;
    -
webkit-border-radius5px 5px 0px 0px;
    -
khtml-border-radius5px 5px 0px 0px;
    
border-radius5px 5px 0px 0px;
}
.
menu li.nodrop:hover {
    
background:#292929;

    
padding4px 10px 4px 9px;
    
border-bottom:1px solid #161616;
    
background: -webkit-gradient(linear00%, 0100%, from(#212121), to(#292929));
    
background: -o-linear-gradient(top#212121, #292929);
    
-moz-border-radius5px;
    -
webkit-border-radius5px;
    -
khtml-border-radius5px;
    
border-radius5px;
}
.
menu li.nodrop:hover a {
    
padding0px;
}
.
menu li a {
    
color#EEEEEE;
    
outline:0;
    
padding5px 10px 3px 10px;
    
text-decoration:none;
    
display:block;

}
.
menu li:hover a {
    
color:#ffffff;

    
position:relative;
    
z-index:11;

    
padding4px 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:ArialHelveticasans-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;
    
border1px 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;

Desde ya gracias por la ayuda.