Foros del Web » Creando para Internet » Diseño web »

Cetrar web creada en photoshop

 Estas en el tema de Cetrar web creada en photoshop en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2011, 09:10
Avatar de Blanck  
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 14 años, 2 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>
  #2 (permalink)  
Antiguo 01/04/2011, 09:10
Avatar de Blanck  
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Cetrar web creada en photoshop
Código HTML:
<html>
<head>
<title>perfiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (perfiles.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 {
	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:73px;
	height:84px;
}

#perfiles-s {
	position:absolute;
	left:512px;
	top:194px;
	width:140px;
	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;
}

#body-up {
	position:absolute;
	left:60px;
	top:278px;
	width:904px;
	height:113px;
}

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

#deviantart {
	position:absolute;
	left:60px;
	top:391px;
	width:42px;
	height:42px;
}

#perfiles-16 {
	position:absolute;
	left:102px;
	top:391px;
	width:245px;
	height:42px;
}

#flickr {
	position:absolute;
	left:347px;
	top:391px;
	width:42px;
	height:42px;
}

#perfiles-18 {
	position:absolute;
	left:389px;
	top:391px;
	width:248px;
	height:42px;
}

#linkedin {
	position:absolute;
	left:637px;
	top:391px;
	width:42px;
	height:42px;
}

#perfiles-20 {
	position:absolute;
	left:679px;
	top:391px;
	width:243px;
	height:42px;
}

#youtube {
	position:absolute;
	left:922px;
	top:391px;
	width:42px;
	height:42px;
}

#body-center-h {
	position:absolute;
	left:60px;
	top:433px;
	width:904px;
	height:101px;
}

#perfiles-23 {
	position:absolute;
	left:60px;
	top:534px;
	width:140px;
	height:42px;
}

#facebook {
	position:absolute;
	left:200px;
	top:534px;
	width:42px;
	height:42px;
}

#perfiles-25 {
	position:absolute;
	left:242px;
	top:534px;
	width:249px;
	height:42px;
}

#twitter {
	position:absolute;
	left:491px;
	top:534px;
	width:42px;
	height:42px;
}

#perfiles-27 {
	position:absolute;
	left:533px;
	top:534px;
	width:247px;
	height:42px;
}

#last-fm {
	position:absolute;
	left:780px;
	top:534px;
	width:42px;
	height:42px;
}

#perfiles-29 {
	position:absolute;
	left:822px;
	top:534px;
	width:142px;
	height:42px;
}

#body-down {
	position:absolute;
	left:60px;
	top:576px;
	width:904px;
	height:129px;
}

#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 (perfiles.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">
		<img src="images/inicio.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="73" height="84" alt="">
	</div>
	<div id="perfiles-s">
		<img src="images/perfiles_s.jpg" width="140" 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="body-up">
		<img src="images/body_up.jpg" width="904" height="113" alt="">
	</div>
	<div id="body-right">
		<img src="images/body_right.jpg" width="60" height="427" alt="">
	</div>
	<div id="deviantart">
		<img src="images/deviantart.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-16">
		<img src="images/perfiles_16.jpg" width="245" height="42" alt="">
	</div>
	<div id="flickr">
		<img src="images/flickr.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-18">
		<img src="images/perfiles_18.jpg" width="248" height="42" alt="">
	</div>
	<div id="linkedin">
		<img src="images/linkedin.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-20">
		<img src="images/perfiles_20.jpg" width="243" height="42" alt="">
	</div>
	<div id="youtube">
		<img src="images/youtube.jpg" width="42" height="42" alt="">
	</div>
	<div id="body-center-h">
		<img src="images/body_center_h.jpg" width="904" height="101" alt="">
	</div>
	<div id="perfiles-23">
		<img src="images/perfiles_23.jpg" width="140" height="42" alt="">
	</div>
	<div id="facebook">
		<img src="images/facebook.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-25">
		<img src="images/perfiles_25.jpg" width="249" height="42" alt="">
	</div>
	<div id="twitter">
		<img src="images/twitter.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-27">
		<img src="images/perfiles_27.jpg" width="247" height="42" alt="">
	</div>
	<div id="last-fm">
		<img src="images/last.fm.jpg" width="42" height="42" alt="">
	</div>
	<div id="perfiles-29">
		<img src="images/perfiles_29.jpg" width="142" height="42" alt="">
	</div>
	<div id="body-down">
		<img src="images/body_down.jpg" width="904" height="129" 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>contacto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (contacto.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 {
	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-s {
	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;
}

#gran-body {
	position:absolute;
	left:60px;
	top:278px;
	width:904px;
	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 (contacto.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">
		<img src="images/inicio.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-s">
		<img src="images/contacto_s.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="gran-body">
		<img src="images/gran_body.jpg" width="904" 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>
Eso es todo. ¿No hay manera de centrarlo todo de forma que mantega su estructura?.

Etiquetas: photoshop
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:59.