Foros del Web » Creando para Internet » CSS »

Escalar div con imagen (no de fondo) segun resolucion de pantalla

Estas en el tema de Escalar div con imagen (no de fondo) segun resolucion de pantalla en el foro de CSS en Foros del Web. Buenas a todos, soy nueva por aqui y he estado echando un ojo a los post relacionados pero no me aclaro, a ver si podeis ...
  #1 (permalink)  
Antiguo 11/09/2012, 14:51
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Pregunta (AYUDA) Escalar div con imagen (no de fondo) segun resolucion de pantalla

Buenas a todos, soy nueva por aqui y he estado echando un ojo a los post relacionados pero no me aclaro, a ver si podeis echarme una mano... sería de gran ayuda.
Os comento la estructura de mi web: (html y css)
- Cabecera(Nombre y menu) con anchura y altura fijos 1000px y 100px respectivamente.
- Contenedor en el que va un slider (el cual quiero redimensionar para que me salga al tamaño correspondiente según la resolucion mayor a 1000px de ancho y 768px de alto.
- Frase con anchura y altura fijos y con las mismas medidas que la cabecera. Esta capa se verá siempre en el pie de la pagina, independientemente de la resolucion de la pantalla (siempre que sea mayor de las medidas que os he comentado) ya que debajo de esta capa va otra frase y un pie de pagina que si el usuario baja el scroll se verá y si no no.

La cuestion es, cómo hago para que la capa de la frase se me quede siempre fija ahi sin importar la resolucion y al mismo tiempo se me escale el slide??

No se si me he explicado bien, si es necesario que copie algo de codigo o lo que sea, agradeceria mucho vuestra ayuda, no se que hacer, he mirado lo del media scream pero no me entero de nada, no se por donde tirar...

Gracias de antemano.
Un saludo :)

Última edición por belap; 11/09/2012 a las 15:03
  #2 (permalink)  
Antiguo 11/09/2012, 21:11
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 12 años, 4 meses
Puntos: 86
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Si quieres que tus contenidos se escalen utiliza porcentajes para los div..saludos!
__________________
Saludos!
----------------------------------------------------------
  #3 (permalink)  
Antiguo 14/09/2012, 03:06
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 13 años, 10 meses
Puntos: 28
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Hola, la frase dentro un div al que le defines la propiedad position:fixed;
Y como te comentó Flashmax, al contenedor del slider le estableces su tamaño en porcentajes en vez de en píxeles. El % excato lo sacas por el cálculo en función de lo que necesites.
saludos
__________________
diseño web
  #4 (permalink)  
Antiguo 23/09/2012, 07:55
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Probé con porcentajes pero no me hace absolutamente nada, igual el problema es que quiero que sea solo el contenedor y no la cabecera ni la frase?? no se... gracias de todas formas, pero sigo igual que antes :(
  #5 (permalink)  
Antiguo 23/09/2012, 08:01
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Cita:
Iniciado por tresj Ver Mensaje
Hola, la frase dentro un div al que le defines la propiedad position:fixed;
Al darle position:fixed, me sale al pie como quiero pero no m respeta el centrado ni las capas siguientes que tienen que ir debajo, yo lo que quiero es que se quede fija pero no que flote digamos.. porque así se me sobrepone a todas, no se si me explico.
  #6 (permalink)  
Antiguo 23/09/2012, 10:48
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Código CSS:
Ver original
  1. @media (min-width:1000px) {
  2.     #slider {
  3.         width: 600px; // El ancho que quieras cuando la resolución sea mayor que 1000px
  4.     }
  5. }
Todo lo que pongas dentro de @media (min-width) {} sólo ocurrirá cuando el ancho del navegador sea más de 1000px.
__________________
(:
  #7 (permalink)  
Antiguo 23/09/2012, 11:46
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Cita:
Iniciado por Bonez Ver Mensaje
Código CSS:
Ver original
  1. @media (min-width:1000px) {
  2.     #slider {
  3.         width: 600px; // El ancho que quieras cuando la resolución sea mayor que 1000px
  4.     }
  5. }
Todo lo que pongas dentro de @media (min-width) {} sólo ocurrirá cuando el ancho del navegador sea más de 1000px.


Gracias Bonez por tu respuesta, pero no se porque no me funcionan los @media, tambien los probé.

He conseguido escalar con los max-width, max-height. pero ahora el problema es que la capa de la frase, si le pongo position absolute y bottom 1px, para que quede siempre en la parte de abajo de la pantalla, las capas que tienen que salir por debajo se me suben, quedando la de la frase transparente y deben quedar por debajo, sin verse...
  #8 (permalink)  
