Alineamiento en un DIV

The_Code · #1 (**permalink**) 12/03/2013, 09:42

PERDONEN POR EL DOBLE POST, APRETE SIN QUERER DONDE DECÍA "MARCAR TEMA COMO SOLUCIONADO"

Hola! Necesito su ayuda, resulta que tengo una página de un cliente, pero resulta que en pantallas chicas, el div "contenido" se ve cortado, y lo peor es que no hay scroll para poder ver el sitio entero.

Acá paso el link: http://neochem.com.ar | Los que tienen pantallas más o menos chicas, podrán ver claramente que el logo y una parte del contenido no es visible.

Así es como se ve en una pantalla chica, y así es como se ve en una pantalla más grande. Pero lo que pasa, es que en pantallas recortadas, la parte del logo no se ve (evidentemente, porque está cortada).

HTML

Código:

<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Neochem</title>
<link href="css/estilo.css" rel="stylesheet" />
<meta name="Keywords" content="neochem, colorantes, auxiliares, colores, tintas, argentina" />
<META name="copyright" content="&copy; Neochem" />
<META name="Author" lang="es" content="Santiago A. Gimenez" />
<meta name="Description" content="Colorantes y Auxiliares" />
</head>
<body>
 <div id="contenido">
 <div class="logo">
 <img src="img/logo.jpg" alt="neochem, colorantes y auxiliares" />
 </div>
	<div class="contacto">
	<div class="gm"><p><img src="img/gm.jpg"></p></div>
	<p>Virrey Olaguer y Feliú 5241<br />
	(1605) Munro<br />
	Provincia de Buenos Aires<br />
	Argentina<br />
	Tel./Fax: (005411) 4730-4046<br />
	<a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</body>
</html>

CSS

Código:

/*  CREADO POR: Santiago A. Gimenez
	EL DÍA: 20/02/2013 
	EXCLUSIVO PARA NEOCHEM.COM.AR*/
@font-face { 
  font-family:arial; 
    src: url('../font/arial.ttf'); 
    src: local("News Cycle"), url('../font/arial.ttf'); 
} 
body {
	margin:0 auto;
	width:100%;
	background:#BEBEAB;
	}
#contenido {
    position:absolute;
    top:50%;
    left: 50%;
    margin-top: -400px;
    margin-left: -400px;
	background:url(../img/fondo.jpg) top center no-repeat;
	width:800px;
	height:800px;
	border-color:black;
	border-width:2px;
	border-style:solid;
	}
.logo {
	margin-left:500px;
	margin-top:15px;
	}
.contacto {
	margin-top:520px;
	margin-left:545px;
	width:240px;
	font-family:arial;
	font-size:13pt;
	color:#00357E;
	text-align:right;
	}
.gm {
	margin-left:150px;
	}

The_Code · #2 (**permalink**) 12/03/2013, 09:48

Fui a la W3C CSS checker y no detectó ningún error, que puede ser

pitufoweb · #3 (**permalink**) 12/03/2013, 09:52

Este tipo de problemas es por que usas position: absolute.

Desde hace algunos días, veo a muchos con problemas similares.

por favor, no usen position: absolute para hacer el layout.

Saludos

The_Code · #4 (**permalink**) 12/03/2013, 09:58

Cita:

Iniciado por pitufoweb

Este tipo de problemas es por que usas position: absolute.

Desde hace algunos días, veo a muchos con problemas similares.

por favor, no usen position: absolute para hacer el layout.

Saludos

Si le saco el absolute, se me corta en las pantallas grandes jeje.
He probado sacandole los margin: -400 pero se me corta 3/4 del div.
Pasa en todos los navegadores...

¿que puedo hacer?

Gracias por su tiempo

pitufoweb · #5 (**permalink**) 12/03/2013, 10:10

Hola,

Quita todo esto:

Código HTML:

    height: 800px;
    left: 50%;
    margin-left: -400px;
    margin-top: -400px;
    position: absolute;
    top: 50%;

y le agregas un margin: auto

Saludos

The_Code · #6 (**permalink**) 12/03/2013, 10:15

