12/01/2007, 12:55
|
 | Colaborador | | Fecha de Ingreso: octubre-2006 Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses Puntos: 280 | |
| Re: Centrar página con CSS
De manera que este código debería servir para lo que tú querías tanto en IE como el FF. Por supuesto, siempre mejor en Firefox.
Código:
<!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>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Columnas centradas</title>
<style type="text/css">
body { margin: 0px;
background: rgb(47, 71, 107) url(/images/fondo_rayado.jpg) repeat scroll 0% 50%;
color: rgb(0, 0, 0);
font-size: 0.95em;
}
#block { margin: 0px auto;
padding: 0px;
width: 800px;
}
#container { margin: 0px auto;
padding: 0px;
background: rgb(204, 102, 204) url(/images/fondo.gif) repeat scroll 0% 50%;
width: 800px;
display: table;
text-align: center;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: table-cell;
vertical-align: top;
text-align: left;
height: 600px;
}
#fondoa, #fondoc, #fondoe, #fondog {background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
#fondob, #fondod, #fondof {
padding: 6px;
}
#fondob, #fondof { background-color: rgb(51, 204, 255);
}
#fondod {background-color: rgb(255, 204, 51);
}
#fondoa span, #fondoc span, #fondoe span, #fondog span { width: 0.5em;
}
#fondob span, #fondof span { width: 9em;
}
#fondod span { width: 28.5em;
}
</style>
<!--[if IE]> <style>
span {display: inline-block;
text-align: left;
height: 600px;
}
#fondoa, #fondob, #fondoc, #fondod, #fondoe, #fondof, #fondog {
display: inline;
vertical-align: top;
}
</style> <![endif]-->
</head>
<body>
<div id="block"><?php include("header.php"); ?></div>
<div id="container">
<div id="fondoa"><span>A</span></div>
<div id="fondob"><span>B - Esta es la columna fondo
b, la lateral izquierda
</span></div>
<div id="fondoc"><span>C</span></div>
<div id="fondod"><span>D- Esta es la columna central</span></div>
<div id="fondoe"><span>E</span></div>
<div id="fondof"><span>F - Esta es la columna fondo
f, la lateral derecha</span></div>
<div id="fondog"><span>G</span></div>
</div>
<div id="block"><?php include("footer.php"); ?></div>
</body>
</html>
A ver si hay un churro un funciona más o menos como querías con tus contenidos reales. No obstante, para las barras laterales de relleno (las negras), si no piensas usar gráficos creo que sería mejor hacerlas a base de bordes de las capas que sí tienen contenido, con lo que en realidad serían sólo 3 capas, mucho más sencillo.
Mikel. |