Posicionamiento en el centro del centro
Antes, cuando a nadie se le ponía la cara colorada por posicionar cosas en una web usando tablas, centrar un elemento o un grupo de elementos en la pantalla de forma absoluta era muy fácil. No tenía mucho misterio. Creo recordar que bastaba con asigar unos atroces valores al td del estilo de height="100%" y un bestial align="center" a la tabla contenedora de la historia y, hala, todo centrado en la pantalla.
Esto, a parte de ser una barbaridad desde el punto de vista de la espeficatione ortodoxiae, es lo más inaccesible e incorrecto que nos podamos echar a la cara.
Para ello, y a modo de prospecto de medicamento, vaya este código extraído de Dead Centre para posicionar en el centro del centro un elemento en la pantalla, usando hojas de estilo para ello.
Y aquí el código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>Dead Centre</title>
<style type="text/css" media="screen">
<!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}
#caption1
{
padding-left: 6px;
border-left: 1px dashed #66c;
position: absolute;
top: -80px;
left: -200px;
width: 250px;
height: 80px;
visibility: visible;
display: block
}
#caption2
{
padding-left: 6px;
border-left: 1px dashed #66c;
position: absolute;
top: 92px;
left: 125px;
width: 250px;
height: auto;
visibility: visible;
display: block
}
-->
</style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
<div id="caption1" class="captions">The cyan box 'horizon' is positioned absolutely 50% from the top of the page, is 100% wide and has a nominal height of 1px. Its overflow is set to 'visible'.</div>
This text is<br />
<span class="headline">DEAD CENTRE</span><br />
and stays there!
<div id="caption2" class="captions">The red 'content' box is nested inside the 'horizon' box and is 250px wide, 70px high and is positioned absolutely 50% from the left - but has a negative margin that is exactly half of its width, -125px. To get it to centre vertically, it has a negative top position that is exactly half of its height, -35px.</div>
</div>
</div>
</div>
<div id="footer"> <a href="deadcentre3.html"> back</a></div>
</body>
</html>
Octubre 18th, 2004 at 6:27 pm
No se cierran los <br> lo que significa que no es xhtml valido.
Correcto es <br /> (el espacio es por un bug en el parseo de Netscape)
Octubre 18th, 2004 at 6:33 pm
con el meta tag pasa lo mismo
Octubre 18th, 2004 at 6:40 pm
Arreglado
Gracias por el apunte.
Febrero 21st, 2005 at 5:16 pm
Los comentarios anteriores no son validos, pues el doctype es HTML 4.01 Transicional…. deben cambiar tambien eso para llegar a XHTML valido.
Febrero 21st, 2005 at 11:26 pm
Arreglado
Junio 16th, 2005 at 4:01 pm
No sé si lo sabíais pero este código no funciona en IE de Mac.
Junio 16th, 2005 at 8:28 pm
Pues no, no lo sabía
Noviembre 20th, 2005 at 12:48 am
Creo que text-align, no es muy válido.