| Cosas Basicas: Centrado Vertical - Alto Fluido
Hola gente, soy nuevo por aca y quisiera (aunque pareciera que ya muy retocado el tema) plantear un pequeño problema que tengo (que parece que no solo es mio).
Estoy tratando de implementar un centrado vertical para una página, ojo, el pequeño detalle es que no podemos saber el alto de la página, por lo tanto si usamos en algún momento un height, ya sea en porcentaje y pixeles no vamos a poder centrar, si el contenido excede a ese height.
El otro punto importante, es que te funcione bien en FF / IE6 / IE7
Bueno espero que alguien de aca pueda encontrar una solución.
Hasta ahorita hay 3 soluciones probables.
1. JavaScript.
2. La vieja Tabla
3. Una solución Hybrida que solo usa programación para IE.
---
Implementacion Parcial 1:
Buena en FF, no funciona en IE
Código:
<title>Esto es una prueba de centrado vertical</title> <style type="text/css">
<!--
* {margin:0; padding:0;}
html, body {margin: 0; padding: 0; height: 100%;} #marco {display: table; height: 100%; width: 750px; margin: auto;} #contenedor {display: table-cell; vertical-align:middle; position:relative; width:750px; margin:auto; overflow:auto;} #banner {width:100%; height:150px; margin:auto;} #navegacion {width:150px; float:left;} #contenido {width:600px; float:left; text-align:justify;} #pie {width:100%; height:100px; clear:both;}
-->
</style>
</head>
<body>
<div id="marco">
<div id="contenedor">
<div id="banner">
<h1>Nombre del sitio</h1>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>
</div>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer sit amet diam nec dui vulputate porttitor. Maecenas libero felis, auctor ut, accumsan id, ornare in, enim. Aliquam erat volutpat. Curabitur eros. Vestibulum dolor eros, faucibus mollis, tempor eget, consequat ut, libero. Mauris dapibus ante. Maecenas pede. Integer urna. Donec vehicula hendrerit diam. Duis convallis tempus nisi. Curabitur lacinia, purus eget dictum laoreet, erat sapien venenatis enim, sed laoreet sapien massa nec orci. Duis pretium, elit sit amet bibendum lacinia, leo tellus ornare orci, nec luctus urna purus quis enim. Nullam fringilla tellus a arcu iaculis varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer risus tortor, consectetuer at, lobortis a, pharetra a, urna. Sed nonummy venenatis pede. Sed sed tortor. Sed volutpat blandit sem.</p>
</div>
<div id="pie">
<p>Aqui va todo lo legal y cosas similares</p>
</div>
</div>
</div>
</body>
</html>
---
Implementacion Parcial 2: (El Hybrido)
Dušan Janovský y Aleksandar Vacić
Presentaron esta solución que logra el objetivo, aunque todavia no me convence la parte de IE7.
Código:
<head>
<title>Vertical dead centre, flexible edition</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/
/* page styling, unimportant for the example. only makes the page looks nicer */
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
/* remove default white areas, establish measurement scales */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/* table */
html {
display: table;
overflow: visible;
}
/* with one table cell. content in it is vertically centered */
body {
background: #f0ffe1;
display: table-cell;
vertical-align: middle;
}
/* a bit more nice styling, to properly show the centered block */
.deadcentre {
color: #000;
background: #d9ecc6;
margin: 0 auto;
padding: 1em 2%;
width: 86%;
}
/*]]>*/
</style>
<!--[if lte IE 7]>
<style type="text/css" media="screen, tv, projection">
.deadcentre {
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->
</head>
<body>
<div class="deadcentre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lobortis, purus ut venenatis varius, ligula quam dapibus risus, sit amet posuere felis lacus et dolor. Donec dui. Aenean nunc. Curabitur suscipit, massa luctus semper pellentesque, arcu nisi laoreet nulla, ut pulvinar est lacus mattis nulla. Sed euismod lectus dignissim risus hendrerit elementum. Vivamus tincidunt, justo nec ultrices lobortis, magna eros commodo elit, nec iaculis tortor dolor eu nibh. Aliquam nulla nisl, auctor vel, sagittis scelerisque, sollicitudin at, pede. Cras et enim pharetra mauris hendrerit tincidunt. Etiam feugiat faucibus libero. Donec varius viverra leo. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam convallis porta quam. Nulla hendrerit consectetuer velit. Sed ut lorem. Etiam est ante, blandit et, pellentesque vestibulum, euismod ut, enim. Proin congue. Sed ornare suscipit urna. Aliquam semper pretium leo. Suspendisse faucibus, eros id ultrices tincidunt, elit metus sagittis leo, ac volutpat mi sapien vitae ligula.</p>
<p>Cras accumsan vehicula urna. Etiam cursus feugiat orci. Morbi nec nunc id massa consequat suscipit. Vestibulum hendrerit. Donec ut arcu. Donec molestie ante ac nulla. Cras ultrices faucibus tellus. In hac habitasse platea dictumst. Curabitur congue, felis eget bibendum varius, augue neque luctus dui, id facilisis sapien massa vel arcu. Aenean aliquam pede non magna. Nulla sit amet tortor et massa adipiscing pretium. Nunc nisi. In aliquam, risus eget tempus porttitor, augue urna pretium odio, et euismod pede augue a tortor. Aliquam fringilla vestibulum mauris.</p>
<!--
<p>Phasellus justo magna, congue ac, volutpat ut, fermentum ut, purus. Integer sed orci. Ut porttitor sapien eu mi. In purus ante, aliquet eget, lacinia eu, eleifend ut, magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae lorem sit amet pede lacinia pretium. Sed ut purus eu quam auctor mattis. Duis facilisis. Vestibulum et lacus non est sagittis rhoncus. Curabitur placerat. Mauris nulla erat, elementum et, feugiat nec, dictum id, orci. Sed in erat malesuada arcu elementum rhoncus. Nulla mattis, sem eu imperdiet eleifend, velit dui bibendum nisi, at rutrum libero elit non lorem. Aliquam urna sapien, tempus id, vulputate sit amet, pharetra quis, libero.</p>
<p>Aliquam posuere pulvinar tortor. Vestibulum diam. Nullam tempus diam vitae diam. Pellentesque a velit. Donec odio justo, vehicula eget, ullamcorper in, dictum vel, sem. Suspendisse pulvinar pede eget leo. Donec vitae enim a velit tincidunt eleifend. Aenean volutpat. Nam libero orci, blandit nec, porttitor vitae, lobortis eget, felis. Vivamus id turpis sodales neque blandit faucibus. Vivamus in pede cursus nisi commodo dignissim.</p>
<p>Vestibulum volutpat odio et justo. In hac habitasse platea dictumst. Nam sem turpis, interdum vitae, laoreet luctus, luctus sed, mi. Integer ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at diam. Donec diam nibh, luctus ut, egestas quis, varius at, sem. Mauris pellentesque dui ac nulla. Morbi in diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sed lacus ut lacus consequat sodales.</p>
-->
</div>
</body>
</html>
---
Por ultimo esta la solución de:
Almirante von Web/
Código:
<table width="100%" height="100%">
<tr align="center" valign="middle">
<td><p>contenido aca</p>
</td></tr></table>
siempre hay que recordar que con todo y todo esto, hace el trabajo bien.
---
Bueno gracias a todos y espero poder contar con su ayuda.
(por cierto , como soy nuevo no pude poner el doctype)
p.d: Si alguien sabe que esta sucediendo exactamente en los comentarios condicionales de IE, por favor aviseme. |