Paso a contarles: Estoy armando esta página y el home está casi listo, pero como es la base para todo el resto, deseaba tenerlo bien a punto para luego continuar.
En la imágen que adjunto en el 1 se ve correctamente con Firefox, en el 2 se observa que los divs cambian de lugar, bajando un poco el que contiene la imágen, y no he podido descubrir el motivo.
Asimismo, otra consulta; en la imágen 3 puede verse el formato que yo deseaba de scroll, algo más delicado y que pasara más desapercibido, pero no encuentro como realizarlo, en algún sitio me pareció haber leído que es javascript.
Bueno, si alguien me puede dar una manito, indicándome qué leer ó donde buscar, agradecida.
Adjunto el código para ver si alguien me puede indicar cuál es el error para el desencuadre en IE.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> <head> <meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" /> <meta name="description" content="Dreamlight" /> <meta name="Keywords" content="Lámparas, Vitreaux, Vitró, iluminación, vidrios" /> <meta name="Author" content="Paola Andrea Magariños" /> <meta name="Language" content="es" /> <title>© Dreamlight</title> <!-- acceso a css --> <link href="dream.css" rel="stylesheet" type="text/css" /> <!--[if IE 6]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]--> </head> <body> <!--contenedor general--> <div id="contenedor"> <!--imágen del header--> <div id="cabecera"/> <h1>Dreamlight</h1> <h2>Vitrales artesanales</h2> <div><img src="images/header.jpg" alt="Imagen institucional" /></div> </div> <!--menu--> <div id="menu"> <ul> <li><a href="home.html">HOME</a></li> <li><a href="galeria.html">GALERIA</a></li> <li><a href="trabajos.html">TRABAJOS</a></li> <li><a href="contacto.html">CONTACTO</a></li> </ul> </div> <!--imagen fin header--> <div id="fincabecera"/> <div><img src="images/guarda.jpg" alt="Imagen de adorno" /></div> <!--cuerpo--> <div id="cuerpo"> <div class="imagen"></div> <div id="caja0"> <div id="caja1"></div> <div id="caja2"><div style="width: 478px; height: 125px; overflow: auto; padding: 11px"> <p>La creación de vitrales es un trabajo milenario que consiste en darle vida al cristal a través de toda la magia que le rodea. En la actualidad se siguen produciendo vitrales artesanales con temas diversos y la era moderna no solo exige la preservación de lo clásico sino la representación de un mundo dinámico en vidrio, creando un ambiente de alegría, paz, armonía, elegancia y exclusividad, pues cada vitral es diseñado y elaborado de acuerdo al lugar y espacio que tan especialmente fue designado para él.</p> <p>Ahora los temas principales no son los pasajes bíblicos; también se representan diseños contemporáneos, plasmados no sólo en ventanas sino en puertas, lámparas, articulos de decoración, recuerdos, etc. Los vitrales seguirán sobreviviendo gracias a la magia de su luz, que después de tanto tiempo ya es propia. La elaboración del vitral es un arte y nuestras manos el instrumento perfecto para la realización de estas obras artesanales, con diseños únicos de alta calidad.</p> </div></div> </div> <div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /> </div> <div class="corte"></div> <!--pie--> <div id="pie"> <img src="images/pie.jpg" alt="fondo decorativo" /> </div> </div> </body> </html>
Código:
/* alineación general */
* {margin:0; padding: 0;
}
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#35350e;
}
#contenedor {
display:block;
width: 760px;
position:absolute;
top:50%;
left:50%;
margin-top:-212px;
margin-left:-380px;
}
/* estilo de la cabecera */
#cabecera {width: 760px;
height: 92px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
display:none;
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #ffffff;
margin-bottom: 4px;
display:none;
}
/* menú */
#menu {background-color: #C2C299;
width: 760px;
height: 26px;
}
#menu ul {
list-style-type:none;
text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #606966;
line-height: 26px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #c2c299;
color: #35350e;
border: solid 1px #35350e;
line-height: 22px;
}
#fincabecera {width: 760px;
height: 32px;
}
/* contenido */
.imagen {width: 225px;
float: left;
border-right: solid 1px #c2c299;
}
.imagen img {float: left;
padding: 0px 0px 0px 0px;
}
#caja0 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background: url(images/fondotexto.jpg);
position: relative;
}
#caja1 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
#caja2 {position: absolute;
left: 30px;
top: 10px;
width: 450px;
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}
.corte {clear: both;}
/* pie */
#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}
