Hola, de nuevo por aquí.
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;
}