Centrar esta página, es posible?

natillas · #1 (**permalink**) 20/10/2012, 23:22

Hola,

Resulta que tengo mi pagina realizada a través de un .PSD con photoshop, el caso es que me gustaría centrarlo pero no encuentro la forma, si no se entiende lo que necesito es que cuando la ventana del explorador no esté "expandida", o en tal caso se use una resolución "pequeña" la pagina quede centrada así:

En vez de así:

Añado el código completo de la página:

Código HTML:

<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (design.psd) -->
<style type="text/css">
div.Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1613px;
	height:1550px;
}

div.design-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1613px;
	height:485px;
}

div.design-02 {
	position:absolute;
	left:0px;
	top:485px;
	width:678px;
	height:47px;
}

div.design-50 {
	position:absolute;
	left:678px;
	top:485px;
	width:584px;
	height:855px;
}

div.design-04 {
	position:absolute;
	left:1262px;
	top:485px;
	width:351px;
	height:1065px;
}

div.design-05 {
	position:absolute;
	left:0px;
	top:532px;
	width:345px;
	height:1018px;
}

div.design-03 {
	position:absolute;
	left:345px;
	top:532px;
	width:154px;
	height:20px;
}

div.design-07 {
	position:absolute;
	left:499px;
	top:532px;
	width:179px;
	height:25px;
}

div.design-08 {
	position:absolute;
	left:345px;
	top:552px;
	width:154px;
	height:5px;
}

div.design-09 {
	position:absolute;
	left:345px;
	top:557px;
	width:1px;
	height:993px;
}

div.design-07010 {
	position:absolute;
	left:346px;
	top:557px;
	width:155px;
	height:18px;
}

div.design-11 {
	position:absolute;
	left:501px;
	top:557px;
	width:177px;
	height:162px;
}

div.design-09012 {
	position:absolute;
	left:346px;
	top:575px;
	width:155px;
	height:20px;
}

div.design-10 {
	position:absolute;
	left:346px;
	top:595px;
	width:155px;
	height:21px;
}

div.design-11014 {
	position:absolute;
	left:346px;
	top:616px;
	width:155px;
	height:19px;
}

div.design-15 {
	position:absolute;
	left:346px;
	top:635px;
	width:155px;
	height:1px;
}

div.design-16 {
	position:absolute;
	left:346px;
	top:636px;
	width:1px;
	height:914px;
}

div.design-14 {
	position:absolute;
	left:347px;
	top:636px;
	width:152px;
	height:26px;
}

div.design-18 {
	position:absolute;
	left:499px;
	top:636px;
	width:2px;
	height:83px;
}

div.design-19 {
	position:absolute;
	left:347px;
	top:662px;
	width:152px;
	height:57px;
}

div.design-20 {
	position:absolute;
	left:347px;
	top:719px;
	width:86px;
	height:212px;
}

div.design-35 {
	position:absolute;
	left:433px;
	top:719px;
	width:79px;
	height:42px;
}

div.design-22 {
	position:absolute;
	left:512px;
	top:719px;
	width:166px;
	height:831px;
}

div.design-23 {
	position:absolute;
	left:433px;
	top:761px;
	width:79px;
	height:170px;
}

div.design-07024 {
	position:absolute;
	left:347px;
	top:931px;
	width:149px;
	height:76px;
}

div.design-25 {
	position:absolute;
	left:496px;
	top:931px;
	width:16px;
	height:619px;
}

div.design-26 {
	position:absolute;
	left:347px;
	top:1007px;
	width:149px;
	height:543px;
}

div.design-27 {
	position:absolute;
	left:678px;
	top:1340px;
	width:584px;
	height:210px;
}


