http://thekillers.net63.net/
lo que pasa que cuando usas el navegador con una ventana ampiada se ve bien pero si modificas el tamaño a uno mas pequeño no se ve como quiero
lo que quiero que el menu se ajuste al navegador sea cual sea su tamaño de la ventana
aqui les pogo los codigos: el archivo css
Código HTML:
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC HORIZONTAL MENU */
.bubplastic.horizontal {
width: 73%;
height: 27 px;
margin: 0 auto;
padding: 0;
background: #000000 url(images/bg-bubplastic.gif) top left repeat-x;
background-position:center;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.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(images/bg-bubplastic-button.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(images/bg-bubplastic-button.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(images/bg-bubplastic-button.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(images/bg-bubplastic-button.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(images/bg-bubplastic-h-aqua.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(images/bg-bubplastic-h-aqua.gif) top right no-repeat;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-blue.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(images/bg-bubplastic-h-gray.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(images/bg-bubplastic-h-lime.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(images/bg-bubplastic-h-lime.gif) top right no-repeat;
}
/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-orange.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(images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* PINK HOVER */
.bubplastic.pink ul li a:hover,
.bubplastic.pink ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-pink.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(images/bg-bubplastic-h-pink.gif) top right no-repeat;
}
/* PURPLE HOVER */
.bubplastic.purple ul li a:hover,
.bubplastic.purple ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-purple.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(images/bg-bubplastic-h-purple.gif) top right no-repeat;
}
/* RED HOVER */
.bubplastic.red ul li a:hover,
.bubplastic.red ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-red.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(images/bg-bubplastic-h-red.gif) top right no-repeat;
}
#test li {
display: block;
border: solid 1px red;
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>.::JBF Bros, C.A.-INICIO::.</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="imagess/menu_style.css" rel="stylesheet" type="text/css" /> <link href="menu_style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .Estilo1 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; } body { background-color: #000000; } .Estilo2 { font-size: 100%; font-family: Geneva, Arial, Helvetica, sans-serif; } .Estilo6 {color: #FFFFFF} --> </style> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div class="menu bubplastic horizontal blue"> <ul> <li></li> <li><a href="home.html"><span class="menu_ar Estilo2"><strong>Inicio</strong></span></a></li> <li> <div align="center"><span class="menu_r"><a href="#"><span class="menu_ar Estilo1">FORO</span></a></span></div> </li> <li> <div align="center" class="menu_r"><a href="#"><span class="Estilo2 menu_ar"><strong>BLOG</strong></span></a></div> </li> <li> <li> <div align="center" class="menu_r"><a href="#"><span class="Estilo2 menu_ar"><strong>NOSOTROS</strong></span></a></div> </li> <li> <li> <div align="center" class="menu_r"><a href="#"><span class="Estilo2 menu_ar"><strong>CONTÁCTANOS</strong></span></a></div> </li> <li> <div align="right"></div> </li> <li> <div align="right"><span class="menu_r"><a href="#"><span class="menu_ar Estilo1">REPUESTOS</span></a></span></div> </li> </ul> <br class="clearit" /> </div> <p align="right"> </p> <p align="center"> </p> </body> </html>
salu2
