Foros del Web » Creando para Internet » CSS »

centrar pagina ayuda

Estas en el tema de centrar pagina ayuda en el foro de CSS en Foros del Web. hola tengo una pagina web basica el problema es el siguiente: la pagina esta alinieada a la izquierda yo kiero que independientemente de la resolucion ...
  #1 (permalink)  
Antiguo 09/07/2009, 13:13
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 8 años, 7 meses
Puntos: 7
Exclamación centrar pagina ayuda

hola tengo una pagina web basica
el problema es el siguiente: la pagina esta alinieada a la izquierda yo kiero que independientemente de la resolucion como se vea esta este en en el centro. como le hago?



cada contenido y fragmento es un tabla independiento, intente colocar las tablas dentro de una de mayor dimenciones y fue inutil como le ago entonces??
  #2 (permalink)  
Antiguo 09/07/2009, 13:24
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: centrar pagina ayuda

La idea es que toda la web sea una tabla, dentro de esta las demas, pues en la tabla principal en sus propiedades del css es donde tienes que poner que este centrada
  #3 (permalink)  
Antiguo 09/07/2009, 14:20
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: centrar pagina ayuda

Ve al código y envuelve todo lo que tengas dentro del <body> con un <div> al que llamas, p. ej., 'contenedor'. Luego en el archivo css si lo tienes o sino en el <head> del archivo html pones la siguiente regla:

Código HTML:
body {
text-aling: center;
}

#contenedor {
width: 800px; /*aqui pones la madida que tengas en la tabla*/
margin: 0 auto;
text-aling: left;
}
En tu archivo html sería algo así:

Código HTML:
<body>
<div id="contenedor">

... aquí dentro todo el contenido ...

</div>
</body> 
Salud!
  #4 (permalink)  
Antiguo 09/07/2009, 18:21
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 8 años, 7 meses
Puntos: 7
Respuesta: centrar pagina ayuda

no funciona esa opcion la intente y no hace nada

aqui les dejo una imagen del editor


del codigo css.



del codigo xhtml



obio que tambien cierro el div al final de todo el codigo antes esactamente antes del cerrar el boddy
otra cosa si el motivo es por ser diferentes capas como ago para transformas esos div que estan dentro de otros div para que se pueda maquetar??

Última edición por arcanisgk1; 09/07/2009 a las 18:32
  #5 (permalink)  
Antiguo 09/07/2009, 18:23
 
Fecha de Ingreso: julio-2007
Mensajes: 115
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: centrar pagina ayuda

az lo que dijo AlbertoGarcia, pero prueba a poner

margin-left: auto;
margin-right: auto;
  #6 (permalink)  
Antiguo 09/07/2009, 18:37
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 8 años, 7 meses
Puntos: 7
Respuesta: centrar pagina ayuda

intentado y no ocurre nada
  #7 (permalink)  
Antiguo 09/07/2009, 21:20
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: centrar pagina ayuda

hola amigo acabo de ver tu código css y tu html y me permito afirmar que jamas lograras centrarlo mientras no le quites las siguientes propiedades

position:absolute;
left:0;
top:0;


estas tres propiedades son las que obligan a tus divs a colocarse a la izquierda y hasta arriba, no des tantos malabares sin quitar eso, incluso casi seguro que quitando eso te funcionara lo que ya te han dicho margin:auto;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 11/07/2009, 09:07
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 8 años, 7 meses
Puntos: 7
Respuesta: centrar pagina ayuda

