pagina centrada.

sandra1977 · #1 (**permalink**) 20/12/2008, 16:05

Hola. Estoy haciendo una web con tablas.....he hecho una tabla al 100% de una fila y una columna, y luego he metido en ella capas para poner las distintas imagenes dentro de ellas.
mi problema es que al hacerlo en mi pantalla me queda muy bien, pero al vela en otra pantalla mas pequeña, queda un espacio por debajo en blanco, es decir, no ocupa toda la pantalla, y las capas no aparecen en el mismo lugar, se mueven. Todavia no tengo la web colgada,y no se si sera por eso..aunque lo dudo, pero no se que pasara.
Si alguien me puede decir que pasa, estaria muy agradecida.
Muchas gracias.

manumaf · #2 (**permalink**) 20/12/2008, 17:17

Pon algo de codigo por que pueden ser varias cosas las cusantes

McPinkY18 · #3 (**permalink**) 21/12/2008, 14:13

td align center no es?

DragonX · #4 (**permalink**) 22/12/2008, 06:50

podriamos ver el código fuente de la tabla?

piero19 · #5 (**permalink**) 23/12/2008, 05:30

seria muy recomendable que subas tu pagina para poder verlo y ayudarte mejor.

sandra1977 · #6 (**permalink**) 26/12/2008, 10:22

Hola...la pagina todavia no esta colgada, pero os dejo el codigo.
Muchas gracias.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css">

</style>
<style type="text/css">

</style>
</head>

<body>

<table border="2" width="100%" height="300" align="center">
<tr>

<td height="90" bgcolor="#FFFF00">
<div id="Layer4" style="position:absolute; width:116px; height:91px; z-index:3; left: 135px; top: 16px;"><img src="billetes4.jpg" width="111" height="85"></div>
<div id="Layer5" style="position:absolute; width:93px; height:95px; z-index:4; left: 15px; top: 18px;"><img src="logo%20credit.jpg" width="92" height="88"></div>
<div id="Layer6" style="position:absolute; width:124px; height:97px; z-index:5; left: 840px; top: 17px;"><img src="dibujobilletes1.jpg" width="124" height="90"></div>
<div id="Layer19" style="position:absolute; width:653px; height:72px; z-index:15; left: 262px; top: 20px;">
<p><b><font color="#0000CD" face="Verdana" size="5">
<marquee width="400" scrollamount="5" bgcolor="#FFFF00">¿¿¿¿NECESITA DINERO URGENTE????----NOSOTROS SE LO DAMOS</marquee></font></b></p>

</div></td>
</tr>
<tr>

<td valign="top"height="385" ><table width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
<tr>
<td width="23%">
</td>

