Ver Mensaje Individual
  #30 (permalink)  
Antiguo 02/03/2007, 07:56
cuideru
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 17 años, 2 meses
Puntos: 1
Re: menu con listas

Mira, ésta es la mejor solución que encontré:


Código:
#menu2 {

	list-style:none;
	margin:0;
	padding:0;
}


#menu2 li {
	
	margin:0px;	
}

#menu2 li a.enlaces { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(botones/gal80.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces:hover { 
	background-color: transparent;
	background-image: url(botones/gal80b.jpg);
	background-repeat: no-repeat;
}

#menu2 li a.enlaces2 { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(BOTONES/gal90.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces2:hover { 
	background-color: transparent;
	background-image: url(BOTONES/gal90b.jpg);
	background-repeat: no-repeat;
}


	
#menu2 li a.enlaces3 { 
	width: 219px;
	height: 56px;
	display: block;
	position: relative;
	background-image: url(BOTONES/gal00.jpg);
	background-repeat: no-repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}


#menu2 li a.enlaces3:hover { 
	background-color: transparent;
	background-image: url(botones/gal00b.jpg);
	background-repeat: no-repeat;
}


#celda{
	width:219;
	height:53;
	background-color:#71352b;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;	
}


#celda3{

	width:219px;
	height:56px;
	background-image:url(botones/gal80b.jpg);
	background-repeat:no repeat;
	border-style:solid;
	border-color:#b29201;
	border-width:1px;
}

.cajali{
	width:230;
	height:350;
	border-color:blue;
	border-style:solid;
	border-width:0px;
	top:50px;
	float:left;	

}

</style>
</HEAD>

<body>

<DIV class="cajali">

      <ul id="menu2">

<li id="celda" style="margin-bottom:19px;"></li>
<li id="celda3"style="margin-bottom:19px;"></li>
<li style="margin-bottom:19px;"><a href="gal90.htm" class="enlaces2"></a></li>
<li style="margin-bottom:19px;"><a href="gal00.htm" class="enlaces3"></a></li>
<li id="celda"></li>

      </ul>
</DIV>

</body>
</HTML>
Donde .celda3 es un estilo creado para contener la img de fondo del botón que indica la página. Como ves no es "pinchable" puesto que no lleva link.

¿Cual es el problema de este código? Sumando todas las cantidades en vertical, salen 350px, y de hecho lo metí en una caja (.cajali) de height:350px;. Ok, frente a este menú hice otra caja de 350px que contiene fotos. En IE está bien cuadradas ambas cajas. En FFox el menú llega más abajo (10px quizá) que la caja de las fotos, aunque ambos tienen 350px.

Cuideru