Problemas en maquetar un menu en css

doublefly · #1 (**permalink**) 27/10/2007, 09:41

Hola amigos, alguien me podria ayudar? tengo dificultades a la hora de hacer un menú con imágenes y letras en el mismo <li>. Lo que intento hacer es lo mismo que hariamos con una tabla, y de esta forma no consigo que las letras queden bien centradas con la imagen cuando se trata de un texto demasiado largo.

Mi pregunta es, con estilos css es posible hacerlo? Y si es así aquí cuelgo el codigo para saber donde me equivoco.

Gracias.

Codigo CSS:

<style>
.menu{
list-style:none;}
.menu ul{
list-style:none;}
.menu ul li{
list-style:none;}
.list{width:170px;}
.float{float:left;}

</style>
</head>

<body>
<div class="list pdt15">

<ul class="menu">

<li><img src="imagen.jpg" align="absmiddle" /><a href="http://">Mesas de comedor</a></li>
<li><img src="imagen.jpg" align="absmiddle"/><a href="http://">Tableros y patas</a></li>
<li><img src="imagen.jpg" align="absmiddle"/>Sillas de comedor comedor comedor</li>
<li style="vertical-align:middle;"><div class="float"><img src="imagen.jpg" /></div><div class="float">Taburetes y bancos</div></li>
</ul>
</div>
</body>

Raulmmmm · #2 (**permalink**) 27/10/2007, 13:03

Cambia tu css:

Código:

.menu{
list-style:none;}
.menu li{
list-style:none;
background: url('imagen.jpg');
width:120px;//aqui pones el ancho del fondo
height:120px;//aqui pones el alto del fondo
float: left;
}

Y tu HTML:

Código HTML:

<ul class="menu">
<li><a href="http://">Mesas de comedor</a></li>
<li><a href="http://">Tableros y patas</a></li>
<li>Sillas de comedor comedor comedor</li>
<li>Taburetes y bancos</li>
</ul>