Foros del Web » Creando para Internet » CSS »

Centrar web

Estas en el tema de Centrar web en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/08/2009, 13:55
Avatar de carambolas  
Fecha de Ingreso: julio-2009
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Centrar web

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
  #2 (permalink)  
Antiguo 30/08/2009, 15:32
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar web

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;
  #3 (permalink)  
Antiguo 30/08/2009, 16:44
Avatar de carambolas  
Fecha de Ingreso: julio-2009
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Centrar web

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.
  #4 (permalink)  
Antiguo 30/08/2009, 16:50
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar web

Hola:

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

Código:
* {
     margin: 0 auto;
}
Saludos.

  #5 (permalink)  
Antiguo 30/08/2009, 19:32
Avatar de carambolas  
Fecha de Ingreso: julio-2009
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Centrar web

Cita:
Iniciado por jomaruro Ver Mensaje
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
  #6 (permalink)  
Antiguo 30/08/2009, 20:02
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar web

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!... :)
  #7 (permalink)  
Antiguo 30/08/2009, 21:29
Avatar de carambolas  
Fecha de Ingreso: julio-2009
Mensajes: 13
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Centrar web

Cita:
Iniciado por alexk Ver Mensaje
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!
  #8 (permalink)  
Antiguo 30/08/2009, 21:41
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Centrar web

que bueno... carambolas chao!... :) !!!!
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 19:16.