Tema: Cetrar web creada en photoshop
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/04/2011, 09:10
Avatar de Blanck
Blanck
 
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Pregunta Cetrar web creada en photoshop
Buenas gente. Tengo este problema:

Arme una web en photoshop y la exporte. Los html quedaron perfectos, con su css y demas, pero al momento de subirla, me doy cuenta que no la puedo centrar.
Obviamente, como esta armada integramente en photoshop, el contenido de la web es 100% imagenes, y el tamaño de la web es de 1024x768, pero si lo ves en un monitor mas grande, la web aparece en la esquina superios izquierda de la pantalla, y el resto, background.
El problema esta en que cuando la quiero centrar, o no puedo, o me pone todo en el medio, pero en columna (o sea, una imagen por renglon, una abajo de la otra). Aca estan las estructuras crudas, sin tocar a como salieron de photoshop.

Código HTML:
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (index.psd) -->
<style type="text/css">
<!--

#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#banner {
	position:absolute;
	left:0px;
	top:0px;
	width:652px;
	height:194px;
}

#banner-side {
	position:absolute;
	left:652px;
	top:0px;
	width:372px;
	height:194px;
}

#navbar-left {
	position:absolute;
	left:0px;
	top:194px;
	width:156px;
	height:84px;
}

#inicio-s {
	position:absolute;
	left:156px;
	top:194px;
	width:99px;
	height:84px;
}

#blank1 {
	position:absolute;
	left:255px;
	top:194px;
	width:85px;
	height:84px;
}

#blog {
	position:absolute;
	left:340px;
	top:194px;
	width:99px;
	height:84px;
}

#blank2 {
	position:absolute;
	left:439px;
	top:194px;
	width:74px;
	height:84px;
}

#perfiles {
	position:absolute;
	left:513px;
	top:194px;
	width:139px;
	height:84px;
}

#blank3 {
	position:absolute;
	left:652px;
	top:194px;
	width:71px;
	height:84px;
}

#contacto {
	position:absolute;
	left:723px;
	top:194px;
	width:156px;
	height:84px;
}

#navbar-right {
	position:absolute;
	left:879px;
	top:194px;
	width:145px;
	height:84px;
}

#body-left {
	position:absolute;
	left:0px;
	top:278px;
	width:60px;
	height:427px;
}

#intro {
	position:absolute;
	left:60px;
	top:278px;
	width:592px;
	height:427px;
}

#body-center-right {
	position:absolute;
	left:652px;
	top:278px;
	width:27px;
	height:427px;
}

#foto {
	position:absolute;
	left:679px;
	top:278px;
	width:285px;
	height:427px;
}

#body-right {
	position:absolute;
	left:964px;
	top:278px;
	width:60px;
	height:427px;
}

#footer {
	position:absolute;
	left:0px;
	top:705px;
	width:1024px;
	height:63px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (index.psd) -->
<div id="Tabla_01">
	<div id="banner">
		<img src="images/banner.jpg" width="652" height="194" alt="">
	</div>
	<div id="banner-side">
		<img src="images/banner_side.jpg" width="372" height="194" alt="">
	</div>
	<div id="navbar-left">
		<img src="images/navbar_left.jpg" width="156" height="84" alt="">
	</div>
	<div id="inicio-s">
		<img src="images/inicio_s.jpg" width="99" height="84" alt="">
	</div>
	<div id="blank1">
		<img src="images/blank1.jpg" width="85" height="84" alt="">
	</div>
	<div id="blog">
		<img src="images/blog.jpg" width="99" height="84" alt="">
	</div>
	<div id="blank2">
		<img src="images/blank2.jpg" width="74" height="84" alt="">
	</div>
	<div id="perfiles">
		<img src="images/perfiles.jpg" width="139" height="84" alt="">
	</div>
	<div id="blank3">
		<img src="images/blank3.jpg" width="71" height="84" alt="">
	</div>
	<div id="contacto">
		<img src="images/contacto.jpg" width="156" height="84" alt="">
	</div>
	<div id="navbar-right">
		<img src="images/navbar_right.jpg" width="145" height="84" alt="">
	</div>
	<div id="body-left">
		<img src="images/body_left.jpg" width="60" height="427" alt="">
	</div>
	<div id="intro">
		<img src="images/intro.jpg" width="592" height="427" alt="">
	</div>
	<div id="body-center-right">
		<img src="images/body_center_right.jpg" width="27" height="427" alt="">
	</div>
	<div id="foto">
		<img src="images/foto.jpg" width="285" height="427" alt="">
	</div>
	<div id="body-right">
		<img src="images/body_right.jpg" width="60" height="427" alt="">
	</div>
	<div id="footer">
		<img src="images/footer.jpg" width="1024" height="63" alt="">
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
Código HTML:
<html>
<head>
<title>blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (blog.psd) -->
<style type="text/css">
<!--

