Foros del Web » Creando para Internet » CSS »

Ayuda con capas

Estas en el tema de Ayuda con capas en el foro de CSS en Foros del Web. Hola. Después de intentar bastantes cosas, me doy por vencido y os pido ayuda con las capas. Lo que quiero tener son 3 capas colocadas ...
  #1 (permalink)  
Antiguo 14/03/2009, 11:41
 
Fecha de Ingreso: septiembre-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Ayuda con capas

Hola.
Después de intentar bastantes cosas, me doy por vencido y os pido ayuda con las capas.

Lo que quiero tener son 3 capas colocadas una junto a la otra (en forma de 3 columnas), cada una de las cuales contiene una imagen.

Quiero que las imágenes se encuentren centradas en la capa (tanto horizontal como verticalmente) y que la capa entera funcione como link a otra página.

Además, quiero que al pasar el ratón por encima de ellas, el fondo de la capa cambie de color.

Os dejo a continuación la base del código que tengo hasta ahora, a ver si me podéis echar una mano.


Código:
ESTILO:

.left{
	height:150px;
	width:180px;
	float:left;
}

.center{
	height:150px;
	width:180px;
	float:left;
}

.right{
	height:150px;
	width:180px;
	float:left;
}
.navenlace6{
	margin:0;
	padding: 0px;
	text-decoration: none;
	width: 540px;
	height:150px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	display: block;
	float:left;
}
.navenlace6 A{
	display: block;
	text-decoration: none;
}
.navenlace6 A:hover{
	background-color: #F5F5F5;
}



Código:
Código Web:

<DIV class="navenlace6">

<DIV class="left">
    <div align="center">
    <p><img src="pictures/m-182.jpg" width="150" height="113" /></p>
    </div>
</DIV>

<DIV class="center">
    <div align="center">
    <p><img src="pictures/m-182.jpg" width="150" height="113" /></p>
    </div>
</DIV>

<DIV class="right">
  <div align="center">
  <p><img src="pictures/m-inc.jpg" width="150" height="113" /></p>
  </div>
</DIV>

</DIV>
  #2 (permalink)  
Antiguo 14/03/2009, 15:26
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años
Puntos: 4
Respuesta: Ayuda con capas

Hola, te doy una pista de cómo hacerlo:

Código:
ul  {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
li { margin: 0px;
padding: 0px;
display: inline;}

a {
	height:100px;
	width:180px;
	display: block;
	float: left;
	background: #990;
	text-align: center;
	padding-top: 50px;
}
a:hover { background: #900; }

HTML:
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
  #3 (permalink)  
Antiguo 19/03/2009, 12:37
 
Fecha de Ingreso: septiembre-2008
Mensajes: 9
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Ayuda con capas

Muchas gracias, es bastante mas sencillo que lo que yo intentaba, y funciona muy bien.

Pero ahora tengo un nuevo problema: ¿cómo puedo compatibilizar tu código con el mío, en el que ya tenía definidos para la misma página otros atributos para 'a' -que deben seguir estando?

Un saludo
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 07:12.