Dic11
2006Web de Cortesía
Autor: jgarcia | Archivado en: CSS, Diseño Web, HTML
2006
Muchas veces nos vemos obligados a mostrar una página web temporal, que informe al visitante que estamos en plena fase de desarrollo o mantenimiento.
Una imagen corporativa, mostrando el logo, un mensaje y un email de contacto, suele bastar.
Esta imagen no debería sobrepasar los 800px de ancho para que pueda visualizarse correctamente en la mayoría de las resoluciones del monitor. Por otro lado sería ideal que quedara la imagen centrada horizontal y verticalmente. Para conseguir este centrado con CSS, os sugiero esta simple solución:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html>
<head>
<title>ACME LT: Alta Tecnología para Todos</title>
<style type=”text/css”>
<!- -
body{
background-color: #000;
text-align: center;
}
#logo{
position: absolute;
margin-left: -400px;
margin-top: -300px;
top: 50%;
left: 50%;
width: 800px;
height: 600px;
vertical-align: middle;
}
- ->
</style>
</head>
<body>
<div id=”logo”>
<img src=”img/cortesia.jpg” alt=”Bienvenidos a ACME LT”>
</div>
</body>
</html> |
Como habréis dado cuenta a los margin-left y margin-top le asignamos la mitad del width y height.
A la propiedad vertical-align le hemos asignado el valor middle por si en lugar de una imagen queremos mostrar texto.
Es una solución basteante simple, pero con un problema, si el bloque (imagen) es más grande que el interior de la ventana no se va a poder visualizar completo
Salu2