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

De nada.
Y cada vez entiendo menos.

El ejemplo que confirmaste primero no tiene nada de eso. Lo único es un báner fijo, que ya te había resuelto tresj, yo solamente le di forma (y ahora parece que no te sirve); el escalado es algo que ya resolviste con porcentajes, bloques de ancho completo y/o contenido centrado. Lo de ponerle un límite al reducir la ventana, también.

En el enlace que dejaste, el slider es javascript, se redimensiona con javascript (ni lo abrí, pero me la juego) y seguramente las miniaturas las ubica con el mismo escrip, aunque lo puede hacer con CSS. De esa forma te quedan siempre abajo y recién al desplazar el documento se ve que hay más texto.

¿Entonces qué más es lo que buscas?. Cualquier otra cosa es formato elemental de CSS. No puedes tener problemas para poner un margen.

¿Qué es lo que no puedes centrar? ¿El contenido del pie?
¡Si en el código que te dejé está centrado!

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:absolute;
 bottom:0px;
 background-color:yellow;
}

#fraselarga{
 border:#000;
 border-width:2px;
 border-style:solid;
 margin:0 auto;
 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;
 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/img546/2810/julianpuyal.jpg" alt="imagen" border="0" style="box-shadow: 2px 2px 5px black; width:50%;"/></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>
¿Lo que quieres centrar es el slider redimensionado?

· · ·

¿Y qué parte de que "eso lo hace el programa del slider" no comprendes?

¿Quieres que inventemos un CSS que haga lo mismo con algún carrousel que no lo tenga previsto, para no agregar más JS?


· · ·

Y bue.
De última, mira cómo está hecha esa página, y le copias el código.