Div muy grande se corta

[Faqxeneize]

Hola gente cómo están?
Bueno, quiero ver cuál es el problema que tengo.

El tema es que cuando quiero centrar un DIV, lo hago utilizando un CSS como este:

Código:

#Mapa {
	position: absolute;
	left: 50%;
	top: 200px;
	width: 1829px;
	height: 49px;
	z-index: 2;
	margin-left:-914px;
}

Left 50% (a la mitad) y margin-left -914px (que es la mitad del ancho de la imagen, para que quede exactamente al medio de la pantalla).

El problema está en que si yo no lo veo en una pantalla grande (1920x1080, donde se ve perfecto), comienza a cortarme la imagen del lado izquierdo.

Probé utilizando pixeles en "Left" en lugar de porcentaje y no se corta, pero la imagen no queda centrada.

¿Cuál es la solución?
Desde ya muchas gracias.

Les dejo un video para que puedan entender qué es lo que pasa:
http://www.youtube.com/watch?v=nWGpHd1YM4U

MUCHAS GRACIAS!
Espero que puedan ayudarme.

[Alexis88]

El problema radica en que la medida se la estás dando en píxeles, por lo que si le das 1829 píxeles de ancho, no puedes esperar que se vean los 1829 píxeles en un monitor con un ancho menor a esa medida. Te sugiero que trabajes con unidades relativas como las em, para que se adapten a las medidas de cualquier monitor, incluidos los celulares. Aquí se muestran algunas de las buenas razones por las que conviene trabajar con dicha unidad de medida y ya no con los píxeles u otra unidad absoluta.

Saludos

[alzacon]

Iniciado por Alexis88

El problema radica en que la medida se la estás dando en píxeles, por lo que si le das 1829 píxeles de ancho, no puedes esperar que se vean los 1829 píxeles en un monitor con un ancho menor a esa medida. Te sugiero que trabajes con unidades relativas como las em, para que se adapten a las medidas de cualquier monitor, incluidos los celulares. Aquí se muestran algunas de las buenas razones por las que conviene trabajar con dicha unidad de medida y ya no con los píxeles u otra unidad absoluta.

Saludos

Se adapta si tu lo adaptas modificando el tamaño de la fuente, porque si tienes 100em de ancho con tamaño de fuente fijo en ese elemento para todas las resoluciones, estarás en la misma situación.

em y rem no se adaptan por si solas a la resolución del monitor. Para ese cometido hay otras unidades relativas.

[Alexis88]

Iniciado por alzacon

Se adapta si tu lo adaptas modificando el tamaño de la fuente

Así es, es por eso que 100 em no son iguales en un monitor de 1024x768 que en uno de mayor resolución, solamente es cuestión de adaptar las medidas e ir probando, así de tedioso es el trabajo del diseño y maquetado.

[pzin]

Bueno, el problema real es que estás usando posiciones absolutas para centrar algo que puede centrarse usando:

Código CSS:

margin: 0 auto;
 

Otra opción pudiera ser usando translateX(), pero como digo, la primera opción debería de ser la primera sin usar posiciones absolutas, porque así sale del flujo natural y es ahí donde se corta el elemento.

[alzacon]

Iniciado por Alexis88

Así es, es por eso que 100 em no son iguales en un monitor de 1024x768 que en uno de mayor resolución, solamente es cuestión de adaptar las medidas e ir probando, así de tedioso es el trabajo del diseño y maquetado.

Estás confundido, 100em pueden ser iguales en ambos monitores. La resolución del monitor equivale a redimensionar la ventana de tu navegador, si tienes para ambas resoluciones el mismo tamaño de la fuente. Repito: los em no dependen en nada de la resolución del monitor.

[Alexis88]

Iniciado por alzacon

Estás confundido, 100em pueden ser iguales en ambos monitores. La resolución del monitor equivale a redimensionar la ventana de tu navegador, si tienes para ambas resoluciones el mismo tamaño de la fuente. Repito: los em no dependen en nada de la resolución del monitor.

