Problema con posible diseño liquido e img

richicasas · #1 (**permalink**) 13/08/2011, 15:49

Hola a todos, resulta que tengo que crear un diseño liquido de una web. Para empezar debo mostrar una imagen grande y debajo un menu y un footer. Con el siguiente codigo busco generar este diseño adaptable a cualquier resolucion. El problema es que en 800*600 se ve bien ( NO genera el scroll ni ver ni horiz), pero en resoluciones mayores ( la mia es 1300*800) se genera un scroll vertical donde la imagen ocupa todo el 100% de alto y debajo quedan los demas elementos. Alguien me puede indicar como hacer para que nunca se genere scroll PERO siempre manteniendo los elementros dentro. Este es el codigo: (Por favor no me digan que con overflow:hidden, ya que lo unico que hace es NO GENERAR SCROLL pero esconde los demas elementos.)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
body{
    padding:0;
    margin:0;
 
}
 
img{
    width:100%;
       height:100%;
}
 
.all{
    width:95%;
    height:80%;
    margin:auto;
}
 
.imagen{
    width:100%;
    height:60%;
    padding:0;
    margin:auto;
}
 
.menu{
    width:100%;
    height:10%;
}
 
.footer{
    width:100%;
    height:10%;
}
</style>
</head>
 
<body>
<div class="all">
    <div class="imagen"><img src="imagen.png"  /></div>}
    <div class="menu">sdfdsf</div>
    <div class="footer">footer</div>
 </div>
</body>
</html>

He intentado colocando las medidas dentro del IMG pero igual pasa lo mismo.