<td width="77%" background="Money.jpg" bgcolor="#FFFFCC">
<div id="Layer1" style="position:absolute; width:191px; height:378px; z-index:1; left: 16px; top: 113px;">
<table width="117%" height="219" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menu"><div align="center"><a href="INICIO.htm">INICIO</a></div></td>
</tr>
<tr>
<td class="menu"><div align="center"><a href="productos.htm">PRODUCTOS</a></div></td>
</tr>
<tr>
<td class="menu"><div align="center"><a href="colaboradores.htm">COLABORADORES</a></div></td>
</tr>
<tr>
<td class="menu"><div align="center"><a href="contacta.htm">CONTACTA</a></div></td>
</tr>
<tr>
<td class="menu"><div align="center"><a href="aviso%20legal.htm">AVISO
LEGAL</a></div></td>
</tr>
</table>
</div>
<div id="solicitaprestamonline" style="position:absolute; width:226px; height:158px; z-index:2; left: 15px; top: 332px;">
<p> </p>
<p align="center" class="menu"><a href="solicitud%20prestamo%20on%20line.htm">SOLICI TA
PRESTAMO ONLINE</a></p>
<div id="imagen1" style="position:absolute; width:160px; height:30px; z-index:3; left: 40px; top: 86px;"><img src="respuesta.png" width="162" height="36"></div>
<p> </p>
<div id="Layer3" style="position:absolute; width:84px; height:40px; z-index:3; left: 112px; top: 118px;"><img src="acto.png" width="83" height="35"></div>
<p> </p>
<div id="Layer2" style="position:absolute; width:78px; height:30px; z-index:3; left: 29px; top: 120px;"><img src="en%20el.png" width="81" height="35"></div>
</div>
<div id="Layer7" style="position:absolute; width:330px; height:37px; z-index:6; left: 321px; top: 154px;">
<h1><img src="dinerourgente5.png" width="671" height="67"><font face="Comic Sans MS"><strong>
</strong></font></h1>
</div>
<div id="Layer8" style="position:absolute; width:218px; height:21px; z-index:7; left: 357px; top: 229px;"><img src="dni1.png" width="561" height="51"></div>
<p> </p>
<div id="Layer9" style="position:absolute; width:136px; height:41px; z-index:8; left: 379px; top: 284px;">
<img src="tema2.png" width="452" height="39" class="lista"> </div>
<div id="Layer10" style="position:absolute; width:89px; height:38px; z-index:9; left: 286px; top: 438px;"><img src="telefono1.png" width="184" height="38"></div>
<p> </p>
<div id="Layer11" style="position:absolute; width:64px; height:58px; z-index:10; left: 301px; top: 377px;"><img src="telephone06.gif" width="60" height="55"></div>
<p> </p>
<div id="Layer12" style="position:absolute; width:165px; height:23px; z-index:11; left: 473px; top: 440px;" class="numerotelefono">902
345 678</div>
<div id="Layer13" style="position:absolute; width:214px; height:94px; z-index:12; left: 508px; top: 326px;">
<div id="Layer15" style="position:absolute; width:184px; height:24px; z-index:13; left: 2px; top: 13px;"><img src="solucionamos.png" width="182" height="23"></div>
<div id="Layer14" style="position:absolute; width:277px; height:22px; z-index:13; left: 143px; top: 129px;" class="tres">Más
información acerca de este tema visita nuestra web <a href="tramitacionesonline.htm">www.tramitacioneson line.es</a></div>
<p> </p><ul>
<li><span class="lista">Subastas </span>
<div id="Layer16" style="position:absolute; width:231px; height:51px; z-index:13; left: 117px;">
<ul>
<li class="lista">Liquidez urgente</li>
<li class="lista">Cancelamos RAI / ASNEF</li>
</ul>
</div>
</li>
<li class="lista">Embargos</li>
</ul>
</div>
<p> </p>
<p> </p>
<p class="numerotelefono"> </p>
<div id="Layer17" style="position:absolute; width:36px; height:20px; z-index:13; left: 732px; top: 415px;"><img src="flecha1.gif" width="23" height="39"></div>
<div id="Layer18" style="position:absolute; width:134px; height:55px; z-index:14; left: 862px; top: 297px;"><a href="mailto:[email protected]"><img src="buzpnrojo1.gif" alt="escribenos un e-mail"style="border:none" /></a></div>
<p> </p></td>
</tr>
</table> </td>
</tr>
<tr>

<td height="10" bgcolor="#FFFF00">
<center class="pie">
Todas las situaciones economicas tienen solucion. Sólo hay que saber buscarla.
</center>
</td>
</tr>
</table>

</body>
</html>

juaniquillo · #7 (**permalink**) 27/12/2008, 10:36

Tienes que acordarte que un website no es una página de papel con alto y ancho. El alto es definido por el contenido y por la resolución del usuario. Si lo que quieres es que tu tabla ocupe una altura de 100% mira este mensaje de Mikel:
http://www.forosdelweb.com/f53/centr...ciones-655194/

sandra1977 · #8 (**permalink**) 27/12/2008, 16:12

Ya....lo que pasa es que la verdad es que estoy un poco perdida en esto......seria como dicen encerrar todo en una capa con un determinado ancho y luego poner en el css margin:0 auto.
Pero cual seria entonces lo que tendria que poner...justo detras de body:
<div id="capapral" style="position:absolute; width:100%; margin:0 auto;">
o faltaria algo..supongo que si faltara..si me pudierais decir como seria??
Muchas gracias.

juaniquillo · #9 (**permalink**) 28/12/2008, 10:05

Por lo que veo creaste tu página usando capas de Dreamweaver, lo cual posiciona todo absolutamente en píxeles con respecto al la ventana del navegador. Yo te recomiendo que no uses capas si no tienes los conceptos CSS de posicionamiento claros. Lo que puedes hacer para resolver es crear un div contenedor con posición relativa, así:

Código html:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.menu {
    font-family: "Arial Black";
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: uppercase;
    color: #9933FF;
    background-color: #FFFF00;
    background-image: url(yellow_tiles.jpg);
}
-->
</style>
<style type="text/css">
<!--
.pie {
    font-family: "Comic Sans MS";
    font-size: 18px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    text-transform: none;
    color: #663399;
}
.encabezado {
    font-family: "Comic Sans MS";
    font-size: large;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    font-variant: small-caps;
    text-transform: uppercase;
    color: #0000CC;
    text-decoration: underline blink;
}
.numerotelefono {
    font-family: "Comic Sans MS";
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    color: #990033;
    text-transform: uppercase;
}
.lista {
    font-family: "Comic Sans MS";
    font-size: 14px;
    font-style: normal;
    font-weight: bolder;
    text-transform: none;
    color: #990099;
}
.tres {
    font-family: "Comic Sans MS";
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    color: #0000FF;
}
-->
</style>
</head>
 
