Foros del Web » Creando para Internet » CSS »

Propiedad CSS para centrar un spry Menu Horizontal?

Estas en el tema de Propiedad CSS para centrar un spry Menu Horizontal? en el foro de CSS en Foros del Web. Buenas todos, he creado un menu horizontal con Dreamweaver CS3, pero me sali alineado hacia la izquierda, me gustaria como lo puedo centrar ACA EL ...
  #1 (permalink)  
Antiguo 12/10/2010, 15:58
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 8 años, 7 meses
Puntos: 27
Propiedad CSS para centrar un spry Menu Horizontal?

Buenas todos, he creado un menu horizontal con Dreamweaver CS3, pero me sali alineado hacia la izquierda, me gustaria como lo puedo centrar

ACA EL CODIGO CSS del Menu:


Código CSS:
Ver original
  1. @charset "UTF-8";
  2.  
  3. /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /*******************************************************************************
  8.  
  9.  LAYOUT INFORMATION: describes box model, positioning, z-order
  10.  
  11.  *******************************************************************************/
  12.  
  13. /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
  14. ul.MenuBarHorizontal
  15. {
  16.     margin: 0;
  17.     padding: 0;
  18.     list-style-type: none;
  19.     font-size: 100%;
  20.     cursor: default;
  21.     width: 1501px;
  22.     height: auto;
  23. }
  24. /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
  25. ul.MenuBarActive
  26. {
  27.     z-index: 1000;
  28. }
  29. /* Menu item containers, position children relative to this container and are a fixed width */
  30. ul.MenuBarHorizontal li
  31. {
  32.     margin: 0;
  33.     padding: 0;
  34.     list-style-type: none;
  35.     font-size: 100%;
  36.     position: relative;
  37.     text-align: left;
  38.     cursor: pointer;
  39.     width: 8em;
  40.     float: left;
  41. }
  42. /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
  43. ul.MenuBarHorizontal ul
  44. {
  45.     margin: 0;
  46.     padding: 0;
  47.     list-style-type: none;
  48.     font-size: 100%;
  49.     z-index: 1020;
  50.     cursor: default;
  51.     width: 8.2em;
  52.     position: absolute;
  53.     left: -1000em;
  54. }
  55. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
  56. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
  57. {
  58.     left: auto;
  59. }
  60. /* Menu item containers are same fixed width as parent */
  61. ul.MenuBarHorizontal ul li
  62. {
  63.     width: 8.2em;
  64. }
  65. /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
  66. ul.MenuBarHorizontal ul ul
  67. {
  68.     position: absolute;
  69.     margin: -5% 0 0 95%;
  70. }
  71. /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
  72. ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
  73. {
  74.     left: auto;
  75.     top: 0;
  76. }
  77.  
  78. /*******************************************************************************
  79.  
  80.  DESIGN INFORMATION: describes color scheme, borders, fonts
  81.  
  82.  *******************************************************************************/
  83.  
  84. /* Submenu containers have borders on all sides */
  85. ul.MenuBarHorizontal ul
  86. {
  87.     border: 1px solid #CCC;
  88. }
  89. /* Menu items are a light gray block with padding and no text decoration */
  90. ul.MenuBarHorizontal a
  91. {
  92.     display: block;
  93.     cursor: pointer;
  94.     background-color: #EEE;
  95.     padding: 0.5em 0.75em;
  96.     color: #333;
  97.     text-decoration: none;
  98. }
  99. /* Menu items that have mouse over or focus have a blue background and white text */
  100. ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
  101. {
  102.     background-color: #33C;
  103.     color: #FFF;
  104. }
  105. /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
  106. ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
  107. {
  108.     background-color: #33C;
  109.     color: #FFF;
  110. }
  111.  
  112. /*******************************************************************************
  113.  
  114.  SUBMENU INDICATION: styles if there is a submenu under a given menu item
  115.  
  116.  *******************************************************************************/
  117.  
  118. /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
  119. ul.MenuBarHorizontal a.MenuBarItemSubmenu
  120. {
  121.     background-image: url(SpryMenuBarDown.gif);
  122.     background-repeat: no-repeat;
  123.     background-position: 95% 50%;
  124. }
  125. /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
  126. ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
  127. {
  128.     background-image: url(SpryMenuBarRight.gif);
  129.     background-repeat: no-repeat;
  130.     background-position: 95% 50%;
  131. }
  132. /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
  133. ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
  134. {
  135.     background-image: url(SpryMenuBarDownHover.gif);
  136.     background-repeat: no-repeat;
  137.     background-position: 95% 50%;
  138. }
  139. /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
  140. ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
  141. {
  142.     background-image: url(SpryMenuBarRightHover.gif);
  143.     background-repeat: no-repeat;
  144.     background-position: 95% 50%;
  145. }
  146.  
  147. /*******************************************************************************
  148.  
  149.  BROWSER HACKS: the hacks below should not be changed unless you are an expert
  150.  
  151.  *******************************************************************************/
  152.  
  153. /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
  154. ul.MenuBarHorizontal iframe
  155. {
  156.     position: absolute;
  157.     z-index: 1010;
  158. }
  159. /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
  160. @media screen, projection
  161. {
  162.     ul.MenuBarHorizontal li.MenuBarItemIE
  163.     {
  164.         display: inline;
  165.         float: none; y background-color: transparent;.
  166.  
  167.         f\loat: left;
  168.         background: #FFF;
  169.     }
  170. }

La verdad CSS no lo manejo mucho, asi que agradezco me digan que propiedad debo cambiara para poder ver mi menu centrado en la pagina web

agradezco la colaboración....
  #2 (permalink)  
Antiguo 13/10/2010, 07:45
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Propiedad CSS para centrar un spry Menu Horizontal?

Hola!

Para centrar el texto, añade esta línea al div de .MenuBarHorizontal

Código CSS:
Ver original
  1. text-align:center;

Y tu texto se quedará centrado.

Si lo que quieres es centrar la box entera, pero no el texto usa este otro:

Código CSS:
Ver original
  1. margin: 0 auto;
  2. text-align:left

Saludos

Etiquetas: horizontal, propiedad, spry
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 12:50.