[SOLUCIONADO] Problema con alineamiento

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

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

pzin · #2 (**permalink**) 13/03/2013, 02:31

Evidentemente si usas posiciones absolutas y luego márgenes negativos llegará algún momento en el que el contenido no sea visible.