Comunidad de diseño web y desarrollo en internet online

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

Citar            
MensajeEscrito el 21 Ago 2009 04:49 pm
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.

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Ago 2009 05:37 pm
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á!

Por jackbach

Claber

196 de clabLevel

1 tutorial

 

Barcelona

firefox
Citar            
MensajeEscrito el 21 Ago 2009 06:31 pm
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
:D

Por juksoto

28 de clabLevel



Genero:Masculino  

Frontend & Estratega Digital

firefox
Citar            
MensajeEscrito el 21 Ago 2009 07:44 pm
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.

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Ago 2009 08:31 pm

riestra escribió:

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


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
:P :wink: ^^

Por juksoto

28 de clabLevel



Genero:Masculino  

Frontend & Estratega Digital

firefox
Citar            
MensajeEscrito el 22 Ago 2009 12:23 am
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>

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ago 2009 01:04 am
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]

Por juksoto

28 de clabLevel



Genero:Masculino  

Frontend & Estratega Digital

msie8
Citar            
MensajeEscrito el 22 Ago 2009 01:12 am
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>

Por juksoto

28 de clabLevel



Genero:Masculino  

Frontend & Estratega Digital

firefox
Citar            
MensajeEscrito el 22 Ago 2009 11:05 am
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>

Por riestra

73 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Ago 2009 05:38 pm
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

Por juksoto

28 de clabLevel



Genero:Masculino  

Frontend & Estratega Digital

msie8
Citar            
MensajeEscrito el 23 Ago 2009 04:42 pm
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 gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

msie8
Citar            
MensajeEscrito el 25 Ago 2009 11:05 pm
Por cierto, que explorador estas usando?

Por Mr_Anderson

151 de clabLevel



Genero:Masculino  

Terminaltor

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.