Foros del Web » Creando para Internet » CSS »

Problema con posible diseño liquido e img

Estas en el tema de Problema con posible diseño liquido e img en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/08/2011, 15:49
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 1 mes
Puntos: 13
Exclamación Problema con posible diseño liquido e img

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. body{
  6.     padding:0;
  7.     margin:0;
  8.  
  9. }
  10.  
  11. img{
  12.     width:100%;
  13.        height:100%;
  14. }
  15.  
  16. .all{
  17.     width:95%;
  18.     height:80%;
  19.     margin:auto;
  20. }
  21.  
  22. .imagen{
  23.     width:100%;
  24.     height:60%;
  25.     padding:0;
  26.     margin:auto;
  27. }
  28.  
  29. .menu{
  30.     width:100%;
  31.     height:10%;
  32. }
  33.  
  34. .footer{
  35.     width:100%;
  36.     height:10%;
  37. }
  38. </head>
  39.  
  40. <div class="all">
  41.     <div class="imagen"><img src="imagen.png"  /></div>}
  42.     <div class="menu">sdfdsf</div>
  43.     <div class="footer">footer</div>
  44.  </div>
  45. </body>
  46. </html>

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

Etiquetas: diseño, html, img, posible
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:21.