ya intente y nada se dañda toda la pagina por favor ayudenme con el codigo no me deja hacer eso que me dicen :


Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>beta</title>
<link rel="stylesheet" type="text/css" href="index.role"/><style type="text/bio"></style>
</head>
<body>
	<div id="contenedor">
	<div style="position: absolute; width: 997px; height: 25px; z-index: 1; left: 0px; top: 0px" id="capa1">
		<p class="style3"><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /><img src="top1.jpg" width="83" height="48" alt="borde" /></p></div>
	<div style="position: absolute; width: 997px; height: 25px; z-index: 1; left: 0px; top: 538px" id="capa2">
		<p class="style3"><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /><img src="top2.jpg" width="83" height="48" alt="borde" /></p></div>
	<div style="position: absolute; width: 168px; height: 176px; z-index: 3; left: 10px; top: 52px" id="capa3" class="style1">
		<ul class="style1" style="width: 164px; height: 97px">
			<li><a href="index.html" title="INICIO" class="style1"><strong>Inicio</strong></a></li>
			<li><a href="/foro/phpbb3/" title="Acceso al Nuevo Foro." class="style1"><strong>Foro</strong></a></li>
			<li><a href="indexjuego.html" title="Regístrate Para Poder Jugar." class="style1"><strong>Registrarse</strong></a></li>
			<li><a href="..." title="Nueva Información Sobre el Juego" class="style1"><strong>Info News</strong></a></li>
			<li><a href="..." title="Galería de Imágenes." class="style1"><strong>Galería</strong></a></li>
			<li><a href="..." title="Guía/Nuevos" class="style1"><strong>Guía/Nuevos</strong></a></li>
		</ul>
	</div>
	<div style="position: absolute; width: 624px; height: 491px; z-index: 1; left: 196px; top: 48px" id="capa4">
		<p class="style3"><img alt="Demonio Guardian de la Puerta de Verdur" src="WhiteAngel.jpg" width="625" height="490" /></p>
	</div>
	<div style="position: absolute; width: 175px; height: 395px; z-index: 1; left: 822px; top: 49px" id="capa5" class="style4">
			<strong class="style1">Ya puedes, es Hora Crea tu Propia Cuenta y 
			Sigue tu Propia Historia Tendrás un Plebeyo Entrénalo y Conviértelo 
			en Paje Gánate el Rango de Caballero y podrás llegar a ser el Lord 
			de Armas de tu Reino, Nuevas Clases Descubre la clase Héroe Sigue 
			los nuevos Códigos y Gremios Piratería.</strong>
	</div>
	<div style="position: absolute; width: 286px; height: 69px; z-index: 5; left: 356px; top: 101px" id="capa6" class="style2">
		<p class="style2"><strong>Bienvenidos A </strong></p>
		<p class="style2"><strong>Génesis Crónicas 1:</strong></p>
		<p class="style2"><strong>La Era De Los Dioses.</strong></p>
	</div>
	<div style="position: absolute; width: 169px; height: 292px; z-index: 6; left: 9px; top: 235px" id="capa7">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
	<div id="cboxdiv" style="text-align: center; line-height: 0">
	<div><iframe frameborder="0" width="169" height="205" src="http://www3.cbox.ws/box/?boxid=2738757&amp;boxtag=5472&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" name="cboxmain" style="border:#FFFFFF 1px solid;" id="cboxmain"></iframe></div>
	<div><iframe frameborder="0" width="169" height="75" src="http://www3.cbox.ws/box/?boxid=2738757&amp;boxtag=5472&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" name="cboxform" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform"></iframe></div>
	</div>
<!-- END CBOX --></div>
	<div style="position: absolute; width: 175px; height: 88px; z-index: 1; left: 821px; top: 451px" id="capa8" class="style2">
		<img class="style2" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	    <img class="style2" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="¡CSS Válido!" />
	</div>
	<div style="position: absolute; width: 628px; height: 25px; z-index: 1; left: 193px; top: 553px" id="capa9">
		<p class="style5"><span>® Todos los Derechos Reservados 2005-2009 © icaros S.A</span></p>
	</div>
</div>
	</body>
</html> 
  #9 (permalink)  
Antiguo 11/07/2009, 09:08
 
Fecha de Ingreso: mayo-2009
Mensajes: 200
Antigüedad: 8 años, 7 meses
Puntos: 7
Respuesta: centrar pagina ayuda

CSS

Código:
.body {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.contenedor {
	width: 1000px; /*aqui pones la madida que tengas en la tabla*/
	margin-left: auto;
	margin-right: auto;
}
.style1 {
	text-decoration: none;
	font-family: Papyrus;
	color: #000000;
	margin: 0px;
	padding: 0px;
	font-size: 10pt;
}
.style1 ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 12pt;
}
.style1 ul li {
	text-decoration: none;
   	width: 100%;
	color: #000000;
	}
.style1 ul li a:hover {
	text-decoration: none;
    background: #FF0000;
    border-left: 10px solid #333;
    color: #fff;
}
.style2 {
	text-decoration: none;
	font-family: Papyrus;
	font-size: 18pt;
	text-align: center;
	font-weight: bold;
	color: #FF0000;
	margin: 0px;
	padding: 0px;
}
.style3 {
	margin: 0px;
	padding: 0px;
	text-align: justify;
}

.style4 {
	text-decoration: none;
	font-family: Papyrus;
	color: #000000;
	text-align: center;
	font-size: 11pt;
	margin: 0px;
	padding: 0px;
}
.style5 {
	text-decoration: none;
	font-family: Papyrus;
	color: #FFFF00;
	text-align: center;
	font-size: 11pt;
	margin: 0px;
	padding: 0px;
}
.style6 {
	font-size: 10pt;
	margin: 0px;
	padding: 0px;
	font-family: Papyrus;
	color: #FFFF00;
}
.style7 {
	background-image: url('gueriere_1024.jpg');
}
.style8 {
	margin: 0px;
	padding: 0px;
	color: red;
	text-align: justify;
}
.style9 {
	margin: 0px;
	padding: 0px;
}
  #10 (permalink)  
Antiguo 11/07/2009, 14:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrar pagina ayuda

creo que lo suyo sería pedirte que te leas algún manual de css antes de nada, Arcanisgk1, porque veo que te has metido en camisa de once varas. Vaya un "sindiós" que tienes.

añade a tu html lo que te pongo en negrita y azul (el resto es para que te centres):
Cita:
</head>
<body>
<div id="yo_arcanisgk1_prometo_leer_manual_de_css">
<div id="contenedor">
<!-- esto es tu página -->
<p class="style5"><span>® Todos los Derechos Reservados 2005-2009 © icaros S.A</span></p>
</div>
</div>
</div>
</body>
</html>
Y en el css:

Cita:
#yo_arcanisgk1_prometo_leer_manual_de_css {
width: 1000px;
margin: 0 auto;
position: relative;
}
Pero no me pidas que te lo esplique.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 06:20.