Foros del Web » Creando para Internet » CSS »

problema centrando verticalmente

Estas en el tema de problema centrando verticalmente en el foro de CSS en Foros del Web. Hola gente no consigo centrar verticalmente mi imagen de fondo respecto a la pantalla, es decir que se centra pero no como quiero, ya que ...
  #1 (permalink)  
Antiguo 05/04/2011, 12:43
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
problema centrando verticalmente

Hola gente no consigo centrar verticalmente mi imagen de fondo respecto a la pantalla, es decir que se centra pero no como quiero, ya que esta imagen tiene un fondo negro y siempre muestar el mismo fondo negro por arriba y por abajo independientemente cual sea la resolución con la que se vea la página.

Una imagen habla más que mil palabras


Uploaded with ImageShack.us
El css es este.
Código:
body {
margin:0 auto; 
overflow-x:hidden; overflow-y:auto;
}
#container{background:#000 url('images/bg.png')  no-repeat;background-position: center center; margin:0 auto; width:100%; height:100%}
No se porque deja tanto margen arriba y abajo con color negro de fondo, yo no quiero que el fondo negro salga sino es necesario.

Un saludo
__________________
Videotutoriales de Drupal
  #2 (permalink)  
Antiguo 05/04/2011, 13:56
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: problema centrando verticalmente

Pregunta básica: ¿el elemento que contiene a #container (o sea, HTML) tiene height: 100%? Me parece que no.

Si no quieres que el fondo sea negro, no pongas background: #000

Espero ayude.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #3 (permalink)  
Antiguo 05/04/2011, 14:00
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por Tedel Ver Mensaje
Pregunta básica: ¿el elemento que contiene a #container (o sea, HTML) tiene height: 100%? Me parece que no.

Si no quieres que el fondo sea negro, no pongas background: #000

Espero ayude.
no no tiene 100% pero si lo pongo sucede exactamente lo mismo, me parece que no me he explicado bien. Quiero que el fondo sea negro pero SOLO cuando haga falta , es decir que si la imagen mide 600px de alto y la pantalla 610 que sobren 5 por arriba y 5 por abajo , si la pantalla mide 700 púes 50 por arriba y 50 por abajo , y ahora mantiene la misma distancia sea la resolución que sea, pero no se porque me sucede esto. Un saludo
__________________
Videotutoriales de Drupal
  #4 (permalink)  
Antiguo 05/04/2011, 16:11
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: problema centrando verticalmente

Código CSS:
Ver original
  1. html,body{margin:0;padding:0;height:100%;overflow:hidden;}/* el simbolo &#37 ; es el signo porcentual algunas veces este editor lo cambia*/
  2. body {overflow-y:auto;}
  3. #container{background:#000 url('images/bg.png') center center no-repeat;width:100%; height:100%;}

el body no necesitas margin:0 auto; al igual que #container ya que estos ocupan el 100% de ancho

y si aun sigue dejando tanto espacio considera que tienes dentro de #container , quizás sea conveniente hacer un reset
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 05/04/2011, 16:53
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por Ag666 Ver Mensaje
el body no necesitas margin:0 auto; al igual que #container ya que estos ocupan el 100% de ancho

y si aun sigue dejando tanto espacio considera que tienes dentro de #container , quizás sea conveniente hacer un reset
No sigue estanfo igual aunque le quite el margin:0 auto.
¿A que te refires con un reset ? ¿como se hace eso y donde tengo que hacerlo?.

Gracias
__________________
Videotutoriales de Drupal
  #6 (permalink)  
Antiguo 05/04/2011, 17:20
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: problema centrando verticalmente

me quize referir a un reset css, también puedes probar agregando al inicio de tu css -> *{margin:0;padding:0;}

Código CSS:
Ver original
  1. *{margin:0;padding:0;}
  2. html,body{margin:0;padding:0;height:100%;overflow:hidden;}/* el simbolo &#37 ; es el signo porcentual algunas veces este editor lo cambia*/
  3. body {overflow-y:auto;}
  4. #container{background:#000 url('images/bg.png') center center no-repeat;width:100%; height:100%;}

si eso te funciona definitivamente necesitas un reset css, e igual tu nos has mostrado el CSS que usas seria conveniente también poder ver el html como lo tienes...

una pregunta algo tardía --> si has declarado un doctype valido?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 05/04/2011, 19:38
 
Fecha de Ingreso: marzo-2011
Mensajes: 184
Antigüedad: 6 años, 8 meses
Puntos: 11
Respuesta: problema centrando verticalmente

¿El fondo se carga de manera dinámica o por qué de que se ajuste a cada rato? Si sale el fondo es porque la imagen no es lo suficientemente grande como para alcanzar la longitud vertial de la pantalla ¿no? Creo que no entiendo bien la problemática, perdón, ha de ser el calor.

Saludos!

__________________
“Un estómago vacío, es un mal consejero.” Albert Einstein

Reflexiones, humor gráfico, chistes, Deporte, Consejos y tips
  #8 (permalink)  
Antiguo 06/04/2011, 02:39
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por Ag666 Ver Mensaje

una pregunta algo tardía --> si has declarado un doctype valido?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
__________________
Videotutoriales de Drupal
  #9 (permalink)  
