Hola compas.
No se de esto pero encontré un menú css en la web y quise personalizarlo pero me tope con el siguiente problema: Tengo las imágenes de fondo de cada botón del menú y quisiera que se estiraran o encogieran horizontalmente en función del espacio que ocupe el texto y no logro conseguirlo.
La falla es esta: http://chicas-en-facebook.blogspot.com/
Los códigos son:
Código:
.cssmenu ul{
margin:2;
padding:1;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:38px;
text-transform:capitalize;
font-size:10px;
font-weight:bold;
background:transparent url(' TRANSPARENTE ') repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
.cssmenu li{
display:block;
float:left;
margin:10;
padding:30;
}
.cssmenu li a{
display:block;
float:left;
color:#000000;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_gris1.png') repeat-x;
}
.cssmenu li a:hover{
background:transparent url('http://i1092.photobucket.com/albums/i411/menganez/Blog%20face/Menu_azul1.png') top right;
Código:
<div class='cssmenu'>
<ul>
<li><a href='http://chicas-en-facebook.blogspot.com/'><span>Pagina Principal</span></a></li>
<li><a href='http://chicas-en-facebook.blogspot.com/p/contacto.html'><span>¿Quieres ser parte de nuestro directorio?</span></a></li>
<li><a href='http://chicas-en-facebook.blogspot.com/p/contacto.html'><span>¡Conozco una chica linda!</span></a></li>
<li><a href='http://www.facebook.com/' target="_blank"><span>Ir a Facebook.Com</span></a></li>
<li><a href='http://chicas-en-facebook.blogspot.com/p/intercambio-de-enlaces.html'><span>Intercambio de enlaces</span></a></li>
</ul>
</div>
Desde ya agradezco la ayuda que puedan brindar.
Saludos.