Ajustar al centro todo

SrFurias · #1 (**permalink**) 28/05/2012, 12:27

Buenas, ¿me podríais decir como puedo hacer que la página este siempre centrada?

La página es: http://unclaingames.is-great.com

Código HTML:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="es-Es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="shortcut icon" href="http://picturestack.com/213/989/qeQfaviconE1O.ico">
		<link rel="stylesheet" href="stylesheet3.css">
		<title>
			Unclain Games Oficial
		</title
	</head>
	<body background="images/Fondo.png">
		<header>
			<div id='logo'>
			<hgroup>
			<img src="images/Logo.png" width="400px" height="200px" alt="Unclain Games Oficial">
			</hgroup>
			</div>
			<nav>
				<ul>
					<li>Inicio</li>
					<li>MiniJuegos</li>
                                        <li>Juegos</li>
                   	                <li>Descargas</li>
                                        <li>Soporte</li>
				</ul>
			</nav>
		</header>
		<div id='contenido'>
			<article>
			<h1>Actualizaci&oacute;n V1 - P&aacute;gina Oficial creada.</h1>
			<p>Estamos trabajando en la primera actualizaci&oacute;n de Unclain Games: Se trata de la p&aacute;gina web en su versi&oacute;n V1.0 (la primera) en la que encontrar&aacute;s informaci&oacute;n</p>
			</article>
		</div>
		<p><h4>Unclain Games 2012 - Derechos de autor reservados.</h4></p>
		<div id='contenidoderecho'>
		</div>
	</body>
</html>

Y este el CSS:

Código:

body
{
	background-color: #424242;
	color: #97EF12;
}
header
{
	width:960px;
	margin:0 auto;
	text-align:center;
}
nav
{
	background-color: #FFF;
	border-radius: 20px;
	width: 400px;
	margin: 0 ;
	margin-left: 450px;
	margin-top: -120px;
	color: #000;
	padding: 1px;
	height:50px;
}
nav ul li
{
	display:inline-block;
	margin-right: 10px;
}
nav ul li:hover
{
	background-color: #00A6FF;
	color: #FFF;
	cursor: pointer;
	border-radius: 20px;
}
#contenido
{
	column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -o-column-count: 1;
	background-color: #FFF;
	color: #000;
	border-radius: 20px;
	width: 700px;
	height: 600px;
	margin: 0 auto;
	margin-top: 55px;
	margin-left: 0px;
	padding: 15px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}
h4
{
	color: #898989;
	margin: 0 auto;
	text-align: center;
}
h1
{
	text-shadow: 1px 1px 1px #000;
	color: #00A6FF
}
#logo
{
	margin-left: -550px;
}
#contenidoderecho
{
	background-color: #FFF;
	color: #000;
	border-radius: 20px;
	width: 200px;
	height: 600px;
	margin: 0 auto;
	margin-left: 740px;
	margin-top: -683px;
	padding: 15px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
}

Gracias.

rex16 · #2 (**permalink**) 28/05/2012, 12:39

Tienes que meter toda la web en una capa contenedora y a esa capas le das un width y la centras con margin:0px auto, es posible que debas agregar a las otras capas lo mismo y en el body agregar text-align:center para evitar problemas con ie

kseso? · #3 (**permalink**) 28/05/2012, 13:09

Cita:

Iniciado por rex16

Tienes que meter toda la web en una capa contenedora y a esa capas le das un width y la centras con margin:0px auto, es posible que debas agregar a las otras capas lo mismo ~~y en el body agregar text-align:center para evitar problemas con ie~~<-- ¿para qué si tiene doctype?

Su enlace no carga.

Mientras, mire este artículo.