tres columnas con imagenes con link 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
}