Antiguo 23/09/2012, 12:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Debería de funcionarte.

Fíjate aquí: http://jsfiddle.net/NcUjj/
__________________
(:
  #9 (permalink)  
Antiguo 23/09/2012, 14:06
(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

Hola todos:

Tal vez te sirva leer este tema, belap.

dividir pantalla en 4 divs automaticamente #16

Que sigue acá

modificar el aspecto del plugin AnythingSlider

Aunque estás planteando correctamente el problema, quizá debas hacerlo en otro subforo.
Bah, se me ocurre...
  #10 (permalink)  
Antiguo 23/09/2012, 17:46
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 16 años, 4 meses
Puntos: 19
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Supongo que te refieres a una estructura web muy usada hoy en día similar a esta:
http://www.gironactiva.com/landing

Yo para hacer esto hago lo siguiente:

- wrapper con un width 100%

DENTRO DEL WRAPPER:
- header, con un width de 1000px, position relative, margin:auto
- slider con un width de 100%
- contenido, con un width de 1000px, position relative, margin:auto
  #11 (permalink)  
Antiguo 25/09/2012, 08:56
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Cita:
Iniciado por chrishxc Ver Mensaje
Supongo que te refieres a una estructura web muy usada hoy en día similar a esta:
[URL="http://www.gironactiva.com/landing"]http://www.gironactiva.com/landing[/URL]

Exacto! a eso mismo me referia, pero a su vez, que el contenedor se escale tb, quiero decir, que en el caso de esa pagina por ejemplo, dejara margenes alrededor del texto de la parte oscura, tambien por arriba y abajo, no solo a los lados, mantenidose siempre centrado. no se como hacerlo...

Respecto a que se escale.. me sale a medias, cuando llega a una medida minima quiero que salga igual que en esa pagina, pero a mi se me sobreponen las capas... :S
  #12 (permalink)  
Antiguo 25/09/2012, 09:02
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Os dejo mi html y css por si podeis ayudarme...

Muchas gracias

Código HTML:
Ver original
  1. * * <div id="contenedor">
  2. * * * * <div id="cabecera">
  3. * * * * * * <ul>
  4. * * * * * * * * <li class="inicio"><a href="index.html" title="Inicio">Inicio</a></li>
  5. * * * * * * * * <li class="menu"><a href="contacto.html" title="Contacto">Contacto</a></li> * * * * * * * *
  6. * * * * * * * * <li class="menu"><a href="galeria/galeria.html" title="Galería">Galeria</a></li>
  7. * * * * * * * * <li class="menu"><a href="eventos.html" title="Eventos">Eventos</a></li>
  8. * * * * * * </ul>
  9. * * * * </div>
  10. * * * * <div id="centro">
  11. * * * * * *
  12. * * * * * * * * * * <a href="#"><img src="images/imagen.jpg" *border="0" style="box-shadow: 2px 2px 5px black"/></a>
  13. * * * * * * * *
  14. * * * * * * </div>
  15. * * * * </div>
  16. * * * * <div id="frasecorta">
  17. * * * * * * <p>FRASE CORTA</p>
  18. * * * * </div>
  19. * * </div>
  20. * * <div id="fraselarga">
  21. * * * * <p>Esta es la frase larga</p>
  22. * * </div>
  23. * * <div id="pie">
  24. * * * * <p>Pie de página</p>
  25. * * </div>
  26. </body>

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #contenedor{
  4. * * position:relative;
  5. * * height:100%;
  6. }
  7. *
  8. #cabecera{
  9. * * border:#000;
  10. * * border-width:2px;
  11. * * border-style:solid;
  12. * *
  13. * * min-width:980px;
  14. * * max-width:1200px;
  15. * * height:100px;
  16. * * margin-left:auto;
  17. * * margin-right:auto;
  18. }
  19. *
  20. .inicio{
  21. * * text-decoration:none;
  22. * * list-style:none;
  23. * * font-family:"Trebuchet MS", Geneva, sans-serif;
  24. * * float:left;
  25. * * font-size:67px;
  26. * * font-weight:bold;
  27. }
  28. *
  29. .inicio a{
  30. * * text-decoration:none;
  31. * * color:#000;
  32. }
  33. *
  34. .inicio a:hover{
  35. * * text-decoration:none;
  36. * * color:#000;
  37. }
  38. *
  39. .menu{
  40. * * text-decoration:none;
  41. * * list-style:none;
  42. * * font-family:maiandra_gdregular, Geneva, sans-serif;
  43. * * font-size:13px;
  44. * * font-weight:bold;
  45. * * float:right;
  46. * * margin-left:10px;
  47. }
  48. *
  49. .menu a{
  50. * * text-decoration:none;
  51. * * color:#999;
  52. }
  53. *
  54. .menu a:hover{
  55. * * text-decoration:none;
  56. * * color:#000;
  57. }
  58. *
  59. #centro{
  60. * * border:#000;
  61. * * border-width:2px;
  62. * * border-style:solid;
  63. * * min-width:980px;
  64. * * max-width:1200px;
  65. * * margin-left:auto;
  66. * * margin-right:auto;
  67. * * text-align:center;
  68. }
  69. *
  70. #frasecorta{
  71. * * border:#000;
  72. * * border-width:2px;
  73. * * border-style:solid;
  74. * *
  75. * * min-width:980px;
  76. * * max-width:1200px;
  77. * * height:100px;
  78. * * margin-left:auto;
  79. * * margin-right:auto;
  80. * *
  81. * * font-family:maiandra_gdregular, Geneva, sans-serif;
  82. * * font-size:30px;
  83. * * font-weight:bold;
  84. * * text-align:center;
  85. * * position:absolute;
  86. * * bottom:0px;
  87. }
  88. *
  89. #fraselarga{
  90. * * border:#000;
  91. * * border-width:2px;
  92. * * border-style:solid;
  93. * *
  94. * * min-width:980px;
  95. * * max-width:1200px;
  96. * * height:100px;
  97. * * left:auto;
  98. * * right:auto;
  99. * *
  100. * * text-align:justify;
  101. * * font-family:maiandra_gdregular, Geneva, sans-serif;
  102. * * font-size:17px;
  103. * * color:#808080;
  104. * * font-weight:normal;
  105. * * position:absolute;
  106. * * bottom:-102px;
  107. }
  108. *
  109. #pie{
  110. * * width:99%;
  111. * * background-color:#000;
  112. * * text-align:center;
  113. * * position:absolute;
  114. * * bottom:-147px;
  115. }
  116. *
  117. #pie, #pie a, #pie a:hover{
  118. * * font-family:maiandra_gdregular, Verdana, sans-serif;
  119. * * font-size:17px;
  120. * * color:#FFF;
  121. * * font-weight:normal;
  122. * * text-align:center;
  123. * * text-decoration:none;
  124. }
  #13 (permalink)  
