Problemas con cambio de resolución. Centrar página.

Hola,
el diseño de mi página está hecho para 1024px de ancho todos los elementos. Lo que pretendo es que al visualizarla en un pc de resoluc 1024px la pagina ocupe toda la pantalla, si la resoluc del pc es 1280px de ancho que se centre el contenido dejando los laterales que sobran, vacios y en blanco, y si la resoluc es menor de 1024 px entonces usar barras de scroll.
¿Cómo centro la página en pantalla para que queden márgenes laterales blancos si la resoluc del monitor es mayor a 1024px?
Gracias.

Hola @riestra:
metes todo el contenido de la web en un div al que le pones id="contenedor". Luego en el css le dices:

#contenedor {
margin: 0 auto;
}

Y ya está!

Hola riestra

El contenido de tu pagina metelo dentro un div q tiene dimensiones preestablecidas

<div id="contenedor" style="width:1024px" align="center">tu informacion <div>

asi queda con las dimensiones y centrado. Entonces en todas las pantallas de resoluciones 1024 se vera completo, en las de menor resolucion usaras scrollbar, y las de mayor solo la veras centrada con los espacios en los laterales

espero que te halla servido

Hola,
he puesto ese contendor pcpal con align center pero al cargar la página sale pegada al lado izquierdo, no se centra en pantalla.

riestra escribió:

El align tienes q ponerlo en el div donde contenga toda la informacion.
yo suelo usar asi

<div id="main"> -------------> este es el q me toma el 100% de la pantalla
<div id="table" align="center">------------>este es el cuadro de toda mi web
<div id="contenido"></div> -----------> informacion
....
</div>
</div>

en la hoja de estilos para la capa table le quito el float....

espero q te sirva

saludos
Juan Soto

He probado, pero la página sigue saliendo cargada en el lado izquierdo, no la centra correctamente, no entiendo el porqué.
Aquí te pongo el código, el div de más arriba tiene el 100% y el siguiente el align center, luego viene el contenido.
----------------------

Código HTML :

<div id="table"  style=" width:100% height:100%">
<div id="pcpal" style=" width:1024px" align="center">
<div id="div-superior">
  <div class="Estilo3" id="div-texto-superior">PAGINA PRINCIPAL </div>
  <div class="Estilo4" id="div-login">
  
   <form action="autenticacion.php" method="POST" t>
     <table border="0">
<tr><td>Login:</td><td><input name="usuario" size="10" value=""/></td>
<td>Password:</td><td><input name="contrasena" size="10" type="password"/></td>
<td/><td><input type="submit" value="Entrar"/></td></tr>
</table>
</form>
   
</div>
  <div id="div-mensaje-fallo">
  <?php if (isset($_GET["errorusuario"]) && ($_GET["errorusuario"]=="si")){?>
      <span class="Estilo5">Datos incorrectos</span>
   <?php }?>   </div>
</div>

   <div id="div-verde-izq" >
        <div class="Estilo2" id="div-admin">ADMINISTRACI&Oacute;N </div>
   </div>
   <div id="div-foto-dch" ></div>
<div id="colores" align="center">   
   <div id="div-azul-izq">
        <div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
       <div class="Estilo6" id="div-nuevamarca-texto">Permite insertar una nueva marca sobre el mapa y guardar contenido multimedia asociado a esa marca. </div>
  </div>
   <div id="div-naranja-medio">
        <div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
        <div class="Estilo6" id="div-actualizar-texto">Permite seleccionar una marca de entre las marcas almacenadas en la base de datos y actualizar su contenido. </div>
   </div>
   <div id="div-verde-dcha">
        <div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
        <div class="Estilo6" id="div-eliminar-texto">Permite eliminar cualquier v&iacute;deo o imagen almacenado en la base de datos y asociado a una marca. </div>
  </div>
</div>
<div id="div-barra-horiz"></div>

<div id="Layer2"  ></div>
</div>
</div>

