menu ul

[elcharli]

Hola,

Tengo una duda, tengo un menu hecho con UL, le puesto un imagen (un background) un boton de fondo y las letras en html, claro el div de cada boton su tamaño es acorde a lo que escriba dentro (contenido) en las palabras como EMPRESA bien pero cuando pongo I+D por ejemplo se corta el boton (imagen) el div mengua.

Esto lo hecho con Padding y consigo que se vea alguna palabra con el boton de fondo entero, pero otras no se ve el boton entero.

Si le doy mucho padding se separa mucho y quisiera que estubieran juntos los botones.

ul li { /* propiedades botones menu principal */


padding-top:10px;
padding-bottom:10px;
padding-left:25px;
padding-right:25px;
position:relative;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:.9em;
color:#777777;
display:inline;

}

¿Como puedo hacer para que se vea el .png que le puesto al ul sin que se corte, osea poder ponerle width del png y juntarlos?

Gracias

[talmente]

Lo primero que tiene que saber es que no tienes por que meter cada link en un div.
Lo segundo es que solo necesitas la lista:

<ul>
<li><a href="index.htm">link 1</a></li>
<li><a href="servicios.htm">link 2</a></li>
</ul>

Ahora en la hoja de estilo haces lo demás.

ul {
padding:0;
list-style:none;
margin:0px;
background: #666666;
width: 300px; TAMAÑO DE TU FONDO
height: 150px;
position: relative;
left: 0px;
}
li{
padding:0;
list-style: none;
margin: 0px;
border-bottom: 2px solid #333333;
}

a {
display: block; ESTO ES IMPORTANTE
text-align: center;
font-weight: bold;
color: #FFFFFF;
background: #990000;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 10px; ESPACIO ALRREDEDOR DEL TEXTO
}
a:hover{ background:#CC3300; }

Yo no he usado imágenes, cambia los background por imágenes. No está del todo resuelto pero te puede servir para que lo hagas Tú.