Antiguo 25/09/2012, 14:33
(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

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.
  #14 (permalink)  
Antiguo 27/09/2012, 08:08
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Furoya, gracias por tu respuesta, pero no es eso lo que busco, te dejo un enlace de lo que busco exactamente...
http://stevemccurry.com/galleries/moveable-feast
Esa página exactamente, que se escale. cuando la pantalla es muy grande, aparecen margenes y si es pequeña, se escala hasta una determinada resolucion.

Y en mi caso, por debajo de las miniaturas apareceria la frase larga y el pie (esto lo he conseguido con posiciones absolutas y margenes) pero no hay manera de centrarlo.
  #15 (permalink)  
Antiguo 27/09/2012, 13:45
(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.
  #16 (permalink)  
Antiguo 02/10/2012, 08:00
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Gracias de nuevo por la ayuda.

Voy por partes.
- El banner, en los ejemplos que me pusisteis, se queda fijo siempre, igual no me explique bien, pero yo necesitaba que cnd bajaras el scroll subiera como una parte mas de la web, no se quedara fijo siempre en el mismo sitio.

- El slider si es JS, aunk las miniaturas no van juntas, es otro JS diferente. Yo no se de JS y no se editarlo, entiendo mas o menos lo que quiere decir cada linea pero poco mas..

- Lo que no podia centrar era la capa "frasecorta" y "fraselarga". Consegui que ambas capas se posicionaran como queria pero entonces se me alineaban a la izda, y necesitaba que estuvieran a la derecha.

- Lo que necesito es que el slider, se redimensione segun las resoluciones de la pantalla, pero con un tamaño maximo y minimo, no se si me explico, que máximo pueda medir 700 de alto o de ancho dependiendo de la foto que salga.. por ejemplo.
Entonces si es mayor la pantalla, que deje margenes en blanco arriba y abajo de la misma forma que lo hace con los lados.

Yo no pretendo que me hagan el trabajo, simplemente intento saber por donde tirar.

Ya intente copiar la pagina pero debi hacer algo mal... porque tambien me fallaba.
  #17 (permalink)  
Antiguo 02/10/2012, 10:17
(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

Cita:
Iniciado por belap Ver Mensaje
- El banner, en los ejemplos que me pusisteis, se queda fijo siempre, igual no me explique bien, pero yo necesitaba que cnd bajaras el scroll subiera como una parte mas de la web, no se quedara fijo siempre en el mismo sitio.


Perfecto, eso lo entendimos. Ya anda.


- El slider si es JS, aunk las miniaturas no van juntas, es otro JS diferente. Yo no se de JS y no se editarlo, entiendo mas o menos lo que quiere decir cada linea pero poco mas..

Eso es raro. No voy a desarmar ese sitio, pero si los thumbnails funcionan con el slider son el mismo escript, aunque sean archivos separados.
De todas formas, no le hace diferencia. Ya está resuelto en mi ejemplo con CSS. Y está basado en el tuyo.


- Lo que no podia centrar era la capa "frasecorta" y "fraselarga". Consegui que ambas capas se posicionaran como queria pero entonces se me alineaban a la izda, y necesitaba que estuvieran a la derecha.

No. Necesitabas que estuvieran centradas. Pero es un error al escribir tu lista, igual se entiende.
También está resuelto en mi ejemplo. El pie y el texto (si mal no recuerdo) están centrados. El método es el mismo.


- Lo que necesito es que el slider, se redimensione segun las resoluciones de la pantalla, pero con un tamaño maximo y minimo, no se si me explico, que máximo pueda medir 700 de alto o de ancho dependiendo de la foto que salga.. por ejemplo.
Entonces si es mayor la pantalla, que deje margenes en blanco arriba y abajo de la misma forma que lo hace con los lados.

Yo no pretendo que me hagan el trabajo, simplemente intento saber por donde tirar.



No. No podés. Si no sabés javascript no vas a meterte a reescribir un plugin o library. Y yo tampoco voy a meterme a estudiar eso, porque antes lo escribo (que me sale más barato). Si alguien lo quiere desarmar para decirte por dónde tenés que ir, al no saber JS ¿qué garantía hay de que le entiendas?
Te lo van a tener que hacer. De todas formas -digo, por si hay un alma caritativa- el drama es que si el espacio en altura es mucho, el encabezado queda arriba, el falso pie abajo, y el carrousel centrado en horizontal pero pegado al header. Lo que querés es que también se centre verticalmente en el espacio entre encabezado y falso pie de página.
Lo del tamaño mínimo ya está previsto en el script, y por lo que vi, funciona.
  #18 (permalink)  
Antiguo 03/10/2012, 08:33
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Faroya, solo voy a decirte que gracias por la ayuda que me prestaste anteriormente. No voy a responderte al ultimo mensaje.
No se si no me explico bien o no me entiendes y no quiero entrar en ello, creo que es un foro para pedir y dar la ayuda que cada uno pueda y quiera y que otras personas que entren pueda servirle tb. Nadie esta obligado a nada.
Asik gracias de nuevo a todos.
  #19 (permalink)  
Antiguo 03/10/2012, 10:05
(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

No sé quién es "Faroya". Por mi parte, de nada.

Una pregunta general : ¿puede ser que mi ejemplo no se vea en algún navegador?. Estoy tratando de darle el beneficio de la duda a belap, porque tanta necedad ya parece burla.

La idea es que aparezca un encabezado arriba, luego una imagen centrada en un contenedor, que se ajusta hasta un límite (después ya no se achica). Al final de la ventana aparece una "frase corta" centrada, siempre al pie sin importar la altura del panel del documento. Si desplazamos hacia abajo, vemos que el documento sigue después de esa frase, y aparece una "frase larga" con un pie de página (centrado).

Lo que habría que probar (con CSS, porque con JS sería fácil) es centrar verticalmente el contenedor de la imagen (o la imagen) en la altura que tenga disponible.
Pero ya me harté, y lo dejo por si alguien quiere probar.

Si el drama es con IE 9 / 10; entonces puede que belap tenga algo de razón... no lo probé con esos navegadores, porque no tengo ninguno.



[edit]

Perdón que vuelva, pero resulta que no había visto el "-1" de ... ¡adivinen quién!

Síiii! ¡belap!.

¿Se puede saber, mi (poco) estimado, el motivo de la valoración negativa?. Porque resulta que olvidaste ponerlo después del click. Y es obligatorio.

[/edit]

Última edición por furoya; 03/10/2012 a las 10:43
  #20 (permalink)  
Antiguo 04/10/2012, 03:30
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 12 años, 2 meses
Puntos: 1
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

Furoya, perdón.
No si al final resultará que sabrás mejor que yo lo que estoy buscando y como se me ve en el navegador... lo que me faltaba...
De todas formas solo dije que no era lo que buscaba la "frasecorta" que en tu ejemplo se quedaba siempre fija.

Repito lo de ayer, si no quieres ayudar, o no sabes o lo que sea, no respondas... nadie te obliga. y sinceramente para responder con faltas de respeto y prepotencia.. mejor no digas nada, Por eso mi -1 (que no será muy obligatorio cuando deja ponerlo sin escribir nada)

Si se pregunta es por algo... que tu "sepas todo" no significa que los demás también, si no no preguntariamos.
Basta con no contestar o decir que lleva demasiado trabajo o lo que sea, de buenas maneras y con educación, que creo que no cuesta nada.
  #21 (permalink)  
Antiguo 04/10/2012, 08:36
(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

Mirá, belap. Tenés (además de una necedad inconmensurable) un concepto muy errado de lo que es un foro de debates.

Aquí no estamos para resolverle los dramas a nadie. Estamos para debatir sobre tecnología web para estilos. Si respondemos corrigiendo o aportando un ejemplo, es para que quede como "tutorial" y quienes vienen a aprender tengan una referencia sobre cómo se maneja alguna situación más o menos complicada de diseño. De ninguna manera la idea es dar una "respuesta personalizada" a quien postea. Preguntas como la tuya -en el peor de los casos- puede ser una excusa para enseñar algo nuevo.

Pero aquí ni eso, porque lo que estás planteando es CSS (o javascript, para el carrousel). Y como éste es un foro especializado, si posteás tenés que saber CSS (y javascript, para el carrousel), porque meterte de paracaidista es una falta de respeto. Insisto : estamos en un foro de debates especializado, no es un "foro de amigos", ni un soporte técnico, ni una mesa de ayuda.

Una vez que tenemos claro esto, entonces sí podemos venir a preguntar, porque lo vamos a hacer con más humildad (sabiendo que estamos "en falta") y con la mayor cantidad y calidad de datos posibles. Porque es verdad que no hay obligación de responder un post si uno no quiere; pero sí hay obligación de postear correctamente.
Si no lo hacés, no podés quejarte de mis modos. Que tampoco son nada personal. Como ya se viene explicando desde hace mucho, pero mucho tiempo, zamarrear a los desubicados es la manera de asegurarnos de que entiendan cómo deben comportarse, o que se retiren. Porque las buenas maneras y la educación no funcionaron y nos llenamos de gente que está arruinando el sitio.
La gente normal lo entiende en seguida. La que no, se retoba, y le caen mensajes como éste.
O peores, a vos te estoy teniendo demasiadas contemplaciones, porque me agarraste en un día feliz.


Volviendo a tu página, voy a repetir mi pregunta : ¿en qué navegador no se ve bien?.
Recién lo pude probar en un ¡IE6!, y la "frase corta" aparece "abajo", no se queda siempre fija, y se desplaza perfectamente con el documento. Como en FF15; Chr22 y Op12.
¿Estás viendo el ejemplo del mapa? ¿O todavía probás el el código de la vaca?


Como te estarás dando cuenta, el "-1" estuvo totalmente injustificado. Quien se lo merece sos vos. Y con respecto a la obligación de agregar un mensaje ... es un bug del Foro. Se supone que no podés ponerlo sin justificar, pero la verdad es que me parece bien que falle el validador. Eso nos ayuda a conocer mejor a quienes califican. Como en tu caso.


Lo que sí te debo es una disculpa por lo de "mi (poco) estimado".

No es que te estime mucho, el error fue olvidarme del género de quien me estaba valorando.
Es que me sigue pareciendo raro que haya tantas mujeres metidas a programadoras, y no me acostumbro.

La verdad es que no sé qué están haciendo aquí, en vez de estar en sus casas, lavando la ropa a mano, descalzas y embarazadas.



(Mmmm... Sigue faltando el emoticón del troglodita.)
  #22 (permalink)  
Antiguo 08/10/2012, 17:46
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 16 años, 4 meses
Puntos: 19
Respuesta: Escalar div con imagen (no de fondo) segun resolucion de pantalla

El ejemplo que has puesto es un javascript... en html y css se podría llegar a hacer, pero nunca tendrás este efecto (las fotos que se ponen abajo se sitúan dependiendo del espacio, la foto del medio se agranda según los píxeles que tiene).

No intentes hacer algo así en css y html, ya que encontrarás galerías de jquery que te pueden hacer algo similar.
  #23 (permalink)  
Antiguo 08/10/2012, 18:31
(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

Estás varios figurines atrasado, chrishxc. No sólo ya se lo explicamos (muchas veces), sino que el ejemplo que ella misma puso usa libraries a roletes.
Lo sabe perfectamente.

Etiquetas: html, redimensionar, resolución
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 05:59.