Foros del Web » Creando para Internet » CSS »

Problema con scroll e imagen centrada

Estas en el tema de Problema con scroll e imagen centrada en el foro de CSS en Foros del Web. Hola que tal, Antes de nada dar las gracias a los miembros del foro que me han salvado de muchos apuros con sus conocimientos y ...
  #1 (permalink)  
Antiguo 25/09/2009, 05:28
Avatar de lord_ocram  
Fecha de Ingreso: septiembre-2009
Ubicación: Málaga (España)
Mensajes: 33
Antigüedad: 8 años, 2 meses
Puntos: 1
Problema con scroll e imagen centrada

Hola que tal,
Antes de nada dar las gracias a los miembros del foro que me han salvado de muchos apuros con sus conocimientos y soluciones.
No tengo muchos conocimientos en lo que a lenguaje html se refiere, pero hasta ahora con las webs que he hecho no he tenido problemas y siempre he salido de los apuros copiando un código de aquí y de allá, uso el dreamweaver cs3.

Mi problema es el siguiente;

Estoy haciendo el index de una web, y la idea es que salga una imagen (750px X 536px) en centro vertical y horizontal, independientemente de la resolución que use... me costó, pero lo conseguí.
Pero ahora tengo un problema que me está derritiendo el cerebro de tanto darle vueltas.
Cuando veo el index en resolución 800x600 naturalmente la imagen sale en el centro, pero al ser mas grande que la ventana del navegador normalmente deberia salir un scroll vertical y horizontal para poder verla, pero nada no sale ni en IE8 ni en firefox. En las demás resoluciones sale bien puesto que la imagen se ve completa, pero en 800x600 la imagen sale por la mitad y no sale ningún scroll del navegador para ver el resto.

Espero que me podais ayudar, estoy ya desesperado...
Esto es lo que tengo;


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
div {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table
}
span {
display: table-cell;
vertical-align: middle
}

img {display: block; border: 0; margin: 1em auto}

body {
background-color: #000000;
}
</style>
</head>

<body>

<div><span><img src="fondo_index03.jpg" alt="" width="750" height="536" /></span></div>

</body>
</html>

Muchas gracias por anticipado!!
  #2 (permalink)  
Antiguo 27/09/2009, 15:21
Avatar de lord_ocram  
Fecha de Ingreso: septiembre-2009
Ubicación: Málaga (España)
Mensajes: 33
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con scroll e imagen centrada

Venga tios, que seguro que alguien sabe como hacerlo...
  #3 (permalink)  
Antiguo 27/09/2009, 15:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con scroll e imagen centrada

Mejor borro todo lo que tenía escrito, tío, y sólo dejo la sugerencia de que utilices el buscador, tío.
Porque, tío, ejemplos de centrados, tío, se ha publicado un tocho, tío.

Un saludo, tío.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 27/09/2009, 15:38
Avatar de lord_ocram  
Fecha de Ingreso: septiembre-2009
Ubicación: Málaga (España)
Mensajes: 33
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con scroll e imagen centrada

Pero si el caso es que el centrado está bien, lo que no entiendo es porque no sale el scrollbar cuando la imagen es demasiado grande.

Y creeme que he usado el buscador y probado muchas cosas, pero no hay manera.
  #5 (permalink)  
Antiguo 27/09/2009, 17:15
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Problema con scroll e imagen centrada

Hola lord_ocram

"Mejorando lo presente", a mí es que no termina de gustarme mucho tu código, así que te presento otro que cumple con lo que necesitas:

Código HTML:
<!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>Centrado de foto independientemente de la resolución de pantalla</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	background-color: #000;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#caja_foto {
	position: absolute;
	width: 750px;
	height: 536px;
	margin-left: -375px;
	margin-top: -268px;
	left: 50%;
	top: 50%;
	background-image:url('fondo_index03.jpg');
	border: 1px solid #444;
}
</style>
</head>

<body>
	<div id="caja_foto"></div>
</body>

</html> 
Pruébalo y comenta algo.

Bye
  #6 (permalink)  