#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#banner {
	position:absolute;
	left:0px;
	top:0px;
	width:652px;
	height:194px;
}

#banner-side {
	position:absolute;
	left:652px;
	top:0px;
	width:372px;
	height:194px;
}

#navbar-left {
	position:absolute;
	left:0px;
	top:194px;
	width:156px;
	height:83px;
}

#inicio {
	position:absolute;
	left:156px;
	top:194px;
	width:99px;
	height:83px;
}

#blank1 {
	position:absolute;
	left:255px;
	top:194px;
	width:85px;
	height:83px;
}

#blog-s {
	position:absolute;
	left:340px;
	top:194px;
	width:99px;
	height:83px;
}

#blank2 {
	position:absolute;
	left:439px;
	top:194px;
	width:74px;
	height:83px;
}

#perfiles {
	position:absolute;
	left:513px;
	top:194px;
	width:139px;
	height:83px;
}

#blank3 {
	position:absolute;
	left:652px;
	top:194px;
	width:71px;
	height:83px;
}

#contacto {
	position:absolute;
	left:723px;
	top:194px;
	width:156px;
	height:83px;
}

#navbar-right {
	position:absolute;
	left:879px;
	top:194px;
	width:145px;
	height:83px;
}

#body-left {
	position:absolute;
	left:0px;
	top:277px;
	width:60px;
	height:428px;
}

#blog-logo {
	position:absolute;
	left:60px;
	top:277px;
	width:280px;
	height:428px;
}

#body-center-left {
	position:absolute;
	left:340px;
	top:277px;
	width:29px;
	height:428px;
}

#about-blog {
	position:absolute;
	left:369px;
	top:277px;
	width:595px;
	height:428px;
}

#body-right {
	position:absolute;
	left:964px;
	top:277px;
	width:60px;
	height:428px;
}

#footer {
	position:absolute;
	left:0px;
	top:705px;
	width:1024px;
	height:63px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (blog.psd) -->
<div id="Tabla_01">
	<div id="banner">
		<img src="images/banner.jpg" width="652" height="194" alt="">
	</div>
	<div id="banner-side">
		<img src="images/banner_side.jpg" width="372" height="194" alt="">
	</div>
	<div id="navbar-left">
		<img src="images/navbar_left.jpg" width="156" height="83" alt="">
	</div>
	<div id="inicio">
		<img src="images/inicio.jpg" width="99" height="83" alt="">
	</div>
	<div id="blank1">
		<img src="images/blank1.jpg" width="85" height="83" alt="">
	</div>
	<div id="blog-s">
		<img src="images/blog_s.jpg" width="99" height="83" alt="">
	</div>
	<div id="blank2">
		<img src="images/blank2.jpg" width="74" height="83" alt="">
	</div>
	<div id="perfiles">
		<img src="images/perfiles.jpg" width="139" height="83" alt="">
	</div>
	<div id="blank3">
		<img src="images/blank3.jpg" width="71" height="83" alt="">
	</div>
	<div id="contacto">
		<img src="images/contacto.jpg" width="156" height="83" alt="">
	</div>
	<div id="navbar-right">
		<img src="images/navbar_right.jpg" width="145" height="83" alt="">
	</div>
	<div id="body-left">
		<img src="images/body_left.jpg" width="60" height="428" alt="">
	</div>
	<div id="blog-logo">
		<img src="images/blog_logo.jpg" width="280" height="428" alt="">
	</div>
	<div id="body-center-left">
		<img src="images/body_center_left.jpg" width="29" height="428" alt="">
	</div>
	<div id="about-blog">
		<img src="images/about_blog.jpg" width="595" height="428" alt="">
	</div>
	<div id="body-right">
		<img src="images/body_right.jpg" width="60" height="428" alt="">
	</div>
	<div id="footer">
		<img src="images/footer.jpg" width="1024" height="63" alt="">
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>