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:
... y mi código css es este:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>.:: Bravo Studio | Gráfico | Arquitectónico | Fotografí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ón, Packing, Booklet, Editorial, Identidad Corporativa, Re-Branding | Fotografía a Modelo, Publicitaría, Paisaje, Retoque Fotográfico<br> 3D Arquitectónico, Perspectiva, Rendering, Presentación a Cliente | Diseño de Interfase, Proyecto Web, Programación, Administració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>
Código:
...alguien puede ayudarme, porfa?. Gracias. /* 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;
}
