Centrar web

carambolas · #1 (**permalink**) 30/08/2009, 12:55

Hola quisiera saber si mepueden ayudar con este problema que tengo:
estoy haciendo un template, y es la primera vez que me pasa, no puedo centrarlo, tambien es la primera vez que me meto un poco con el CSS, y creo que ahi debe estar el problema.
les dejo el codigo, para ver si pueden detectar el problema:

Código HTML:

<html>
<head>
<title>OS</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">
<!--
/*Menu*/
#style1 h1 {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #FFF;
	width: 120px;
	text-align: right;
	padding: 5px;
	margin: 0px;
	float: left;
	border-top: 1px solid #FF6600;
	border-right: 1px solid #FF6600;
	border-left: 1px solid #FF6600;
}
#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 7px;
padding: 0px;
list-style: none;

}
#style1 li {
float: left;


}
#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;

}
#style1 li a:visited {
	color: #999;
	text-decoration: none;
}
#style1 li a:hover {
	color: #000000;
	text-decoration: none;
	font-size: 14px;
	text-align: center;
	font-family: Calibri;
}
.content_box1 {
	font-family: Arial;
	font-size: 11px;
	clear: left;
	background-color: #FFF;
	border: 1px solid #FF6600;
	width: 720px;
	padding: 15px;
}

/*Fin Menu*/

#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1px;
	height:800px;
	float: right;
	font-family: Calibri;
	overflow: visible;
}

#OS-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:3px;
	height:800px;
}

#header {
	position:absolute;
	left:3px;
	top:0px;
	width:634px;
	height:139px;
	background-image: url(imágenes/header.png);
}

#OS-03 {
	position:absolute;
	left:637px;
	top:0px;
	width:3px;
	height:800px;
}

#menu {
	position:absolute;
	left:3px;
	top:139px;
	width:634px;
	height:39px;
	background-image: url(imágenes/menu.png);
	text-align: left;
}

#cuerpo {
	position:absolute;
	left:3px;
	top:178px;
	width:634px;
	height:588px;
	background-color: #FFF;
	font-weight: bold;
	font-variant: small-caps;
	float: right;
}

#footer {
	position:absolute;
	left:3px;
	top:766px;
	width:634px;
	height:24px;
	background-image: url(imágenes/footer.png);
}

#OS-07 {
	position:absolute;
	left:3px;
	top:790px;
	width:634px;
	height:10px;
}
#cuerpo {
	text-align: left;
}
#style1 ul li {
	text-align: center;
}
#header {
	text-align: left;
}
#header {
	color: #FFF;
}

#logo {
	font-size: 80px;
	margin: 20px;
	padding: 20px;
	font-weight: 800;
}
#Tabla_01 #cuerpo blockquote p {
	font-size: 20px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background:url('im&aacute;genes/fondo.png'); text-align: center; font-size: 18px;">
<!-- Save for Web Slices (Sin título-1) -->
<div id="Tabla_01">
  <div id="OS-01">
	<img src="im&#xe1;genes/OS_01.png" width="3" height="800" alt="">
  </div>
	<div id="header">
  <span id="logo">Logo</span></div>
	<div id="OS-03">
		<img src="im&#xe1;genes/OS_03.png" width="3" height="800" alt="">
  </div>
	<div id="menu"><center>
<div alig="ceneter" id = "style1">
<ul>
<li><a href ="#">Incio</a></li>
<li><a href ="#">Informaci&Oacute;N</a></li>
<li><a href ="#">Contacto</a></li>
</ul>

</div></center>
  </div>
	<div id="cuerpo">
	  <blockquote>
	    <p>
	      Dise&ntilde;o credo por Tony_GT</p></blockquote>
	</div>
	<div id="footer">Creado por tony_gt</div>
	<div id="OS-07">
		<img src="im&#xe1;genes/OS_07.png" width="634" height="10" alt="">
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

espero que puedan ayudarme.

saludos

alexk · #2 (**permalink**) 30/08/2009, 14:32

primero que nada te falta el
<!DOCTYPE HTML
http://es.wikipedia.org/wiki/Document_Type_Declaration

luego veo que tienes todo a posiciones absolutas... no entiendo... que div quieres centrar
al div contenedor ponle esto... y ya
margin: 0 auto;

carambolas · #3 (**permalink**) 30/08/2009, 15:44

Lo que quiero centrar es la web completa, porque cree un template con photoshop,y me aparece la web en un costado, y trato de centrarla pero se queda en el mismo lugar.

jomaruro · #4 (**permalink**) 30/08/2009, 15:50

Hola:

Debes meter toda la web en un div contenedor y en las propiedades CSS añadir:

Código:

* {
     margin: 0 auto;
}

Saludos.

carambolas · #5 (**permalink**) 30/08/2009, 18:32

Cita:

Iniciado por jomaruro

Hola:

Debes meter toda la web en un div contenedor y en las propiedades CSS añadir:

Código:

* {
     margin: 0 auto;
}

Saludos.

hice eso pero no me funcionó

mira aca te dejo el link:
carambolas.netii.net/OS/OS.html

alexk · #6 (**permalink**) 30/08/2009, 19:02

como te dije antes

Cita:

primero que nada te falta el
<!DOCTYPE HTML

y luego ami me vienen unas interrogantes

Código:

#Tabla_01 {
float:right; /*no encuentro el sentido*/
font-family:Calibri;
height:800px; /*por que lo limitas?*/
left:0; /*con esto estara hacia la izquierda*/
margin:auto; /*es absoluto asi que ?*/
overflow:visible; /* ??? */
position:absolute;
top:0;
width:1px; /*?????*/
}

asi que... ignorando lo anterior podrias solucionar el problema con

Código:

#Tabla_01 {
float:right;
font-family:Calibri;
height:800px;
left:50%; /*posicionamos el contenedor al 50% de la pantalla*/
margin-left:-315px; /*restamos el 50% del ancho del contenedor*/
overflow:visible;
position:absolute;
top:0;
width:1px;
}

chao y suerte!... :)

carambolas · #7 (**permalink**) 30/08/2009, 20:29

Cita:

Iniciado por alexk

como te dije antes

y luego ami me vienen unas interrogantes

Código:

#Tabla_01 {
float:right; /*no encuentro el sentido*/
font-family:Calibri;
height:800px; /*por que lo limitas?*/
left:0; /*con esto estara hacia la izquierda*/
margin:auto; /*es absoluto asi que ?*/
overflow:visible; /* ??? */
position:absolute;
top:0;
width:1px; /*?????*/
}

asi que... ignorando lo anterior podrias solucionar el problema con

Código:

#Tabla_01 {
float:right;
font-family:Calibri;
height:800px;
left:50%; /*posicionamos el contenedor al 50% de la pantalla*/
margin-left:-315px; /*restamos el 50% del ancho del contenedor*/
overflow:visible;
position:absolute;
top:0;
width:1px;
}

chao y suerte!... :)

Muchisimas gracias :D!
borre lo que me mencionaste que no le encontrabas sentido y agregue lo que me dijiste y me funciona perfecto!
Muchhisimas gracias nuevamente :D!

alexk · #8 (**permalink**) 30/08/2009, 20:41

que bueno... carambolas chao!... :) !!!!