Centrar objetos....

DragonX · #1 (**permalink**) 10/02/2007, 09:01

Hola amigos estoy creando mi primer site integramente con CSS, creo que ya era hora de empezar.....

Mi código:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SECOBRAS s.a.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
   margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background: url(imagenes/fondo.gif) repeat-x;
	color: #959657;
}
#contenedor {
	width: 777px;
   height: 100%;
	background:url(imagenes/fondo_contenedor.gif) repeat-y;
	margin: 0px auto 0;
	position: relative;
   left: 10%;
	color: #fff;
}
#contenedorInterno{
   margin-left: 10px;
   width: 98%;
   background:#000000;
   color: #FF0000;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="contenedorInterno">
HOLA CHAROLAS!!!!!<br>
HOLA CHAROLAS!!!!!<br>
HOLA CHAROLAS!!!!!<br>
HOLA CHAROLAS!!!!!<br>
</div>
</div>
</body>
</html>

Verán, se me complica bastante, si alguno me da una manito se lo agradeceria infinitamente, quiero que el contenedor principal quede centrado con respecto al browser y que el contenedorInterno quede centrado respecto al contenedor.

Y por otro lado se ve mal en IE (descentrado) y en FF se ve un poco más centrado...

De nuevo mil gracias!
DX

xik21 · #2 (**permalink**) 10/02/2007, 09:45

Solo he modificado esto:

#contenedor {
position:relative;
width: 777px;
margin:auto;
height: 100%;
background:url(imagenes/fondo_contenedor.gif) repeat-y;
color: #fff;
}

y en este he agregado el text-align:center;

#contenedorInterno{
text-align:center;
margin-left: 10px;
width: 98%;
background:#000000;
color: #FF0000;
}

DragonX · #3 (**permalink**) 10/02/2007, 09:51

xik21 hice lo que me dijiste, pero no me quedo del todo bien, en IE no me lo centra, y FF si, pero medio mal....

te dejo el código modificado...

body {
margin: 0;
padding: 0;
font-family: "Arial","Trebuchet MS", "Lucida Grande", "Tahoma", "Verdana", "Helvetica", "sans-serif";
font-size: 12px;
line-height: 16px;
background: url(imagenes/fondo.gif) repeat-x;
color: #959657;
}
#contenedor {
text-align:center;
position:relative;
width: 760px;
margin:auto;
height: 100%;
background:#FFFFFF;
color: #fff;
}
#contenedorInterno{
width: 96%;
background:#000000;
color: #FF0000;
}

Gracias de nuevo!!!

xik21 · #4 (**permalink**) 10/02/2007, 09:58

Yo soy algo novato, pero normalmente trabajo con position:absolute;

Otra cosa más, no trabajo nunca con tantos por ciento(%) prefiero dar la medida exacta en pixels.

Saludos.

DragonX · #5 (**permalink**) 10/02/2007, 10:31

oki gracias!!!!!
ya lo pude centrar!!!!!

mil gracias de verdad!