Cita:

Iniciado por pitufoweb

Hola,

Quita todo esto:

Código HTML:

    height: 800px;
    left: 50%;
    margin-left: -400px;
    margin-top: -400px;
    position: absolute;
    top: 50%;

y le agregas un margin: auto

Saludos

Pero si hago esto, no quedaría centrado horizontalmente xD. Jejeje

pitufoweb · #7 (**permalink**) 12/03/2013, 10:19

Cita:

Iniciado por The_Code

Pero si hago esto, no quedaría centrado horizontalmente xD. Jejeje

Hola,

Claro que queda centrado. Almenos intestaste hacerlo?

Saludos

The_Code · #8 (**permalink**) 12/03/2013, 10:30

Cita:

Iniciado por pitufoweb

Hola,

Claro que queda centrado. Almenos intestaste hacerlo?

Saludos

Si XD, me queda solo HORIZONTALMENTE. Lo he puesto, el

Código:

 margin:0 auto;

suelo usarlo, pero ahora necesito que también se centre verticalmente, es decir, que quede centrado en ambos ejes (vertical y horizontalmente)

pitufoweb · #9 (**permalink**) 12/03/2013, 10:37

Hola,

Hay varias formas para centrarlo verticalmente. Usa el buscador del foro o en google...no es tan difícil.

Saludos

The_Code · #10 (**permalink**) 12/03/2013, 10:43

Cita:

Iniciado por pitufoweb

Hola,

Hay varias formas para centrarlo verticalmente. Usa el buscador del foro o en google...no es tan difícil.

Saludos

pues para mi, parece que si jeje.
He intentado con esto:

Código:

position:absolute;
	left:50%;
	top:50%;
	margin:-400px 0 0 -400px;
	vertical-align: middle;
	display: table-cell;

Y va bien, pero en pantallas chicas realmente no se ve, pasa lo mismo que antes.
He intentado con otros códigos, pero el contenido del div "contenido" se "escapa" del contenedor. Puse los mismos valores en .gm y .contacto pero igual, no pasaba nada

Me quiero matar...

The_Code · #11 (**permalink**) 12/03/2013, 10:46

Listo!!!!

Código:

width:800px;
    height:800px;
    margin:auto;
    position:absolute;
    top:0;bottom:0; 
    left:0;right:0;

Gracias por la ayuda, con ese code ustedes podrán alinearlo horizontal y verticalmente (probado en una pantalla de 10 pulgadas y otra de 23)

The_Code · #12 (**permalink**) 12/03/2013, 11:18

Ok, solo funciona en Firefox. En Chrome y IE, al reducir la ventana, la página se corta

The_Code · #13 (**permalink**) 12/03/2013, 12:17

He probado con miles de cosas, busqué en diversas páginas (ingles y español) y no hay caso.

Ha ver si, algún día, se ponen todos de acuerdo y hacen un standard que funcione en todos los navegadores :(

webosiris · #14 (**permalink**) 12/03/2013, 14:07

Hola,
tu problema no es de los navegadores, sino que se resuelve con un poquito más de conocimiento sobre como funciona css y un pensamiento un poco más "out of the box" como dicen los ingleses.

Concretamente te pasa porque estás usando anchos y márgenes fijos. Es matemáticamente imposible que puedas ver sin cortes un div que mide 800px de ancho en una pantalla que mide menos.

De la misma forma, por ejemplo tu logo, tiene un margin-left de 500px. Eso hace que el navegador cuente por la izquierda, 1....500 y luego te muestre el logo. Si la pantalla tiene menos de 500px, evidentemente que te lo va a mostrar fuera de la pantalla.

Te hago un dibujo para que lo veas "visualmente":

- elimina los margins de todo
- elimina el ancho y altura fija del contenedor
- asignale a left-right-top-bottom 10%

y whallá. Tienes un contenedor que mide el 80% del ancho de la pantalla, el 80% del alto de la pantalla y está centrado horizontalmente y verticalmente
si además quieres que nunca mida más de 800px, asígnale max-width:800px y margin:auto para centrarlo