repetir imagen en horizontal
  
(Nivel 1 - 9 posts) |
Mi problema consiste en un Menu de 3 niveles , el primer menu siempre es visible (Iconos Grandes), el segundo menu consiste en cambiar las opciones con respecto al icono seleccionado, pero hasta ahi todo esta bien , el tercer nivel es mi gran problema no he podido hacer q la imagen se repita hasta el lado derecho osea q tiene q abarcar de lado a lado.
Este es mi CSS , he tratado de utilizar el de repit-x pero no lo hago funcionar , el 3er nivel consiste en 3 imagenes los costados y la parte de enmedio pero no puedo hacer q se repita , alguna idea de como puedo solcionarlo esta es mi pagina http://img230.imagevenue.com/img.php?image=02160_Dibujo_122_130lo.jpg /*Posición del Primer nivel*/ ul.nav{ margin:0 auto; padding:0; list-style:none; white-space:nowrap; height:40px; position:relative; font-size:10px; } .nav li { margin:0; padding:0; float:left; } /*Estilo para primer nivel*/ /*Se creo este estilo para poder poner la linea entre cada opcion del menu principal (INICIO, ADMON, MTO, OPERACIO]NES, SERVICIO, VENTAS, SALIR)*/ .nav li a { display:block; float:left; height:40px; line-height:35px; color:#2b3e4d; font-size:11px; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bolder; text-align:center; padding:0 7px 0 7px; cursor:pointer; background:url("../images/PNG/linea x30.png"); background-repeat: no-repeat; } /* ---> aqui empieza el segundo nivel */ /* Imagen background para el segundo nivel de menus (submenu)*/ .nav { background: url("../images/SegundoNivel.jpg"); background-repeat:repeat-x; } /*Estilo para segundo nivel*/ /*Imagen central del tecer Sub nivel)*/ ul.nav li ul li a{ float:left; display:block; padding:0 7px 0 7px; color:#2b3e4d; height:37px; background:url("../images/SubMenuCenter.jpg"); background-repeat:repeat-x; } /*Orillas del tercer Sub nivel (orilla izquierda , orilla derecha)*/ #nav .orillaI2 { display:block; float:left; height:44px; line-height:42px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 11px; cursor:pointer; background:url("../images/SubMenuLeft.jpg"); background-repeat: no-repeat; } #nav .orillaD2 { display:block; float:left; height:44px; line-height:42px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 16px 0 0; cursor:pointer; background:url("../images/SubMenuRight.jpg"); background-repeat: no-repeat; } /*Segundo Nivel quedo raro pero funciona en todos los browsers*/ /* .nav ul{ /*Remueve todos los espacios de las listas*/ margin:0 auto; padding:0; list-style:none; white-space:nowrap; height:40px; position:relative; font-size:11px; } */ /* ul.nav{ display: table; } */ ul.nav>li{ display: table-cell; position: relative; padding: 10px 6px ; } /* ---> aqui termina el segundo nivel */ /* ---> aqui empieza el efecto para los submenus */ .nav li a:hover{ display: block; color:#FFF; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bolder; text-align:center; line-height:35px; height:36px; background: url("../images/PNG/submenua.png"); visibility:visible; } /* ---> aqui dejo activa la imagen cuando doy clic sobre alguna opcion */ .nav li a:active { background: url("../images/PNG/submenua.png"); line-height:35px; height:35px; } /* ---> aqui termina el efecto para los submenus */ /* ---> aqui empieza el efecto para los mostrar u ocultar los submenus */ /*Hace la sub lista invisible*/ ul.nav li>ul{ display: none; position: absolute; top: 29px; left: 0; } /*Cuando esta el evento hover aparecen*/ ul.nav li:hover>ul{ display : block; } /* ---> aqui termina el efecto para los mostrar u ocultar los submenus */ |
