Foros del Web - Ver Mensaje Individual - Cómo centro la página sin importar tamaño de pantalla?

emiliano espinosa · #8 (**permalink**) 27/02/2008, 16:47

hades 87....excelente!!, funcionó óptimo. Muchas gracias!!
les dejo los códigos, en ellos (html) uso vspace para lograr centrar la imagen a su respectivo background, mismos que están encerrados en un div, igual les dejo el link para que chequen lo que apenas llevo de una de las páginas....

la página es http://www.demonpage.com.mx Porfavor critiquen mis códigos, eso me va a ayudar muchísimo...

y el código css es:

Cita:

/* CSS Document */

BODY {
text-align: center;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-color: #1a1303;
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;
}
#contenido {
width: 1000px;
margin: 0 auto;
text-align: center;
}
#logo {
position: absolute;
z-index: 1;
width: 76px;
height: 75px;
top: 25px;
left: 285px;
}
#menu {
position: absolute;
z-index: 6;
width: 365px;
height: 10px;
top: 85px;
left: 379px;
}
#imgall {
position: absolute;
z-index: 2;
width: 545px;
height: 295px;
top: 125px;
left: 183px;
background-image: url(backall.gif);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
z-index: 4;
width: 100px;
height: 294px;
top: 125px;
left: 750px;
background-image: url(backmenu2.gif);
background-repeat: no-repeat;
}
#click {
position: absolute;
z-index: 7;
width: 70px;
height: 100px;
top: 450px;
left: 183px;
background-image: url(backclik.gif);
background-repeat: no-repeat;
}
#thumb {
position: absolute;
z-index: 5;
width: 462px;
height: 147px;
top: 450px;
left: 270px;
background-image: url(backthumb.gif);
background-repeat: no-repeat;
}
#anim {
position: absolute;
z-index: 3;
width: 100px;
height: 100px;
top: 450px;
left: 750px;
}
#info {
position: absolute;
z-index: 1;
width: 705px;
height: 40px;
top: 610px;
left: 163px;
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;
}

el código html es:

Cita:

<!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,foto grafia,retoque,perspectiva,3d,cartel,carteles,flye r,imagen,identidad,publicidad,

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

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

<body>

<center>
<div id="contenido">

<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="12"></p>
</div>

<div id="menu2">
<p><a href="graf.htm"><img src="2graf.gif" vspace="3"></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="1"></a>
<a href="arq2.htm"><img src="arq2.gif" vspace="1"></a>
<a href="arq3.htm"><img src="arq3.gif" vspace="1"></a>
<a href="arq4.htm"><img src="arq4.gif" vspace="1"></a>
<a href="arq5.htm"><img src="arq5.gif" vspace="1"></a>
<a href="arq6.htm"><img src="arq6.gif" vspace="1"></a>
<a href="arq7.htm"><img src="arq7.gif" vspace="1"></a>
<a href="arq8.htm"><img src="arq8.gif"></a>
<a href="arq9.htm"><img src="arq9.gif"></a>
<a href="arq10.htm"><img src="arq10.gif"></a>
<a href="arq11.htm"><img src="arq11.gif"></a>
<a href="arq12.htm"><img src="arq12.gif"></a>
<a href="arq13.htm"><img src="arq13.gif"></a>
<a href="arq14.htm"><img src="arq14.gif"></a>
</p></div>

<div id="click">
<p><a href="contac.htm"><img src="2contac.gif" vspace="1"></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>

</div>

</body>
</html>

en éste es donde utilizo vspace para centrar las imágenes.

Gracias........