Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje01-05-2009, 14:29 (UTC)    
Título del mensaje: [Resuelto] problema con menu orizontal

Tengo el code de este menú orizontal:


Código:
<div class="menu bubplastic horizontal aqua">
   <ul>
      <li class="highlight"><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li>
      <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li>
      <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li>
      <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li>
      <li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">sample</span></a></span></li>
   </ul>
   <br class="clearit" />
</div>



Texto por debajo de la página:

Código:
.clearit {
   margin: 0;
   padding: 0;
   height: 0;
   clear: both;
}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {
   width: 100%;
   height: 27px;
   margin: 0;
   padding: 0;
   background: #000000 url(http://pixelea.com/s/d995b7c756.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.bubplastic.horizontal ul li {
   float: left;
   margin: 0;
   padding: 0;
   background: transparent url(http://pixelea.com/s/02d866c221.gif) top left no-repeat;
}

.bubplastic.horizontal ul li a {
   display: block;
   height: 27px;
   padding-left: 35px;
   float: left;
   text-transform: uppercase;
   font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
   font-size: 70%;
   color: #FFFFFF;
   text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
   display: block;
   float: left;
   height: 22px;
   padding-top: 5px;
   padding-right: 35px;
   background: transparent url(http://pixelea.com/s/02d866c221.gif) top right no-repeat;
   cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */



/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
   width: 250px;
   margin: 0;
   padding: 0;
   display: block;
}
.bubplastic.vertical ul {
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
}
.bubplastic.vertical ul li {
   display: block;
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
   display: block;
   margin: 0;
   width: 100%;
   padding-left: 35px;
   text-transform: uppercase;
   font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
   font-size: 70%;
   color: #FFFFFF;
   text-decoration: none;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
   display: block;
   margin: 0;
   width: 100%;
   height: 22px;
   padding-top: 5px;
   padding-right: 35px;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top right no-repeat;
   cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */



/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
   background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}


/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
   background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}


/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}

#test li {
   display: block;
   border: solid 1px red;
}                   




Cuando lo coloco no me aparece el menú. Me aparecen solo las palabras.
Me podrían decir el problema con el código?.Agradecería que me lo contesten cuanto antes.
Saludoss!!!


Ultima edición por los-chorros el Lun May 04, 2009 1:59 pm; editado 2 veces
Mensaje01-05-2009, 17:17 (UTC)    
Título del mensaje:

Debes colocar este code en CSS Code sin Style Tags:

Código:
.clearit {
   margin: 0;
   padding: 0;
   height: 0;
   clear: both;
}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {
   width: 100%;
   height: 27px;
   margin: 0;
   padding: 0;
   background: #000000 url(http://pixelea.com/s/d995b7c756.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.bubplastic.horizontal ul li {
   float: left;
   margin: 0;
   padding: 0;
   background: transparent url(http://pixelea.com/s/02d866c221.gif) top left no-repeat;
}

.bubplastic.horizontal ul li a {
   display: block;
   height: 27px;
   padding-left: 35px;
   float: left;
   text-transform: uppercase;
   font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
   font-size: 70%;
   color: #FFFFFF;
   text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
   display: block;
   float: left;
   height: 22px;
   padding-top: 5px;
   padding-right: 35px;
   background: transparent url(http://pixelea.com/s/02d866c221.gif) top right no-repeat;
   cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */



/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
   width: 250px;
   margin: 0;
   padding: 0;
   display: block;
}
.bubplastic.vertical ul {
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
}
.bubplastic.vertical ul li {
   display: block;
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
   display: block;
   margin: 0;
   width: 100%;
   padding-left: 35px;
   text-transform: uppercase;
   font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
   font-size: 70%;
   color: #FFFFFF;
   text-decoration: none;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
   display: block;
   margin: 0;
   width: 100%;
   height: 22px;
   padding-top: 5px;
   padding-right: 35px;
   background: transparent url(http://pixelea.com/s/c7280af631.gif) top right no-repeat;
   cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */



/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.aqua ul li a:hover span.menu_ar,
.bubplastic.aqua ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
   background: transparent url(images/bg-bubplastic-h-blue.gif) top right no-repeat;
}


/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
   background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}


/* LIME HOVER */
.bubplastic.lime ul li a:hover,
.bubplastic.lime ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.lime ul li a:hover span.menu_ar,
.bubplastic.lime ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.pink ul li a:hover span.menu_ar,
.bubplastic.pink ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.purple ul li a:hover span.menu_ar,
.bubplastic.purple ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}


/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top left no-repeat;
}
.bubplastic.red ul li a:hover span.menu_ar,
.bubplastic.red ul li.highlight a span.menu_ar {
   background: transparent url(http://pixelea.com/s/68f70c7555.gif) top right no-repeat;
}

#test li {
   display: block;
   border: solid 1px red;
}
Mensaje04-05-2009, 00:45 (UTC)    
Título del mensaje: menú orizontal

Gracias.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group