Hola
Te pongo comentarios en donde van las correciones, ya te encargaras de eliminarlos
son 4

Ps si asi tienes el codigo, y no tenes hojas de estilos ni CSS tipo estructura (#elnombredelcss) debe de funcionar aqui lo probe y me dio

aqui te va el codigo

<div id="table" style=" width:100%;<!-- Aqui te faltaba un punto y coma --> height:100%" align="center" ><!--Aqui va el atributo align-->
<div id="pcpal" style=" width:1024px" > <!-- Aqui se lo kite-->
<div id="div-superior">
<div class="Estilo3" id="div-texto-superior">PAGINA PRINCIPAL </div>
<div class="Estilo4" id="div-login">

<form action="autenticacion.php" method="POST" > <!-- Aqui borre una letra t q sobraba -->
<table border="0">
<tr><td>Login:</td><td><input name="usuario" size="10" value=""/></td>
<td>Password:</td><td><input name="contrasena" size="10" type="password"/></td>
<td/><td><input type="submit" value="Entrar"/></td></tr>
</table>
</form>

</div>
<div id="div-mensaje-fallo">
<?php if (isset($_GET["errorusuario"]) && ($_GET["errorusuario"]=="si")){?>
<span class="Estilo5">Datos incorrectos</span>
<?php }?> </div>
</div>

<div id="div-verde-izq" >
<div class="Estilo2" id="div-admin">ADMINISTRACI&Oacute;N </div>
</div>
<div id="div-foto-dch" ></div>
<div id="colores" align="center">
<div id="div-azul-izq">
<div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
<div class="Estilo6" id="div-nuevamarca-texto">Permite insertar una nueva marca sobre el mapa y guardar contenido multimedia asociado a esa marca. </div>
</div>
<div id="div-naranja-medio">
<div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
<div class="Estilo6" id="div-actualizar-texto">Permite seleccionar una marca de entre las marcas almacenadas en la base de datos y actualizar su contenido. </div>
</div>
<div id="div-verde-dcha">
<div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
<div class="Estilo6" id="div-eliminar-texto">Permite eliminar cualquier v&iacute;deo o imagen almacenado en la base de datos y asociado a una marca. </div>
</div>
</div>
<div id="div-barra-horiz"></div>

<div id="Layer2" ></div>
</div>
</div>

Código :

Código :

[img][/img]

Hola!!!! aqui te va mejor......
Te pongo comentarios en donde van las correciones, ya te encargaras de eliminarlos
son 4

Ps si asi tienes el codigo, y no tenes hojas de estilos ni CSS tipo estructura (#elnombredelcss) debe de funcionar aqui lo probe y me dio

aqui te va el codigo

Código :

<div id="table" style=" width:100%;<!-- Aqui te faltaba un punto y coma --> height:100%" align="center" ><!--Aqui va el atributo align-->
<div id="pcpal" style=" width:1024px" > <!-- Aqui se lo kite-->
<div id="div-superior">
<div class="Estilo3" id="div-texto-superior">PAGINA PRINCIPAL </div>
<div class="Estilo4" id="div-login">

<form action="autenticacion.php" method="POST" > <!-- Aqui borre una letra t q sobraba -->
<table border="0">
<tr><td>Login:</td><td><input name="usuario" size="10" value=""/></td>
<td>Password:</td><td><input name="contrasena" size="10" type="password"/></td>
<td/><td><input type="submit" value="Entrar"/></td></tr>
</table>
</form>

</div>
<div id="div-mensaje-fallo">
<?php if (isset($_GET["errorusuario"]) && ($_GET["errorusuario"]=="si")){?>
<span class="Estilo5">Datos incorrectos</span>
<?php }?> </div>
</div>

<div id="div-verde-izq" >
<div class="Estilo2" id="div-admin">ADMINISTRACI&Oacute;N </div>
</div>
<div id="div-foto-dch" ></div>
<div id="colores" align="center">
<div id="div-azul-izq">
<div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
<div class="Estilo6" id="div-nuevamarca-texto">Permite insertar una nueva marca sobre el mapa y guardar contenido multimedia asociado a esa marca. </div>
</div>
<div id="div-naranja-medio">
<div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
<div class="Estilo6" id="div-actualizar-texto">Permite seleccionar una marca de entre las marcas almacenadas en la base de datos y actualizar su contenido. </div>
</div>
<div id="div-verde-dcha">
<div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
<div class="Estilo6" id="div-eliminar-texto">Permite eliminar cualquier v&iacute;deo o imagen almacenado en la base de datos y asociado a una marca. </div>
</div>
</div>
<div id="div-barra-horiz"></div>

<div id="Layer2" ></div>
</div>
</div>

Hola,
en realidad si que tiene CSS , que supongo que será lo que está dando por saco y por eso no centra.
A continuación te pongo todo el código, esta vez completo, con CSS a ver que opinas.

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#div-superior {
   position:absolute;
   width:1024px;
   height:49px;
   z-index:1;
   background-color: #333333;
}
#div-texto-superior {
   position:absolute;
   width:357px;
   height:19px;
   z-index:1;
   left: 8px;
   top: 21px;
}
#div-conexion {
   position:absolute;
   width:64px;
   height:23px;
   z-index:2;
   left: 59px;
   top: 14px;
}
#div-login {
   position:absolute;
   width:395px;
   height:40px;
   z-index:3;
   left: 568px;
   top: 15px;
}
#div-verde-izq {
   position:absolute;
   width:487px;
   height:131px;
   z-index:2;
   top: 57px;
   background-image: url(img/header_left.jpg);
}
#div-foto-dch {
   position:absolute;
   width:541px;
   height:131px;
   z-index:3;
   left: 493px;
   top: 57px;
   background-image: url(img/ourense2.jpg);
}
#div-azul-izq {
   position:absolute;
   width:325px;
   height:150px;
   z-index:4;
   top: 0px;
   background-image: url(img/blue.png);
   left: 26px;
}
#div-naranja-medio {
   position:absolute;
   width:323px;
   height:151px;
   z-index:4;
   left: 352px;
   top: -1px;
   background-image: url(img/orange.png);
}
#div-verde-dcha {
   position:absolute;
   width:322px;
   height:151px;
   z-index:5;
   left: 675px;
   top: -1px;
   background-image: url(img/green.png);
}
#div-nuevamarca {
   position:absolute;
   width:127px;
   height:23px;
   z-index:1;
   left: 29px;
   top: 11px;
}
.Estilo1 {
   color: #FFFFFF;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 14px;
}
#div-actualizar {
   position:absolute;
   width:287px;
   height:23px;
   z-index:1;
   left: 33px;
   top: 10px;
}
#div-eliminar {
   position:absolute;
   width:296px;
   height:22px;
   z-index:1;
   left: 20px;
   top: 10px;
}
#div-admin {
   position:absolute;
   width:268px;
   height:49px;
   z-index:1;
   left: 61px;
   top: 44px;
}
.Estilo2 {
   font-size: 36px;
   font-family: Arial, Helvetica, sans-serif;
   color: #FFFFFF;
}
#div-barra-horiz {
   position:absolute;
   width:1024px;
   height:10px;
   z-index:6;
   top: 188px;
   background-color: #333333;
}
.Estilo3 {
   color: #FFFFFF;
   text-decoration: none;
   font-size: 14px;
   font-weight: bold;
}
.Estilo4 {color: #FFFFFF; font-size: 18px; }
#div-mensaje-fallo {
   position:absolute;
   width:175px;
   height:23px;
   z-index:4;
   left: 395px;
   top: 19px;
}
.Estilo5 {
   color: #CCCC33;
   font-weight: bold;
}
#div-nuevamarca-texto {
   position:absolute;
   width:256px;
   height:54px;
   z-index:2;
   left: 47px;
   top: 41px;
}
.Estilo6 {color: #FFFFFF}
#div-actualizar-texto {
   position:absolute;
   width:238px;
   height:63px;
   z-index:2;
   left: 61px;
   top: 40px;
}
#div-eliminar-texto {
   position:absolute;
   width:267px;
   height:51px;
   z-index:2;
   left: 40px;
   top: 40px;
}
#Layer1 {
   position:absolute;
   width:971px;
   height:341px;
   
   left: 2px;
   top: 3px;
}
#Layer2 {
   position:absolute;
   width:1024px;
   height:400px;
   z-index:2;
   top: 198px;
   background-color: #CCCCCC;
}
#colores {
   position:absolute;
   width:1024px;
   height:150px;
   z-index:7;
   top: 199px;
}
-->
</style>
</head>

