Foros del Web » Creando para Internet » CSS »

Como centrar una web en html+css hecha en photoshop?

Estas en el tema de Como centrar una web en html+css hecha en photoshop? en el foro de CSS en Foros del Web. Hola, me está volviendo loco esto, probé las cosas más básicas (soy bastante novato en esto de css) y no me funciona, a ver si ...
  #1 (permalink)  
Antiguo 19/05/2010, 18:50
 
Fecha de Ingreso: mayo-2010
Mensajes: 2
Antigüedad: 6 años, 10 meses
Puntos: 0
Exclamación Como centrar una web en html+css hecha en photoshop?

Hola, me está volviendo loco esto, probé las cosas más básicas (soy bastante novato en esto de css) y no me funciona, a ver si alguien me puede decir que estoy haciendo mal.

La web la tengo que hacer entera en photoshop para poder crear un diseño más llamativo, ya que es la única manera que se me ocurre de crear botones superpuestos sobre una misma imagen del header.

Necesito centrar la web entera, en la actualidad queda pegado al margen izquierdo, yo necesito que quede centrada, sea cual sea la resolución del visitante.



Este es el código:

Código:
<html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Save for Web Styles (Sin título-1) -->
<style type="text/css">
<!--

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

#Sin-txedtulo-1-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:131px;
}

#Sinx20txedtulo-1-02 {
	position:absolute;
	left:0px;
	top:131px;
	width:87px;
	height:36px;
}

#Sinx20txedtulo-1-03 {
	position:absolute;
	left:87px;
	top:131px;
	width:73px;
	height:36px;
}

#Sinx20txedtulo-1-04 {
	position:absolute;
	left:160px;
	top:131px;
	width:102px;
	height:36px;
}

#Sinx20txedtulo-1-05 {
	position:absolute;
	left:262px;
	top:131px;
	width:90px;
	height:36px;
}

#Sinx20txedtulo-1-06 {
	position:absolute;
	left:352px;
	top:131px;
	width:106px;
	height:36px;
}

#Sin-txedtulo-1-07 {
	position:absolute;
	left:458px;
	top:131px;
	width:566px;
	height:893px;
}

#Sin-txedtulo-1-08 {
	position:absolute;
	left:0px;
	top:167px;
	width:458px;
	height:857px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (Sin título-1) -->
<div id="Tabla_01">
	<div id="Sin-txedtulo-1-01">
		<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_01.gif" width="1024" height="131" alt="">
	</div>
	<div id="Sinx20txedtulo-1-02">
		<a href="index.html">
			<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_02.jpg" width="87" height="36" border="0" alt=""></a>
	</div>
	<div id="Sinx20txedtulo-1-03">
		<a href="foro/">
			<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_03.gif" width="73" height="36" border="0" alt=""></a>
	</div>
	<div id="Sinx20txedtulo-1-04">
		<a href="matches.html">
			<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_04.gif" width="102" height="36" border="0" alt=""></a>
	</div>
	<div id="Sinx20txedtulo-1-05">
		<a href="demos.html">
			<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_05.gif" width="90" height="36" border="0" alt=""></a>
	</div>
	<div id="Sinx20txedtulo-1-06">
		<a href="contacto.html">
			<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_06.gif" width="106" height="36" border="0" alt=""></a>
	</div>
	<div id="Sin-txedtulo-1-07">
		<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_07.gif" width="566" height="893" alt="">
	</div>
	<div id="Sin-txedtulo-1-08">
		<img src="im&#xe1;genes/Sin-t&#xed;tulo-1_08.gif" width="458" height="857" alt="">
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>


Probé poniendo algún align=center en los div y no hace absolutamente nada, quizás deba sacar algo del CSS que me esté prohibiendo el align, pero no sé que ^^

Disculpen por la novatada, y gracias de antemano a quien pueda darme una manito ^^
  #2 (permalink)  
Antiguo 19/05/2010, 19:53
Avatar de carmagedon  
Fecha de Ingreso: junio-2005
Ubicación: Argentina
Mensajes: 794
Antigüedad: 11 años, 9 meses
Puntos: 23
Respuesta: Como centrar una web en html+css hecha en photoshop?

Hola,

