Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cómo centrar un menú creado en css3menu?

Estas en el tema de Cómo centrar un menú creado en css3menu? en el foro de CSS en Foros del Web. Hola amigos, soy nuevo en el foro (también en CSS). Fíjense que inicié un pequeño proyecto y para "agilizar" los tiempos me encontré con el ...
  #1 (permalink)  
Antiguo 26/06/2015, 14:17
 
Fecha de Ingreso: junio-2015
Mensajes: 3
Antigüedad: 9 años, 5 meses
Puntos: 1
Cómo centrar un menú creado en css3menu?

Hola amigos, soy nuevo en el foro (también en CSS). Fíjense que inicié un pequeño proyecto y para "agilizar" los tiempos me encontré con el software llamado CSS3menu, con el cual creé un menú básico de 3 niveles, pero bonito y lo importante, funcional, sin embargo, a la hora de migrarlo a mi sitio, no lo he podido centrar, todo lo demás es perfecto a excepción de este detalle, ya le moví muchísimas cosas y no logro centrarlo, dejo el código y si alguién me puede ayudar lo agradeceré eternamente.

PD. 1: Este menú lo realiacé para salir del apuro, mi intención es aprender CSS en un par de semanas (menos presionado).

PD. 2 Es una comunidad excelente, llevo años consultando sus tips, y bueno, por fin me registré, sos unos grosos, gracias por todo!!!


Saludos!!!!



Dejo el codigo:

Código CSS:
Ver original
  1. ul#css3menu1,ul#css3menu1 ul{  
  2. background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;} 
  3.    
  4. ul#css3menu1 ul{
  5.     display:none;position:absolute;left:0;top:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";opacity:0.9;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#c6c6c6;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#d4d4d4;padding:0 10px 10px;filter:alpha(opacity=90)}
  6.  
  7. ul#css3menu1 li:hover>*{
  8.     display:block;}
  9.  
  10. ul#css3menu1 li{
  11.     position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
  12.  
  13. ul#css3menu1 li:hover{
  14.     z-index:1;}
  15.  
  16. ul#css3menu1 ul ul{
  17.     position:absolute;left:100%;top:0;opacity:1;}
  18.          
  19. ul#css3menu1{
  20.     font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
  21.     *display:inline;}
  22.  
  23. * html ul#css3menu1 li a{
  24.     display:inline-block;}
  25.  
  26. ul#css3menu1>li{
  27.     margin:0;}
  28.  
  29. ul#css3menu1 a:active, ul#css3menu1 a:focus{
  30.     outline-style:none;}
  31.  
  32. ul#css3menu1 a{
  33.     display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 14px "Palatino Linotype","Book Antiqua",Palatino,serif;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:2px 9px 2px 9px;background-color:#c1c1c1;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
  34.  
  35. ul#css3menu1 ul li{
  36.     float:none;margin:10px 0 0;}
  37.  
  38. ul#css3menu1 ul a{
  39.     text-align:left;padding:4px;background-color:#c6c6c6;background-image:none;border-width:0;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;font:13px "Palatino Linotype","Book Antiqua",Palatino,serif;color:#000000;text-decoration:none;}
  40.  
  41. ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
  42.     background-color:#c6c6c6;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
  43.  
  44. ul#css3menu1 span{
  45.     display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
  46.  
  47. ul#css3menu1 ul span{
  48.     background-image:url("arrowsub.png");padding-right:12px;}
  49.  
  50. ul#css3menu1 > li.switch{
  51.     display:none;cursor:pointer;width:25px;height:20px;padding:2px 9px 2px 9px;}
  52.  
  53. ul#css3menu1 > li.switch:before{
  54.     content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
  55.  
  56. ul#css3menu1 > li.switch:hover:before{
  57.     background:#000000;-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000;}
  58.  
  59. .c3m-switch-input{
  60.     display:none;}
  61.  
  62. ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{
  63.     background-color:#c6c6c6;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;}
  64.  
  65. ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{
  66.     background-color:#dddddd;background-image:none;color:#000000;text-decoration:none;}
  67.  
  68. ul#css3menu1 li.topfirst>a{
  69.     border-radius:7px 0 0 7px;-moz-border-radius:7px 0 0 7px;-webkit-border-radius:7px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
  70.  
  71. ul#css3menu1 li.toplast>a{
  72.     border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;}
  73.  
  74. @media screen and (max-width: 785px)
  75. {
  76.     ul#css3menu1 > li {
  77.         position: initial;}
  78.  
  79.     ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
  80.         left: 0; right:auto; top: 100%;}
  81.  
  82.     ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
  83.         -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
  84. }
  85.  
  86. @media screen and (max-width: 784px)
  87. {
  88.     ul#css3menu1 {
  89.         width: 100%;}
  90.  
  91.     ul#css3menu1 > li {
  92.         display: none; position: relative;width: 100% !important;}
  93.  
  94.     ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {
  95.         display: block;}
  96.  
  97.     ul#css3menu1 > li.switch > label {
  98.     position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}
  99. }
  #2 (permalink)  
Antiguo 29/06/2015, 08:31
 
Fecha de Ingreso: junio-2015
Mensajes: 3
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cómo centrar un menú creado en css3menu?

Hola, eh llegado a la respuesta gracias al user 'quedecosas', la dejo por si a alguien le llega a servir:

En la línea 19: ul#css3menu1

Reemplazar lo siguiente:

* * padding:1px 1px 1px 0;display:block;font-size:0; margin:0px auto; width:780px; height:20px;



Saludos!!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:06.