Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.
Posicionamiento en el centro del centro
Experiencia de usuario
06/10/2004
|
Daniel Torres Burriel
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" "https://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>
En Torresburriel Estudio desarrollamos las capacidades técnicas de tu equipo en temas de usabilidad, experiencia de usuario y diseño de producto a través de nuestros cursos online y presenciales. Contacta con nosotros y cuéntanos tus necesidades.
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)
con el meta tag pasa lo mismo
Arreglado 🙂 Gracias por el apunte.
Los comentarios anteriores no son validos, pues el doctype es HTML 4.01 Transicional…. deben cambiar tambien eso para llegar a XHTML valido.
Arreglado 🙂
No sé si lo sabíais pero este código no funciona en IE de Mac.
🙁
Pues no, no lo sabía 🙁
Creo que text-align, no es muy válido.