<body>
<div style="width:950px;margin:0 auto;position:relative">
<table border="2" width="100%" height="300" align="center">
  <tr>
        
    <td height="90" bgcolor="#FFFF00"> 
<div id="Layer4" style="position:absolute; width:116px; height:91px; z-index:3; left: 135px; top: 16px;"><img src="billetes4.jpg" width="111" height="85"></div>
<div id="Layer5" style="position:absolute; width:93px; height:95px; z-index:4; left: 15px; top: 18px;"><img src="logo%20credit.jpg" width="92" height="88"></div>
<div id="Layer6" style="position:absolute; width:124px; height:97px; z-index:5; left: 840px; top: 17px;"><img src="dibujobilletes1.jpg" width="124" height="90"></div>
      <div id="Layer19" style="position:absolute; width:653px; height:72px; z-index:15; left: 262px; top: 20px;">
<p><b><font color="#0000CD" face="Verdana" size="5">
<marquee width="400" scrollamount="5" bgcolor="#FFFF00">¿¿¿¿NECESITA DINERO URGENTE????----NOSOTROS SE LO DAMOS</marquee></font></b></p>
 
      </div></td>
    </tr>
    <tr>
        
    <td valign="top"height="385" ><table width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
        <tr> 
          <td width="23%">
          </td>
          
          <td width="77%" background="Money.jpg" bgcolor="#FFFFCC"> 
            <div id="Layer1" style="position:absolute; width:191px; height:378px; z-index:1; left: 16px; top: 113px;"> 
              <table width="117%" height="219" border="0" cellpadding="0" cellspacing="0">
                <tr>
<td class="menu"><div align="center"><a href="INICIO.htm">INICIO</a></div></td>
                </tr>
                <tr>
<td class="menu"><div align="center"><a href="productos.htm">PRODUCTOS</a></div></td>
                </tr>
                <tr>
<td class="menu"><div align="center"><a href="colaboradores.htm">COLABORADORES</a></div></td>
                </tr>
                <tr>
<td class="menu"><div align="center"><a href="contacta.htm">CONTACTA</a></div></td>
                </tr>
                <tr>
                  <td class="menu"><div align="center"><a href="aviso%20legal.htm">AVISO 
                      LEGAL</a></div></td>
                </tr>
              </table>
            </div>
<div id="solicitaprestamonline" style="position:absolute; width:226px; height:158px; z-index:2; left: 15px; top: 332px;"> 
              <p>&nbsp;</p>
              <p align="center" class="menu"><a href="solicitud%20prestamo%20on%20line.htm">SOLICI  TA 
                PRESTAMO ONLINE</a></p>
<div id="imagen1" style="position:absolute; width:160px; height:30px; z-index:3; left: 40px; top: 86px;"><img src="respuesta.png" width="162" height="36"></div>
              <p>&nbsp;</p>
<div id="Layer3" style="position:absolute; width:84px; height:40px; z-index:3; left: 112px; top: 118px;"><img src="acto.png" width="83" height="35"></div>
              <p>&nbsp;</p>
<div id="Layer2" style="position:absolute; width:78px; height:30px; z-index:3; left: 29px; top: 120px;"><img src="en%20el.png" width="81" height="35"></div>
            </div>
            <div id="Layer7" style="position:absolute; width:330px; height:37px; z-index:6; left: 321px; top: 154px;"> 
<h1><img src="dinerourgente5.png" width="671" height="67"><font face="Comic Sans MS"><strong> 
                </strong></font></h1>
            </div>
<div id="Layer8" style="position:absolute; width:218px; height:21px; z-index:7; left: 357px; top: 229px;"><img src="dni1.png" width="561" height="51"></div>
            <p>&nbsp;</p>
            <div id="Layer9" style="position:absolute; width:136px; height:41px; z-index:8; left: 379px; top: 284px;"> 
              <img src="tema2.png" width="452" height="39" class="lista"> </div>
<div id="Layer10" style="position:absolute; width:89px; height:38px; z-index:9; left: 286px; top: 438px;"><img src="telefono1.png" width="184" height="38"></div>
            <p>&nbsp;</p>
<div id="Layer11" style="position:absolute; width:64px; height:58px; z-index:10; left: 301px; top: 377px;"><img src="telephone06.gif" width="60" height="55"></div>
            <p>&nbsp;</p>
