Poscionamiento Div (problema con resoluciones e IE)

skuder · #1 (**permalink**) 17/07/2012, 12:11

Hola, lo primero de todo presentarme , ya que es mi primer post. Os leo a menudo, pero nunca habia llegado a registrarme. Y es por una razon.

No consigo posicionar un Div, y que no se desmadre en IE.

Aqui mi codigo html

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LA CASONA DEL JOU</title>
<meta name="keywords" content="Asturias, Casa rural" />
<meta name="description" content="Casa rural en Asturias" />

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function thebackground() {
$('div.background img').css({opacity: 0.0});
$('div.background img:first').css({opacity: 1.0});
setInterval('change()',5000);
}
function change() {
var current = ($('div.background img.show')? $('div.background img.show') : $('div.background img:first'));
if ( current.length == 0 ) current = $('div.background img:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.background img:first') :current.next()) : $('div.background img:first'));
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
thebackground();
$('div.background').fadeIn(1000); // works for all the browsers other than IE
$('div.background img').fadeIn(1000); // IE tweak
});
</script>

<link rel="stylesheet" href="reset.css" media="all" />



<link rel="stylesheet" href="styles.css" type="text/css">

</head>
<body>

<div class="background" align="center">
<img src="images/p1.jpg" width="100%" height="66%" alt="pic1" />
<img src="images/p2.jpg" width="100%" height="66%" alt="pic2" />
<img src="images/p3.jpg" width="100%" height="66%" alt="pic3" />
</div>

<div id="menu">

<ul>

<img src="images/titulo.png" width="340" height="20" /></img>

<img src="images/separador.png" />
<li><a href="#" target="current" >INICIO</a></li>
<img src="images/separador.png" />
<li><a href="#" target="_parent" >LA CASA</a></li>
<img src="images/separador.png" />
<li><a href="imagenes.html" target="_parent">IMAGENES</a></li>
<img src="images/separador.png" />
<li><a href="entorno.html" target="_parent">ENTORNO</a></li>
<img src="images/separador.png" />
<li><a href="precios.html" target="_parent">ACTIVIDADES</a></li>
<img src="images/separador.png" />
<li><a href="precios.html" target="_parent">PRECIOS</a></li>
<img src="images/separador.png" />
<li><a href="precios.html" target="_parent">RESERVAS</a></li>
<img src="images/separador.png" />
<li><a href="llagarin.html" target="parent">EL LLAGARIN</a></li>
<img src="images/separador.png" />
<li><a href="contacto.html" target="_parent">CONTACTO</a></li>
<img src="images/separador.png" />
</ul>
</div>

<div class="marco">
<div class="cuerpo">

<div class="columna_derecha">
<h2>Derecha</h2>
Esta es la columna derecha, tiene un float right y entre
el ancho (270px), relleno (10px+10px) y bordes(1px + 1px)
tiene 292px;
</div>

<div class="columna_izquierda">
<h2>Izquierda</h2>
Esta es la columna izquierda, tiene un float right y entre
el ancho (170px), relleno (10px+10px) y bordes(1px + 1px)
tiene 192px;
</div>

<div class="columna_central">

</div>
</div>
<div class="pie">
La casona del Jou. 2012. Todos los derechos reservados. Webmaster: Skuder

</div>

</div>

</body>
</html>

Aqui mi archivo CSS:

Cita:

body {
background-color:#FFFFFF;
font-size:80%;
/*overflow: hidden;*/

}

div.background { position:absolute; z-index:-1; float:center; }
div.background img { position:fixed; list-style: none; left:0px; right:0px; top:0px; border-bottom: 4px solid #000000; }
div.background ul li.show { z-index:1400}

.marco {

margin-top:530px;
}

.cuerpo {

background: rgba(36, 36, 36, 0.6);
overflow-x:hidden;
overflow-y:auto; /* Hace que se ajuste a la columna más alta en ff */
height:100%; /* Hace que se ajuste a la columna más alta en ie6 */
}

.pie {
margin-top:20px;
background: rgba(36, 36, 36, 0.6);
text-align: center;

}

.columna_derecha {
float:right; /* Alineación a la derecha */
width:270px;
border:solid lightblue 1px;
padding:10px;
}

.columna_izquierda {
float:left; /* Alineación a la izquierda */
width:170px;
height:66%;
border:solid lightblue 1px;
padding:10px;
}

.columna_central {
margin-left:200px; /* Espacio para la columna izquierda */
margin-right:300px; /* Espacio para la columna derecha */

padding:10px;
}

#menu {
margin-top:5px;
float:center;
background-color: rgba(36, 36, 36, 0.6);

border:solid black 1px;
width: 100%;

}

#menu ul {
list-style: none;

}

#menu ul li {
display: inline;
}
#menu ul li a {
font: 10px/1 'CartoGothicStdBook', arial, serif;
padding:0px;
margin-left:5px;
margin-right: 8px;
color: #fff;
text-decoration: none;
vertical-align:text-top;

}
#menu ul li a:hover {
color: #f59c0f;
}

En resumen: Ahora tengo asignado un margin top de 530px, al div "marco". Este div debería estar en esa posción , debajo de la imagen. Pero cuando la resolucion de la pantalla es menor, al coger esos 500px, lo pone muy por debajo de donde yo la quiero. He probado varias formas para que me lo situe bien, pero IE siempre me lo muestra mal. Probé diferentes posicionamientos, ponerlo absolute, relative, pero como ya dije, siempre se desmadra, por algún sitio.

Aqui os pongo el enlace de la web, esta en un server gratuito temporalmente: http://casonadeljou.eshost.es/

Es por eso, que si alguien me puede indicar como solucionarlo, le estaría muy agradecido. Gracias por todo.

skuder · #2 (**permalink**) 18/07/2012, 10:04

Bueno, ya lo he arreglado, he usado un script para las distintas resoluciones.

Cita:

tengo 3 hojas de estilo que comprueban que resolucion tiene, imagino que es una solucion poco profesional, pero funciona. :) . Saludos