Antiguo 27/09/2009, 19:37
Avatar de lord_ocram  
Fecha de Ingreso: septiembre-2009
Ubicación: Málaga (España)
Mensajes: 33
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con scroll e imagen centrada

Tio eres un máquina!!! Muchisimas gracias me has quitado un peso de encima. Mucho mejor, donde va a parar...

Cual es el fundamento de este código??? A ver si me explico, como se consigue el que la imagen se quede siempre centrada, por lo que veo la clave está en esto;

position: absolute;
width: 750px;
height: 536px;
margin-left: -375px;
margin-top: -268px;
left: 50%;
top: 50%;

Lo he visto hacer en otros sitios pero no me llegaba a funcionar eso de poner valores negativos a los margenes.
Me gustaria saberlo, porque lo bueno de todo esto es aprender.

Lo que he estado intentando insertar el contador de visitas debajo de la imagen, pero me lo manda a la esquina superior izquierda de la pantalla... sabrias alguna forma de ponerlo?? Si no, no pasa nada, tampoco me disgusta mucho en la esquina.

De verdad, gracias por tu tiempo. Saludos!!!
  #7 (permalink)  
Antiguo 27/09/2009, 20:30
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Problema con scroll e imagen centrada

Efectivamente, el centrado absoluto en la pantalla (sin importar la resolución), se hace con estos valores:

position: absolute;
width: 750px; /* ancho de la caja: modificable según necesidades */
height: 536px; /* alto de la caja: modificable... */
margin-left: -375px; /* este margen siempre es la mitad del ancho, en negativo */
margin-top: -268px; /* este margen siempre es la mitad de la altura, en negativo */
left: 50%; /* este valor es imprescindible para conseguir el centrado en el ancho */
top: 50%; /* este valor es imprescindible para conseguir el centrado en la altura */

La cajita para el contador de visitas debe ser muy fácil de ubicar en el sitio que quieras. Si quieres pon los valores de esa caja y el sitio en el que deseas que aparezca y lo resolvemos.

Bye
  #8 (permalink)  
Antiguo 28/09/2009, 05:14
Avatar de lord_ocram  
Fecha de Ingreso: septiembre-2009
Ubicación: Málaga (España)
Mensajes: 33
Antigüedad: 8 años, 2 meses
Puntos: 1
Respuesta: Problema con scroll e imagen centrada

Gracias por la explicación, me ha quedado todo muy claro.
Me surgió un problema con el que no contaba, y es que en la imagen de fondo tenia que poner 4 zonas interactivas, pero no ha habido problema, he eliminado el background y lo he puesto como imagen y ya si me permitía poner zonas interactivas y de paso se me ha arreglado lo del contador y lo he podido poner donde quería. No pongo foto porque no me permiten enlaces.

Todo ha quedado así;
Código HTML:
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrado de foto independientemente de la resolución de pantalla</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	background-color: #000;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#caja_foto {
	position: absolute;
	width: 750px;
	height: 536px;
	margin-left: -375px;
	margin-top: -268px;
	left: 50%;
	top: 50%;
	border: 1px solid #444;<br />
}
</style>
</head>

<body>
<div id="caja_foto">
  <div align="center"><img src="fondo_index03.jpg" width="750" height="536" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="124,148,625,299" href="#" /><area shape="rect" coords="11,472,167,528" href="#" /><area shape="rect" coords="293,460,471,529" href="#" /><area shape="rect" coords="595,470,741,530" href="#" /></map>
    <!-- http:/contadores.miarrobacom  -->
      <script type="text/javascript" src="http:/contadores.miarrobacom/ver.php?id=587178"></script>
  </div>
<!-- http:/contadores.miarrobacom  --></div>
</body>


</html> 
Gracias por la ayuda, de verdad.
  #9 (permalink)  
Antiguo 28/09/2009, 06:42
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Problema con scroll e imagen centrada

Me alegra saber que te haya servido y también que hayas podido añadir por tí mismo los cambios que necesitabas.

Hasta otra...

Bye
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 04:45.