Te doy un consejo? Meté a todos en un solo contenedor y dale un estilo. Te digo así tenés donde buscar por cualquier problema.
En el contenedor principal, yo le pondría
Cita:
.contenedorPrincipal{
position: absolute;
Width: 100%;
height: 100%;
margin-left: auto;
margin-right:auto;
}
Pero viendo tu código.. probá cambiando en éste estilo:

Cita:
#Tabla_01 {
position:absolute;
width:1024px;
height:1024px;
margin-left: auto;
margin-right: auto;
}
Suerte.
__________________
Freelance - Aplicaciones Web
  #3 (permalink)  
Antiguo 19/05/2010, 20:19
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 1 mes
Puntos: 995
Respuesta: Como centrar una web en html+css hecha en photoshop?

thomashardy:
a) Bienvenido al foro

b) El código que te genera photosop... es malo. Pero malo malo.No se que necesidad hay con marearse con las posiciones absolutas... la verdad que te recomiendo aprender html y css, porque con poco que investigues te vas a dar cuenta que para muchas de las cosas que quieras hacer, los necesitas saber.

c) NUNCA hay que usar 1024px para el ancho, ya que las barras de scroll, borde de la ventana, etc también ocupan espacio! Así que si el sitio mide 1024, indefectiblemente va a aparecer scroll horizontal. El ancho recomendado es 990px como máximo.

d) Para centrar un DIV con posición absoluta y ancho conocido (#Tabla_01), debes de agregar esto al estilo de ese elemento:
Código CSS:
Ver original
  1. left:50%;
  2. margin-left:-495px;
ese margin es la mitad del ancho que tenga, en este caso sería 990/2

carmagedon:
El ejemplo que das no va a funcionar, porque margin:auto es para centrar con posición relativa, y si además le das un ancho de 100%, pues no tienes que centrar nada, porque el sitio te va a ocupar (obviamente) el 100% de la pantalla y por lo tanto no tiene espacio a los costados que necesite ser distribuido.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 19/05/2010 a las 20:24
  #4 (permalink)  
Antiguo 19/05/2010, 20:56
 
Fecha de Ingreso: mayo-2010
Mensajes: 2
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Como centrar una web en html+css hecha en photoshop?

Cita:
Iniciado por webosiris Ver Mensaje
thomashardy:
a) Bienvenido al foro

b) El código que te genera photosop... es malo. Pero malo malo.No se que necesidad hay con marearse con las posiciones absolutas... la verdad que te recomiendo aprender html y css, porque con poco que investigues te vas a dar cuenta que para muchas de las cosas que quieras hacer, los necesitas saber.

c) NUNCA hay que usar 1024px para el ancho, ya que las barras de scroll, borde de la ventana, etc también ocupan espacio! Así que si el sitio mide 1024, indefectiblemente va a aparecer scroll horizontal. El ancho recomendado es 990px como máximo.

d) Para centrar un DIV con posición absoluta y ancho conocido (#Tabla_01), debes de agregar esto al estilo de ese elemento:
Código CSS:
Ver original
  1. left:50&#37;;
  2. margin-left:-495px;
ese margin es la mitad del ancho que tenga, en este caso sería 990/2
Como decirtelo sin sonar gay, TE AMO! ^^ y encima sos uruguayo !!! q groso!!!

Gracias loco, te pasaste !

Ya sé que el CSS que crea photoshop no es el más adecuado, pero fué la única manera que encontré de realmente poder diseñar una web desde cero, por ejemplo cuando uno modifica un template o plantilla tiene q ir modificando imagen x imagen unas 40 o 50 imagenes, en este caso hago 1 sóla imagen con todo el diseño que quiero y las recorto a mi gusto y gana, quedan excelentes :D

Última edición por thomashardy; 19/05/2010 a las 21:20
  #5 (permalink)  
Antiguo 11/07/2011, 19:00
 
Fecha de Ingreso: marzo-2011
Mensajes: 9
Antigüedad: 6 años
Puntos: 0
Respuesta: Como centrar una web en html+css hecha en photoshop?

A mi si me funciono con left:50%;
margin-left:-495px

Etiquetas: align, center, centrar, html, 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




La zona horaria es GMT -6. Ahora son las 20:14.