Tema: Centrar web maquetada con Photoshop
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 24/03/2011, 19:33
Avatar de Blanck
Blanck
 
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 14 años, 5 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.