Antiguo 06/04/2011, 02:46
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por GatoGordo Ver Mensaje
¿El fondo se carga de manera dinámica o por qué de que se ajuste a cada rato?

Hola gracias por tu respuesta, creo que yo no he dicho que el fondo se ajustaba cada rato , pero si es dinámico el contenido que carga, pero en ningún momento sobrepasa el alto del fondo.
__________________
Videotutoriales de Drupal
  #10 (permalink)  
Antiguo 06/04/2011, 02:56
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Como creo que una página colgada habla más que un millón de palabras (o era parecido jeje) he subido un ejemplo a inet.

www.andanuncios.com/vertical/index.php

Si se prueba con distintas resoluciones , el margen por arriba y por abajo con fondo negro que deja es el mismo siempre.
Gracias
__________________
Videotutoriales de Drupal
  #11 (permalink)  
Antiguo 06/04/2011, 03:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema centrando verticalmente

Debe haber algo que se me escapa por no haberlo comprendido bien, pero si de lo que se trata es de centrar una imagen en la ventana sin que la página sea mayor del tamaño mostrado (hay declarado hoverflow: hidden) y si no no se buscaría este efecto, pregunto
¿no sería mejor colocar la imagen como fondo del body posicionada?
Código CSS:
Ver original
  1. html, body {
  2. width: 100&#37;;
  3. height: 100%;
  4. /*resto propiedades necesarias*/
  5. background: #000 url(ruta.ext) no-repeat 50% 50%;
  6. }

Pero es que tengo una duda, no se si sólo se quiere centrar (vertical) un elemento o también los contenidos de ese elemento.
  #12 (permalink)  
Antiguo 07/04/2011, 05:37
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Definitivamente desisto de intentar centrar la imagen de fondo verticalmente, porque al ser una imagen si pongo capas encima al cambiar de resolución se mueven las cosas (es decir el fondo se queda quieto pero las demas capas con menus etc etc se mueven), esten flotando ,con absolute o con relative ,así que aunque me gustaría saber la manera de conseguirlo creo sencillamente que no se puede exactamente como yo quiero.

nota:cuando habla de imagen me refiero a la imagen de fondo #000 url('imagen.png')
  • He puesto la imagen en el body
  • He cambiado la imagen y la he puesto en container
  • Le he centrado verticalmente con 50% 50% y con center center (por los lados y verticalmente).

Y no funciona como quiero; de todas formas es muy difícil explicarse con palabras ,así que en cuanto puedo subiré un ejemplo del problema porque creo que aunque yo haya desistido en este caso, puede ser muy útil para otros (y para mi en un futuro claro ).

Un salud
__________________
Videotutoriales de Drupal
  #13 (permalink)  
Antiguo 07/04/2011, 05:44
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: problema centrando verticalmente

Porque no intentas un Fondo a página completa y que te ocupe el 100% de la página el fondo?

Lo digo porque si no quieres negro por arriba y por abajo, es probable que tampoco lo quieras por los lados. Cortamos de raiz y eliminamos TODO el negro ;)
__________________
Cool Village
@Wakkos
  #14 (permalink)  
Antiguo 07/04/2011, 06:01
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por Wakkos Ver Mensaje
Porque no intentas un Fondo a página completa y que te ocupe el 100% de la página el fondo?

Lo digo porque si no quieres negro por arriba y por abajo, es probable que tampoco lo quieras por los lados. Cortamos de raiz y eliminamos TODO el negro ;)
Jeje es una buena idea pero creo que no se puede , te explico:
Si mi imagen miden 1004 (por ejemplo) , ¿como hago para que ocupe 100% de una pantlla de resolución 1024?, tendrás que dejar fondo negro o de otro color por narices ¿o no?.
Creo que alinear verticalmente al centro una imagen de fondo es muy compplicad con css la verdad, hasta que no me he visto con la necesidad de hacerlo no me he dado cuenta.
__________________
Videotutoriales de Drupal
  #15 (permalink)  
Antiguo 07/04/2011, 13:27
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: problema centrando verticalmente

No, se sale un poco la imagen en vez de cortar. Mira la web que te puse y echa un ojo al script.
__________________
Cool Village
@Wakkos
  #16 (permalink)  
Antiguo 07/04/2011, 16:45
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: problema centrando verticalmente

Cita:
Iniciado por Wakkos Ver Mensaje
No, se sale un poco la imagen en vez de cortar. Mira la web que te puse y echa un ojo al script.
Si esta muy bien , pero no es una imagen de fondo tu ejemplo, es un color de fondo:
background:none repeat scroll 0 0 #D9D3CF
__________________
Videotutoriales de Drupal
  #17 (permalink)  
Antiguo 08/04/2011, 07:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema centrando verticalmente

2 formas de poner una imagen vía src al 100% del body, sin distorsionarla:
http://css.devillasbuenas.es/ <--(Fondos al 100% Adaptando imágenes al 100% del body)

No confundir fondo con background
  #18 (permalink)  
Antiguo 08/04/2011, 10:01
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: problema centrando verticalmente

Hola Dundee

Yo prove esta forma espero que te sirva , lo que te sujeriria es que juegues con los porcentajes en el ejemplo si ves codigo fuente veras el css

ve el ejemplo en esa direccion

http://www.freemail.es/faroon/posicionar.html

Etiquetas: Ninguno
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 21:14.