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

Centrar web maquetada con Photoshop

 Estas en el tema de Centrar web maquetada con 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 24/03/2011, 13:20
Avatar de Blanck  
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Pregunta Centrar web maquetada con 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). ¿No hay manera de centrarlo todo de forma que mantega su estructura?.
  #2 (permalink)  
Antiguo 24/03/2011, 16:17
Avatar de maycolalvarez
Colaborador
  
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Centrar web maquetada con Photoshop
sin conocer la estructura del HTML y CSS generada es imposible ayudarle, postee el link, o parte del código
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 24/03/2011, 19:32
Avatar de Blanck  
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Centrar web maquetada con Photoshop
OK, 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>
  #4 (permalink)  
Antiguo 24/03/2011, 19:33
Avatar de Blanck  
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Centrar web maquetada con 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.

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 07:30.