<body>
<div id="table" style=" width:100%";>
<div id="pcpal" style=" width:1024px" align="center">
<div id="div-superior">
  <div class="Estilo3" id="div-texto-superior">PAGINA PRINCIPAL</div>
  <div class="Estilo4" id="div-login">
  
   <form action="autenticacion.php" method="POST">
     <table border="0">
<tr><td>Login:</td><td><input name="usuario" size="10" value=""/></td>
<td>Password:</td><td><input name="contrasena" size="10" type="password"/></td>
<td/><td><input type="submit" value="Entrar"/></td></tr>
</table>
</form>
   
</div>
  <div id="div-mensaje-fallo">
  <?php if (isset($_GET["errorusuario"]) && ($_GET["errorusuario"]=="si")){?>
      <span class="Estilo5">Datos incorrectos</span>
   <?php }?>   </div>
</div>

   <div id="div-verde-izq" >
        <div class="Estilo2" id="div-admin">ADMINISTRACI&Oacute;N </div>
   </div>
   <div id="div-foto-dch" ></div>
<div id="colores" align="center">   
   <div id="div-azul-izq">
        <div class="Estilo1" id="div-nuevamarca">NUEVA MARCA </div>
       <div class="Estilo6" id="div-nuevamarca-texto">Permite insertar una nueva marca sobre el mapa y guardar contenido multimedia asociado a esa marca. </div>
  </div>
   <div id="div-naranja-medio">
        <div class="Estilo1" id="div-actualizar">ACTUALIZAR CONTENIDO DE UNA MARCA </div>
        <div class="Estilo6" id="div-actualizar-texto">Permite seleccionar una marca de entre las marcas almacenadas en la base de datos y actualizar su contenido. </div>
   </div>
   <div id="div-verde-dcha">
        <div class="Estilo1" id="div-eliminar">ELIMINAR CONTENIDO MULTIMEDIA </div>
        <div class="Estilo6" id="div-eliminar-texto">Permite eliminar cualquier v&iacute;deo o imagen almacenado en la base de datos y asociado a una marca. </div>
  </div>
</div>
<div id="div-barra-horiz"></div>

<div id="Layer2"  ></div>
</div>
</div>


</body>
</html>

Hola

estuve revisando el codigo y lo unico q hice fue ponerle el align en la etiqueta


<div id="table" style=" width:100%" align="center">

la primera etiqueta q esta debajo del <body>

y ya funciona... me lo centra en la pantalla

espero q te sirva

Juanks

Wow, si que se han hecho un lio con esto. Con una simple googleada bastaría para solucionar tu duda.

1. No uses el css dentro de tu html, pon este código dentro del html donde vinculas tu archivo css externo

Código HTML :

<link href="http://www.cristalab.com/css/cristalab.css" rel="stylesheet" type="text/css" />

2. Si quieres centrar texto:

Código HTML :

#contenedor {
text-align: center;
}

3. Si quieres centrar un div(caja) en la pantalla:

Código HTML :

#contenedor {
margin: 0 auto;
}

http://www.spanish-translator-services.com/espanol/t/007/center.html
http://www.w3.org/Style/Examples/007/center.html

Por cierto, que explorador estas usando?