problema centrando verticalmente

Dundee · #1 (**permalink**) 05/04/2011, 11:43

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

Tedel · #2 (**permalink**) 05/04/2011, 12:56

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.

Dundee · #3 (**permalink**) 05/04/2011, 13:00

Cita:

Iniciado por Tedel

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

ArturoGallegos · #4 (**permalink**) 05/04/2011, 15:11

Código CSS:

Ver originalhtml,body{margin:0;padding:0;height:100&#37;;overflow:hidden;}/* el simbolo &#37 ; es el signo porcentual algunas veces este editor lo cambia*/
body {overflow-y:auto;}
#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

Dundee · #5 (**permalink**) 05/04/2011, 15:53

Cita:

Iniciado por Ag666

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

ArturoGallegos · #6 (**permalink**) 05/04/2011, 16:20

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*{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100&#37;;overflow:hidden;}/* el simbolo &#37 ; es el signo porcentual algunas veces este editor lo cambia*/
body {overflow-y:auto;}
#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?

GatoGordo · #7 (**permalink**) 05/04/2011, 18:38

¿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!

Dundee · #8 (**permalink**) 06/04/2011, 01:39

Cita:

Iniciado por Ag666

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">

Dundee · #9 (**permalink**) 06/04/2011, 01:46

Cita:

Iniciado por GatoGordo

¿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.

Dundee · #10 (**permalink**) 06/04/2011, 01:56

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

kseso? · #11 (**permalink**) 06/04/2011, 02:11

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 originalhtml, body {
width: 100&#37;;
height: 100%;
/*resto propiedades necesarias*/
background: #000 url(ruta.ext) no-repeat 50% 50%;
}

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.

Dundee · #12 (**permalink**) 07/04/2011, 04:37

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

Wakkos · #13 (**permalink**) 07/04/2011, 04:44

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 ;)

Dundee · #14 (**permalink**) 07/04/2011, 05:01

Cita:

Iniciado por Wakkos

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.

Wakkos · #15 (**permalink**) 07/04/2011, 12:27

No, se sale un poco la imagen en vez de cortar. Mira la web que te puse y echa un ojo al script.

Dundee · #16 (**permalink**) 07/04/2011, 15:45

Cita:

Iniciado por Wakkos

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

kseso? · #17 (**permalink**) 08/04/2011, 06:38

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

saul123 · #18 (**permalink**) 08/04/2011, 09:01

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