<div id="Layer12" style="position:absolute; width:165px; height:23px; z-index:11; left: 473px; top: 440px;" class="numerotelefono">902 
              345 678</div>
            <div id="Layer13" style="position:absolute; width:214px; height:94px; z-index:12; left: 508px; top: 326px;"> 
<div id="Layer15" style="position:absolute; width:184px; height:24px; z-index:13; left: 2px; top: 13px;"><img src="solucionamos.png" width="182" height="23"></div>
<div id="Layer14" style="position:absolute; width:277px; height:22px; z-index:13; left: 143px; top: 129px;" class="tres">M&aacute;s 
informaci&oacute;n acerca de este tema visita nuestra web <a href="tramitacionesonline.htm">[url]www.tramitacioneson[/url] line.es</a></div>
              <p>&nbsp;</p><ul>
                <li><span class="lista">Subastas </span> 
                  <div id="Layer16" style="position:absolute; width:231px; height:51px; z-index:13; left: 117px;"> 
                    <ul>
                      <li class="lista">Liquidez urgente</li>
                      <li class="lista">Cancelamos RAI / ASNEF</li>
                    </ul>
                  </div>
                </li>
                <li class="lista">Embargos</li>
              </ul>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p class="numerotelefono">&nbsp;</p>
<div id="Layer17" style="position:absolute; width:36px; height:20px; z-index:13; left: 732px; top: 415px;"><img src="flecha1.gif" width="23" height="39"></div>
<div id="Layer18" style="position:absolute; width:134px; height:55px; z-index:14; left: 862px; top: 297px;"><a href="mailto:[email protected]"><img src="buzpnrojo1.gif" alt="escribenos un e-mail"style="border:none" /></a></div>
          <p>&nbsp;</p></td>
        </tr>
      </table> </td>
    </tr>
    <tr>
        
    <td height="10" bgcolor="#FFFF00"> 
      <center class="pie">
        Todas las situaciones economicas tienen solucion. Sólo hay que saber buscarla. 
      </center>
        </td>
        </tr>
</table>
</div>
</body>
</html>

Puedes darle el ancho que quieras, yo le he dado el ancho de 950px. También puede que tengas que mover las imagenes un poco pero esta vez se moverén con respecto al div contenedor no al borde del navegador. me dejas saber si te funciona.

sandra1977 · #10 (**permalink**) 28/12/2008, 17:31

ok...voy a probarlo..
y si pusiera..<div align="center">
tambien me saldria? Es que antes de que me lo dijeras lo puse y no me sale mal..pero no se parece mucho a lo tuyo...que hago????

juaniquillo · #11 (**permalink**) 29/12/2008, 08:01

no. el <div align="center"> lo que hace es que centraliza lo que esta dentro del div, no afecta la alineación del mismo div.

sandra1977 · #12 (**permalink**) 02/01/2009, 17:22

Hola.Ya he probado con lo que me dijiste y con ese codigo la verdad es que solo he tenido que cambiar las imagenes un poquillo de sitio, pero si, ya me salen iguales.
El problema que teng ahora es que si lo veo en ordenador de sobremesa que la pantalla es de 19 pulgadas, queda perfectamente bien cuadrada, ya q el ancho que fue lo que me dijiste que modificase lo puse para que saliera perfectamente cuadrado en ella, creo recordar que he puesto 1250 o algo asi.
Pero el problema es que cuando lo veo en el portatil que la pantalla tiene 16 pulgadas, ya no me sale igual..y me salen las barras de desplazamiento.
No se si me explico bien.....el caso es que no se si habra alguna forma de "cuadrar" la pagina para que se vea en todas las pantallas o no.
Muchas gracias de verdad por ayudarme.

juaniquillo · #13 (**permalink**) 04/01/2009, 10:52

Hola de nuevo. Para que el tamaño de tu contenedor se ajuste a todas las resoluciones debes usar un diseño fluido o líquido. Aunque para eso debes optimizar tu contendio para que también sea cambiante y se adapte a cada resolución.

sandra1977 · #14 (**permalink**) 04/01/2009, 14:10

Ok.Lo estoy intentando, vamos..no se si lo estare haciendo bien....estoy cambiando todas las medidas en vez de ser en px a %...pero se me van las imagenes....seria asi??cambiando todos los px por %??

juaniquillo · #15 (**permalink**) 06/01/2009, 08:23

Eso lo sabrás cuando empieces a cambiarlo todo ya que cada caso es diferente dependiendo del diseño. Si te sientes estancada en algún momento puedes traer el problema específico.