Centrar menu css

Question

Hola amigos de foro,

Resulta que estoy haciendo una aplicacion web, donde tengo un menu creado a partir de css y html, pero no logro centrarlo ya sea dentro de una celda de una tabla o dentro de un <div>...... por mas que intento y pongo: align="center", no pasa nada, sigue saliendo mal,

Miren un pantallazo:

http://k18.kn3.net/A887B2511.jpg

y el codigo que estoy uitilizando para mi menu es este:

CSS:

#pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

margin:0px;

list-style:none;

padding:0px 2px 2px 0px;

background-color:#fff;

background-repeat:repeat;

border-color:#808080;

border-width:1px;

border-style:solid;

width:800%;z

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:block;

zoom:1;

height:21px;

float: left;

}

ul.pureCssMenu ul{

width:78.75px;

}

ul.pureCssMenu li{

display:block;

margin:2px 0px 0px 2px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#FFFFFF;

border-width:1px;

border-color:#fff;

border-style:solid;

text-align:center;

text-decoration:none;

padding:2px 5px 5px 10px;

_padding-left:0;

font:normal 11px Tahoma;

color: #000;

text-decoration:none;

cursor:default;

}

ul.pureCssMenu span{

overflow:hidden;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3px;

height:100%;

display:inline-block;

background-color:#808080; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3px;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#DBF0F9;

border-color:#45ADE4;

border-style:solid;

font:normal 11px Tahoma;

color: #444;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #557D4F !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;

height:16px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul{display:block}

ul.pureCssMenu span{

display:block;

background-image:url(./Imagenes/arrv_white.gif);

background-position:right center;

background-repeat: no-repeat;

   padding-right:9px;}

ul.pureCssMenu ul span{background-image:url(./Imagenes/arr_black.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(./Imagenes/arr_white.gif);}

ul.pureCssMenu table a:hover span{background-image:url(./Imagenes/arr_white.gif)}

ul.pureCssMenu li.pureCssMenui0 {

width:110px;

height:23px;

}

ul.pureCssMenu li a.pureCssMenui0{

height:100%;

background-image:url(./Imagenes/btn3.jpg);

border-width:0px;

font:normal 11px Tahoma;

color:#fff;

}

ul.pureCssMenu li a.pureCssMenui0:hover{

background-image:url(./Imagenes/btn4.jpg);

font:normal 11px Tahoma;

color:#eee;

}

 ul.pureCssMenum0 {

background-color:transparent;

border-width:0px;

padding:0px 0px 0px 0px;

}

 ul.pureCssMenum0>li>a {

padding:8px 10px 0px 10px;

}

 ul.pureCssMenum0 a {

padding:8px 10px 0px 10px;

}

 ul.pureCssMenum0 ul a {

padding:2px 5px 5px 10px;

}

 ul.pureCssMenum0>li {

margin:0px 0px 0px 0px;

}

 ul.pureCssMenum0 li {

margin:0px 0px 0px 0px;

}

 ul.pureCssMenum0 li li {

margin:2px 0px 0px 2px;

}

 

HTML

 <ul class="pureCssMenu pureCssMenum0">

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmEmpresas.aspx" title="Empresas">Empresas</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmMaestroAplicaciones.aspx" title="Aplicaciones">Aplicaciones</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmRoles.aspx" title="Roles"><span>Roles</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

               <ul class="pureCssMenum">

               <li class="pureCssMenui"><a class="pureCssMenui" href="FrmRolesPorEmpresa.aspx" title="Roles Por Empresa">Roles Por Empresa</a></li>

               </ul>

               <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmFormularios.aspx" title="Formularios">Formularios</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmConexiones.aspx" title="Conexiones">Conexiones</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmPlanes.aspx" title="Planes">Planes</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="FrmUsuarios.aspx" title="Usuarios">Usuarios</a></li>

               <li class="pureCssMenui0"><a class="pureCssMenui0" href="#" title="Maestros"><span>Maestros</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->

               <ul class="pureCssMenum">

               <li class="pureCssMenui"><a class="pureCssMenui" href="FrmMaestroAplicaciones.aspx" title="Maestro de Aplicaciones">Aplicaciones</a></li>

               <li class="pureCssMenui"><a class="pureCssMenui" href="FrmMaestroPlanes.aspx" title="Maestro de planes">Planes</a></li>

               <li class="pureCssMenui"><a class="pureCssMenui" href="FrmMestroRoles.aspx" title="Maestro de Roles">Roles</a></li>

               </ul>

 

Por favor ayudenme con esto que no logro dar..........

Muchas gracias

---

Cristian Perez.

Answer 1

Hola Cristian, en principio te cuento que en el código había algunos errores con lo cual puede que algunas cosas no te funcionen del todo bien hasta tanto no los corrijas. Los errores igual son de letras puestas de más. Luego pude resolver el centrado agregando dos divs que envuelven la etiqueta ul principal. Te muestro como los agregue:

 

<div align="center">
    <div style="width:800px">
        <ul>
        </ul>
    </div>
</div>

Espero haberte podido ayudar.

 

Saludos,

Answer 2

Mariano, aunque ya solucione el problema, muchas gracias por responderme.

Es muy valido cualquier comentario.

Gracias..!!

---

Cristian Perez.

Answer 3

Hola Cristian... Casi un año después y yo tengo el mismo problema, ¿me podrías decir cómo lo solucionaste? Gracias.

Answer 4

Hola jhovani,

Casi no logro recordar que menú fue, ya que el server donde guarde el pantallazo borro la imagen...

Sin embargo recuerdo la solución!

Resulta que esa clase de menú que estaba intentando implementar era una plantilla que me bajé de alguna página como:

http://purecssmenu.com/

Entonces lo que tuve que hacer fue una depuración de todas las clases y/o reglas css que estaban en las librerías del template, pero que no estaba utilizando en mi pequeño menú !

A lo último resulte realizando yo mismo mis clases css que necesitaba para mi menú !

Los template son una opción muy rápida, pero no los recomiendo por que hacen más difícil el proceso de mantenimiento de código.

Si tienes el código HTML - CSS de la implementación de tu menú, sería buena idea que no lo compartas para reproducir el mismo comportamiento !

---

Un saludo, Cristian Pérez