</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin: 0 auto;">
<!-- ImageReady Slices (design.psd) -->
<div id="divid" style="margin-left: auto;margin-right: auto;">
<div class="Tabla_01">
	<div class="design-01">
		<img src="Images/design_01.jpg" width="1613" height="485" alt="">
	</div>
	<div class="design-02">
		<img src="Images/design_02.jpg" width="678" height="47" alt="">
	</div>
	<div class="design-50">
		<img src="Images/design_50.jpg" width="584" height="855" alt="">
	</div>
	<div class="design-04">
		<img src="Images/design_04.jpg" width="351" height="1065" alt="">
	</div>
	<div class="design-05">
		<img src="Images/design_05.jpg" width="345" height="1018" alt="">
	</div>
	<div class="design-03">
		<a href="">
			<img src="Images/design_03.jpg" width="154" height="20" border="0" alt=""></a>
	</div>
	<div class="design-07">
		<img src="Images/design_07.jpg" width="179" height="25" alt="">
	</div>
	<div class="design-08">
		<img src="Images/design_08.jpg" width="154" height="5" alt="">
	</div>
	<div class="design-09">
		<img src="Images/design_09.jpg" width="1" height="993" alt="">
	</div>
	<div class="design-07010">
		<a href="">
			<img src="Images/design_07-10.jpg" width="155" height="18" border="0" alt=""></a>
	</div>
	<div class="design-11">
		<img src="Images/design_11.jpg" width="177" height="162" alt="">
	</div>
	<div class="design-09012">
		<a href="">
			<img src="Images/design_09-12.jpg" width="155" height="20" border="0" alt=""></a>
	</div>
	<div class="design-10">
		<a href="">
			<img src="Images/design_10.jpg" width="155" height="21" border="0" alt=""></a>
	</div>
	<div class="design-11014">
		<a href="">
			<img src="Images/design_11-14.jpg" width="155" height="19" border="0" alt=""></a>
	</div>
	<div class="design-15">
		<img src="Images/design_15.jpg" width="155" height="1" alt="">
	</div>
	<div class="design-16">
		<img src="Images/design_16.jpg" width="1" height="914" alt="">
	</div>
	<div class="design-14">
		<a href="">
			<img src="Images/design_14.jpg" width="152" height="26" border="0" alt=""></a>
	</div>
	<div class="design-18">
		<img src="Images/design_18.jpg" width="2" height="83" alt="">
	</div>
	<div class="design-19">
		<img src="Images/design_19.jpg" width="152" height="57" alt="">
	</div>
	<div class="design-20">
		<img src="Images/design_20.jpg" width="86" height="212" alt="">
	</div>
	<div class="design-35">
		<img src="Images/design_35.jpg" width="79" height="42" alt="PlayersOnline">
	</div>
	<div class="design-22">
		<img src="Images/design_22.jpg" width="166" height="831" alt="">
	</div>
	<div class="design-23">
		<img src="Images/design_23.jpg" width="79" height="170" alt="">
	</div>
	<div class="design-07024">
		<a href="">
			<img src="Images/design_07-24.jpg" width="149" height="76" border="0" alt=""></a>
	</div>
	<div class="design-25">
		<img src="Images/design_25.jpg" width="16" height="619" alt="">
	</div>
	<div class="design-26">
		<img src="Images/design_26.jpg" width="149" height="543" alt="">
	</div>
	<div class="design-27">
		<img src="Images/design_27.jpg" width="584" height="210" alt="">
	</div>
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

En fin, no se si será posible!

Gracias!

tutorias · #2 (**permalink**) 21/10/2012, 12:17

Si es possible, desgraciadamente esa cantidad de divs con position absolute, tal vez lo genero algún automata wysiwyg. Le dejo un bosquejo de como usar bloques y si los entiendes tal vez puedas usarlos... Te recomiendo migrar a html5 y usar transparencias css

Código HTML:

<!DOCTYPE html>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>@tutorias</title>
  <style type="text/css">
    .section{
      vertical-align: top;
    }
    .article{
      border:1px solid #ccc;
      display       : inline-block;
      max-width     : auto;
      vertical-align: top;
    }
  </style>
</head>
<body>
  <!-- bloque -->
  <div class="section">
    <div class="article">
      <img src="image.jpg" width="100" alt="" />
    </div>
    <div class="article">
      <img src="image.jpg" width="400" alt="" />
    </div>
    <div class="article">
      <img src="image.jpg" width="100" alt="" />
    </div>
  </div>
  <!-- otro bloque -->
  <div class="section">
    <div class="article">
      <img src="image.jpg" width="100" alt="" />
    </div>
  </div>
</body>
</html>