No quise decir eso, se perfectamente a lo que me refiero. Trataba de dar a entender que no se verán igual, refiriéndome al espacio que ocupará con respecto a las medidas del dispositivo que se utilice para su visualización. En un monitor de 1024 px de ancho, ocupará un 90%, pero en uno más ancho, ocupará un menor porcentaje. O como menciona la teoría, 2 em aplicado a un texto que por defecto tiene un tamaño de 12 px, equivaldría a 24 px. Con respecto a las em y la resolución del monitor, quise decir que vuelve más escalable y flexible al diseño.

No aconsejo trabajar con unidades absolutas, aunque pueden tener mayor utilidad combinándolas con media queries.

P.D.: No volveré a escribir con tanto sueño.

[Faqxeneize]

Iniciado por pzin

Bueno, el problema real es que estás usando posiciones absolutas para centrar algo que puede centrarse usando:

Código CSS:

margin: 0 auto;
 

Otra opción pudiera ser usando translateX(), pero como digo, la primera opción debería de ser la primera sin usar posiciones absolutas, porque así sale del flujo natural y es ahí donde se corta el elemento.

Con esto se soluciona. Pero en parte, es decir, en el momento en que le quito la posición absoluta se centra perfectamente y se soluciona eso que se corta, PERO el div se ubica arriba de todo y yo lo quiero a 200px del margen superior.

Cómo puedo arreglar esto? Se me occurió una imagen de 200px transparente, pero sería una forma demasiado "casera" y quiero algo bien.
Gracias!

[pzin]

¿Y habría algo en ese espacio superior?

Si no hay nada, simplemente añade un margen superior:

Código CSS:

margin: 200px auto 0;
 

Y si hay algún elemento que ocupa ese espacio, para realmente hacerlo bien y no tengas problemas en el futuro, no debería haber casi nada con posiciones absolutas para que esos 200 píxeles sean, no un margen, sino un elemento empujando a otro, que es como se hacen correctamente las cosas.

[Faqxeneize]

Iniciado por pzin

¿Y habría algo en ese espacio superior?

Si no hay nada, simplemente añade un margen superior:

Código CSS:

margin: 200px auto 0;
 

Y si hay algún elemento que ocupa ese espacio, para realmente hacerlo bien y no tengas problemas en el futuro, no debería haber casi nada con posiciones absolutas para que esos 200 píxeles sean, no un margen, sino un elemento empujando a otro, que es como se hacen correctamente las cosas.

Gracias!! Funciona. Es lo que había hecho. Ahora no tengo nada con posiciones absolutas, pero quiero saber por qué se deja un espacio de más o menos 10 píxeles desde el "top" hasta el primer DIV.

Repito, muchas gracias por tu ayuda, me sirvió mucho.

[pzin]

Iniciado por Faqxeneize

Ahora no tengo nada con posiciones absolutas, pero quiero saber por qué se deja un espacio de más o menos 10 píxeles desde el "top" hasta el primer DIV.

Pues habría que ver más contexto, pero puede ser debido a un colapsamiento de márgenes de CSS, que se puede solucionar, entre otras, poniendo al contenedor un:

Código CSS:

overflow: hidden;
 

[Faqxeneize]

Iniciado por pzin

Pues habría que ver más contexto, pero puede ser debido a un colapsamiento de márgenes de CSS, que se puede solucionar, entre otras, poniendo al contenedor un:

Código CSS:

overflow: hidden;
 

No, con eso no se soluciona, pero lo que hago es ponerle lo siguiente:

Código CSS:

margin-top: -6px;
 

Con eso se soluciona lo del espacio.

[pzin]

Eso no es una solución, es un parche.

Como dije, sin más contexto no se puede saber qué ocurre.

[willycarp]

Quizá tenes que sacar los margenes del body... prueba con algo asi

Código CSS:

body {margin: 0px;}
 

Saludos