Foros del Web » Creando para Internet » CSS »

tres columnas con imagenes con link

Estas en el tema de tres columnas con imagenes con link en el foro de CSS en Foros del Web. Hola comunidad, logre poner tres columnas y cada una lleva una imagen propia y un link con texto. El problema es que en internet explorer ...
  #1 (permalink)  
Antiguo 09/01/2013, 22:14
 
Fecha de Ingreso: junio-2011
Ubicación: buenos aires
Mensajes: 3
Antigüedad: 13 años, 4 meses
Puntos: 0
Pregunta tres columnas con imagenes con link

Hola comunidad, logre poner tres columnas y cada una lleva una imagen propia y un link con texto.

El problema es que en internet explorer me rompe el estilo
y lo pone en cascada
pero en firefox no:



No se que habre hecho mal pero no se porque tambien algunos enlaces se rompen y usan los enlaces de estas tres columnas.

Vi que hay un efecto transparent overlay que cuando pasas el mouse por arriba se expande. como tiene esta pagina:

http://www.eldia.com.ar/

me gustaria lograr algo parecido


HTML:
Código:
	<div id="wrapperr">
	     <div class="left1">
			<div style="background: url('http://assets.psicofxp.net/img/portada/ef9723fa51.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	     <div class="left2">
			<div style="background: url('http://www.clarin.com/politica/Tierra-Imagen-Fragata-Libertad-Quedo_CLAIMA20130109_0020_24.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	     <div class="left3">
			<div style="background: url('http://www.clarin.com/mundo/Apoyo-Partidarios-Chavez-Cuba-AP_CLAIMA20130109_0036_25.jpg') no-repeat scroll 0 0 transparent;height:200px;width:300px; margin-top:1px;margin-bottom:-100px;"></div>
			  <div class="layover" style="z-index:1;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60">
			    <h3 style="font-size:18px; font-weight:bold; padding-left:12px; display:inline"><a href="http://laplatapolitica.com.ar/viewforum.php?f=7" style="color:white;">Chavez asumiria cuando mejore.</h3>
			  </div>
	     </div>

	 </div>

CSS:

Código:
.left1{
   position: relative;
   float: left;
   left: 5px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
   text-align:center;
}
.left2{
   position: relative;
   float: left;
   left: 15px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
}
.left3{
   position: relative;
   float: left;
   left: 25px;
   width: 300px;
   height: 200px;
   background-image: url("{T_THEME_PATH}/images/bg_header.png");
   background-color: #828282
}

.layover{
    height: 90px;
    position: relative;
    padding-top: 10px;
    width: 300px;
    color: #828282;
   	background-color: #000000
}

#wrapperr{
   position: relative;
   float: left;
   left: 0px;
   min-width: 650px;
   width: 950px;
   margin-bottom: 15px;
   background-color: #ffffff
}
  #2 (permalink)  
Antiguo 09/01/2013, 23:03
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 9 meses
Puntos: 181
Respuesta: tres columnas con imagenes con link

Hola,

No se que quieres decir con "internet explorer me rompe el estilo
y lo pone en cascada".


Los link seguramente no funcionan bien por que no los tienes cerrados correctamente.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------

Etiquetas: cascada, columnas, explorer, grid
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 00:58.