dudas sobre centrar página

xururuc · #1 (**permalink**) 06/04/2009, 04:27

/* CSS Document */

body
{
background-color:#000000;
margin-left: 0px;
margin-top: 0px;
}

#contenedor {

width: 1024px;
text-aling:center;

}

#contenido{
margin-top: 100px;
margin-right:100px;
margin-bottom: 0px;
margin-left:100px;
}

#botonera
{
float:left;
width:185;
height:291;
margin-left:-50px;
position:absolute;
top:430px;
z-index:2;
visibility:visible;

y en mi html:


</style></head>

<div id="body">
<div id="contenedor">
<div id="contenido">
<img src="imagenes/presentacion.gif"></img>

<div id="botonera">
</div>

</div>
</div>
</body>
</html>

Esto es lo que voy haciendo y se me va complicando!!!
He echo una capa con el nombre contenedor con 1024px para meter otra con el nombre contenido para facilitar el centrado...peroooo...
nada!!!según que navegador se me ve bien o mal...
Alguien me puede echar un cablee

Wing · #2 (**permalink**) 06/04/2009, 04:38

Yo suelo usar este sistema:

body
{
background-color:#000000;
margin-left: 0px;
margin-top: 0px;

Código text-align: center:

Ver originaltext-align: center;

}

#contenedor{
margin: 0 auto;
}

xurxinho · #3 (**permalink**) 06/04/2009, 04:49

Me gusta mucho la solución de Wing.
Otra solución sería

Código:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	body{margin:0px;padding:0px;}
	table.contenedor{width:1024px;margin-top:30px;height:60px;border:1px solid  #000;}
</style>
</head>

<body>
<table class="contenedor" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td>
		Contenido contenido contenido
		</td>
	</tr>
</table>
</body>
</html>

Aresillo · #4 (**permalink**) 06/04/2009, 05:00

Con poner al contenedor un ancho fijo y un margin:auto se te centra, así:
#contenedor {
width: 1024px;
margin:auto;
}

Respecto a las soluciones propuestas, la primera no es semántica (la etiqueta text-align no es para centrar una web) porque no queremos centrar un texto sino toda la web. La forma de hacerlo es como os he puesto arriba.
La segunda opción es mucho peor porque mezcla tablas y css en una combinación que no es semántica. Y me explico:
Las tablas están hechas para tabular datos y el css para dar apariencia, maquetación y diseño a una web. Por tanto se han de usar para eso.
Así que la opción es tener dos documentos: uno, con el contenido... véase el (x)html (no se olviden del DTD) y otro con el CSS.
Por tanto, eviten las tablas a no ser que sea para su propósito: tabular datos.

Un saludo.

Wing · #5 (**permalink**) 06/04/2009, 05:27

Cita:

Iniciado por Aresillo

Con poner al contenedor un ancho fijo y un margin:auto se te centra, así:
#contenedor {
width: 1024px;
margin:auto;
}

Respecto a las soluciones propuestas, la primera no es semántica (la etiqueta text-align no es para centrar una web) porque no queremos centrar un texto sino toda la web. La forma de hacerlo es como os he puesto arriba.
La segunda opción es mucho peor porque mezcla tablas y css en una combinación que no es semántica. Y me explico:
Las tablas están hechas para tabular datos y el css para dar apariencia, maquetación y diseño a una web. Por tanto se han de usar para eso.
Así que la opción es tener dos documentos: uno, con el contenido... véase el (x)html (no se olviden del DTD) y otro con el CSS.
Por tanto, eviten las tablas a no ser que sea para su propósito: tabular datos.

Un saludo.

Muy buena solución, no sabía que simplemente con el ancho fijo y el margin funcionaba.

Aresillo · #6 (**permalink**) 06/04/2009, 05:35

De nada, es la forma natural de hacerlo, las otras soluciones, aunque funcionan o son más engorrosas o son menos semánticas.

Un saludo

xurxinho · #7 (**permalink**) 06/04/2009, 06:06

Bufff, lo que se aprende aquí. Gracias por mejorar mi estilo