Ver Mensaje Individual
  #13 (permalink)  
Antiguo 25/09/2012, 14:33
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Hola de nuevo.

Habías empezado bien, belap. No eras muy precisa, pero tu planteo se entendía.
Ahora ya no sé si entiendo.

Antes que nada, explico para quien no se tomó el trabajo de mirar los enlaces que dejé.
El problema -en principio- es CSS, pero como está la mención de un slider, y estos suelen ser javascript con alguna library enlazada, hay que mencionar que usan "su propio CSS". Y pisan los que tenga el documento, así que hay que considerar la posibilidad de meter mano en ese escrip. Y éste no es el foro apropiado.

Por lo demás, lo que yo entendí que querías era esto

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>pirulo</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */

html, body{
width:100%;
height:100%;
margin:0;
}

#contenedor{
 position:relative;
 height:100%;
}

#cabecera{
 border:#000000;
 border-width:2px;
 border-style:solid;
 min-width:980px;
 max-width:1200px;
 height:100px;
 margin-left:auto;
 margin-right:auto;
}

.inicio{
 text-decoration:none;
 list-style:none;
 font-family:"Trebuchet MS", Geneva, sans-serif;
 float:left;
 font-size:67px;
 font-weight:bold;
}

.inicio a{
 text-decoration:none;
 color:#000000;
}

.inicio a:hover{
 text-decoration:none;
 color:#000000;
}

.menu{
 text-decoration:none;
 list-style:none;
 font-family:maiandra_gdregular, Geneva, sans-serif;
 font-size:13px;
 font-weight:bold;
 float:right;
 margin-left:10px;
 padding:0 10px 0 0;
}

.menu a{
 text-decoration:none;
 color:#999999;
}

.menu a:hover{
 text-decoration:none;
 color:#000000;
}

#centro{
 border:#000000;
 border-width:2px;
 border-style:solid;
 min-width:980px;
 max-width:1200px;
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}

#frasecorta{
 border:#000;
 border-width:2px 0;
 border-style:solid;
 min-width:980px;
 width:100%;
 height:100px;
 left:0;
 font-family:maiandra_gdregular, Geneva, sans-serif;
 font-size:30px;
 font-weight:bold;
 text-align:center;
 position:fixed;
 bottom:0px;
 background-color:yellow;
}

#fraselarga{
 border:#000;
 border-width:2px;
 border-style:solid;
 margin:0 auto 100px;
 min-width:980px;
 max-width:1200px;
 height:100px;
 text-align:justify;
 font-family:maiandra_gdregular, Geneva, sans-serif;
 font-size:17px;
 color:#808080;
 font-weight:normal;
 posi tion:relative;
 bot tom:-102px;
 background-color:fuchsia;
}

#pie{
 width:98%;
 background-color:#000;
 posi tion:fixed;
 bottom:-147px;
 font-family:maiandra_gdregular, Verdana, sans-serif;
 font-size:17px;
 color:#FFFFFF;
 font-weight:normal;
 text-align:center;
 text-decoration:none;
 margin:0 auto;
}
</style>
</head>
<body>
    <div id="contenedor">
        <div id="cabecera">
            <ul>
                <li class="inicio"><a href="index.html" title="Inicio">Inicio</a></li>
                <li class="menu"><a href="contacto.html" title="Contacto">Contacto</a></li>
                <li class="menu"><a href="galeria/galeria.html" title="Galería">Galeria</a></li>
                <li class="menu"><a href="eventos.html" title="Eventos">Eventos</a></li>
            </ul>
        </div>
        <div id="centro">
            
                    <a href="#"><img src="http://imageshack.us/a/img829/7145/lucreciaorloff.jpg" alt="imagen" border="0" style="box-shadow: 2px 2px 5px black"/></a>
                
            </div>
        </div>
        <div id="frasecorta">
            <p>FRASE CORTA</p>
        </div>
    </div>
    <div id="fraselarga">
        <p>Esta es la frase larga. Esta es la frase larga. 
Esta es la frase larga. Esta es la frase larga. </p>

        <p id="pie">Pie de página</p>
    </div>

    <hr>
</body>
</html>
Aquí existe un 'falso' pie de página, que sería la "frase corta". En realidad es una especie de báner, como en el ejemplo de chrishxc ( ¿cómo se pronuncia ese nick?), que está a la derecha y se mantiene en su altura, mientras el documento se desplaza para ver lo que hay debajo. En tu página, estaría abajo y allí se mantiene. Al desplazar, descubrimos que hay otro 'verdadero' pie de página, que es la frase larga seguida del pie propiamente dicho.

Aunque la altura del documento crezca por la resolución de pantalla, ese verdadero pie queda debajo (o más bien, detrás) de la frase corta, y se ve al desplazar el documento.

De cualquier forma, te recomiendo revisar eso de las alturas mínimas, porque estás previendo resoluciones muy altas de movida. Y en la mayoría de los casos sí se te va a encimar el báner al slider; es absolutamente lógico. En 800 × 600 la imagen y el encabezado ni caben. Al menos con la que puse yo ... porque no sé si te fijaste que se te olvidó poner tu imagen con dirección absoluta y no tengo idea de cuánto mide realmente.