Tema: Cómo centro la página sin importar tamaño de pantalla?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/02/2008, 10:47
emiliano espinosa
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 17 años, 11 meses
Puntos: 1
Cómo centro la página sin importar tamaño de pantalla?
Amigos del foro, vean que mi problema es este, ojalá me puedan ayudar:
cómo 'fijo' los elementos de mi página para que aparezcan siempre 'centrados' en cualquier pantalla sin importar el tamaño de esta?
Mi código html es este:
Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.:: Bravo Studio | Gr&aacute;fico | Arquitect&oacute;nico | Fotograf&iacute;a | Imagen ::.</title>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">

<meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/css">

<meta name="description" content="Diseno,Grafico,Fotografia,Internet">

<meta name="keywords" content="diseño,diseno,internet,web,interfase,fotografia,retoque,perspectiva,3d,cartel,carteles,flyer,imagen,identidad,publicidad,

campaña publicitaria, mala, yerba, malayerba, arquitectura, presentacion,packing,branding,booklet,editorial,ilustracion,render,rendering">

<link rel="STYLESHEET" type="text/css" href="bravo.css">
</head>

<body>

<center>
<table align="center" border="3" bordercolor="#333" cellpadding="0" cellspacing="0" width="1000" height="600">
<td align="center" valign="middle" width="1000" height="650">
<div id="logo">
<p><img src="logo.png">
</div>

<div id="menu">
<a href="home.htm" class="menutext">HOME</a> |

<a href="graf.htm" class="menutext">GRAFICO</a> |

ARQUITECTONICO |

<a href="foto.htm" class="menutext">FOTOGRAFIA</a> |

<a href="contac.htm" class="menutext">CONTACTO</a>
</p></div>

<div id="imgall">
<p><img src="imgarq.gif" vspace="20"></p>
</div>

<div id="menu2">
<p><a href="graf.htm"><img src="2graf.gif" vspace="10"></a>
<a href="foto.htm"><img src="2foto.gif"></a>
</p></div>

<div id="thumb">
<p><a href="arq1.htm"><img src="arq1.gif" vspace="9" hspace="2"></a>
<a href="arq2.htm"><img src="arq2.gif" vspace="9" hspace="2"></a>
<a href="arq3.htm"><img src="arq3.gif" vspace="9" hspace="2"></a>
<a href="arq4.htm"><img src="arq4.gif" vspace="9" hspace="2"></a>
<a href="arq5.htm"><img src="arq5.gif" vspace="9" hspace="2"></a>
<a href="arq6.htm"><img src="arq6.gif" vspace="9" hspace="2"></a>
<a href="arq7.htm"><img src="arq7.gif" vspace="9" hspace="2"></a>
<a href="arq8.htm"><img src="arq8.gif" hspace="2"></a>
<a href="arq9.htm"><img src="arq9.gif" hspace="2"></a>
<a href="arq10.htm"><img src="arq10.gif" hspace="2"></a>
<a href="arq11.htm"><img src="arq11.gif" hspace="2"></a>
<a href="arq12.htm"><img src="arq12.gif" hspace="2"></a>
<a href="arq13.htm"><img src="arq13.gif" hspace="2"></a>
<a href="arq14.htm"><img src="arq14.gif" hspace="2"></a>
</p></div>

<div id="click">
<p><a href="contac.htm"><img src="2contac.gif" vspace="10"></a>
</p></div>

<div id="info">
<p>Ilustraci&oacute;n, Packing, Booklet, Editorial, Identidad Corporativa, Re-Branding | 
Fotograf&iacute;a a Modelo, Publicitar&iacute;a, Paisaje, Retoque Fotogr&aacute;fico<br>
3D Arquitect&oacute;nico, Perspectiva, Rendering, Presentaci&oacute;n a Cliente | 
Dise&ntilde;o de Interfase, Proyecto Web, Programaci&oacute;n, Administraci&oacute;n de Portal<br>
<span>[email protected] | [55].5868.8090 | [04455].2768.8992</span>
</p></div>

<div id="anim">
<p><img src="anim.gif"></p></div>
</td>
</table>
</center>
</body>
</html>
... y mi código css es este:

Código: 
/* CSS Document */

BODY {
background-color: #2d291c;
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;
color: #d07614;
}
IMG {
border: 0;
text-decoration: none;
}
SPAN {
font: normal bold 11px/10pt Helvetica, Tahoma, Arial;
color: #d4ceaf;
text-align: center;
line-height: 15px;
}
#logo {
position: absolute;
z-index: 1;
width: 76px;
height: 75px;
top: 25px;
left: 335px;
}
#menu {
position: absolute;
z-index: 6;
width: 365px;
height: 10px;
top: 85px;
left: 429px;
}
#imgall {
position: absolute;
z-index: 2;
width: 545px;
height: 295px;
top: 125px;
left: 233px;
background-image: url(backall.gif);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
z-index: 4;
width: 100px;
height: 294px;
top: 125px;
left: 800px;
background-image: url(backmenu2.gif);
background-repeat: no-repeat;
}
#click {
position: absolute;
z-index: 7;
width: 70px;
height: 100px;
top: 450px;
left: 233px;
background-image: url(backclik.gif);
background-repeat: no-repeat;
}
#thumb {
position: absolute;
z-index: 5;
width: 462px;
height: 147px;
top: 450px;
left: 320px;
background-image: url(backthumb.gif);
background-repeat: no-repeat;
}
#anim {
position: absolute;
z-index: 3;
width: 100px;
height: 100px;
top: 450px;
left: 800px;
}
#info {
position: absolute;
z-index: 1;
width: 705px;
height: 40px;
top: 610px;
left: 213px;
text-align: center;
line-height: 13px;
}
#imgcontac {
position: absolute;
z-index: 2;
width: 150px;
height: 300px;
top: 115px;
left: 398px;
}
#formtext {
position: absolute;
z-index: 3;
width: 300px;
height: 300px;
top: 115px;
left: 560px;
}
a {
text-decoration: none; 
color: #bc2e00;
}
a:link {
color: #bc2e00;
}
a:visited {
color: #d07614;
}
a:hover {
color: #a97b00;
}
a:active {
color: #bc2e00;
}
...alguien puede ayudarme, porfa?. Gracias.