Foros del Web » Creando para Internet » CSS »

menu ul

Estas en el tema de menu ul en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 10/03/2009, 10:58
 
Fecha de Ingreso: febrero-2009
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
menu ul

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
  #2 (permalink)  
Antiguo 10/03/2009, 13:52
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: menu ul

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ú.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:33.