Foros del Web » Creando para Internet » CSS »

Cosas Basicas: Centrado Vertical - Alto Fluido

Estas en el tema de Cosas Basicas: Centrado Vertical - Alto Fluido en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/02/2007, 15:27
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
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.
  #2 (permalink)  
Antiguo 20/02/2007, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Buenas.
Permíteme unas preguntas, porque no acabo de entender la situación:

1.- ¿Es el bloque de texto el que debe quedar centrado?
2.- ¿Es ese bloque el que puede crecer u otros elementos los que harán crecer la página?
3.- En caso de crecer la página, ¿debe quedar centrado en la página o en la pantalla?
4.- ¿Qué es lo que no debe llevar un height? ¿el cuadro del texto porque crecerá o la página completa?

Creo que con las respuestas a estas preguntas me situaré un poco mejor, porque lo que se pretende hacer me ha resultado un poco confuso.

Mikel.
  #3 (permalink)  
Antiguo 20/02/2007, 18:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Claro Mikel,

es sencillo, necesitamos un div que quede centrado en la pantalla. Pero no sabemos que tamaño va a tener ese div (conocemos probablemente su ancho, pero no su alto). Hasta donde entiendo, eso hace un poco inutil el definir una altura para ese centrado.

Cita:
1.- ¿Es el bloque de texto el que debe quedar centrado?
No es un bloque de texto en si, de hecho es un elemento DIV que tendra texto imágenes hasta otros DIV probablemente.

Cita:
2.- ¿Es ese bloque el que puede crecer u otros elementos los que harán crecer la página?
Otros elementos que iran dentro de ese DIV.

Cita:
3.- En caso de crecer la página, ¿debe quedar centrado en la página o en la pantalla?
Debe de quedar centrado en la vertical en el ViewPort (prefiero usar ese termino para evitar problemas con pantall o página.
Cita:

4.- ¿Qué es lo que no debe llevar un height? ¿el cuadro del texto porque crecerá o la página completa?
Tu pusiste en otro foro la siguiente respuesta:

Código:
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
#contenido { position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background-color: rgb(204, 153, 51);
display: block;
}
  </style>
</head>
<body>
<div id="contenido"></div>
</body>
</html>
El problema que pasa estableciendo un height:400px; como el que pusiste arriba, se da cuando lo que va dentro el id contenido es mayor a 400px de alto.

Código:
<html>
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
#contenido { position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background-color: rgb(204, 153, 51);
display: block;
}
  </style>
</head>
<body>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna. 

Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien mauris dapibus mauris, sit amet pharetra tellus sem ut mi. 

Sed tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent venenatis lacus ac massa. Sed accumsan luctus enim. 

Vestibulum massa dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel turpis a elit pharetra pulvinar. Aliquam ut 

nisl ac nisi tristique eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 

hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis quis risus. Mauris scelerisque. Cras lectus. Aliquam erat 

volutpat. Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu. Donec interdum. Quisque tristique, purus non 

pulvinar cursus, magna lectus blandit orci, vitae tristique tellus tellus eget est. Quisque sollicitudin convallis sem. Nunc 

justo.</p>
<p>Phasellus dolor augue, dapibus nec, feugiat nec, varius suscipit, ipsum. Duis ullamcorper sapien ut enim. Suspendisse eget enim 

non eros tristique consequat. Maecenas at dui. Curabitur lacus lorem, imperdiet vel, sagittis eu, porttitor in, felis. Sed magna 

lorem, pharetra non, egestas sit amet, euismod in, augue. Nulla laoreet sollicitudin mauris. Vestibulum dignissim tincidunt urna. 

Sed feugiat dignissim mi. Pellentesque aliquam diam sit amet ligula. Quisque et metus malesuada ligula mollis tempor. Integer 

porttitor porttitor augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque pretium 

risus a nibh. Nullam a metus. Vivamus viverra. Duis tortor nunc, blandit nec, convallis quis, nonummy et, dolor. Nunc eleifend 

fringilla tortor.</p></div>
</body>
</html>
Logras ver el problema y lo que necesito para centrar?

Saludos!
  #4 (permalink)  
Antiguo 20/02/2007, 19:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Entendido (aunque con lo del viewpoint me has jodido , que imagino que será el campo de visión, es decir, la pantalla para mi).

Pero en caso de que el contenido supere el tamaño del campo de vision, nunca podrá quedar centrado, porque desbordará por debajo y obligará a hacer scroll.

Si por centrado consideramos entonces que aunque hagas scroll siempre queda el mismo espacio por arriba que por abajo, quizá sea más fácil solucionarlo dándole un margen superior e inferior fijo al body, así siempre parecerá centrado:

<style type="text/css">
body {margin: 40px 0;
text-align: center;
}
#contenido {
background-color: rgb(204, 153, 51);
width: 400px;
position: relative;
margin: 0 auto;
text-align: left;
}
</style>

Ya contarás.

Mikel.
  #5 (permalink)  
Antiguo 20/02/2007, 21:11
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Hola de nuevo Mikel,

Viewport: sip, básicamente es donde sea que vayas a desplegar el contenido, TV, Refrigeradora, Microondas, Celular, Firefox, Safaria o IEX. (Exagero XD )

pues centrado en la vertical significa que el contenido tenga la misma distnacia de espacio libre tanto arriba que abajo.

El problema con la soluciòn que planteas es que si el contenido en este caso es muy chico, pues, quedara un gran espacio hacia abajo.

No lo se estoy empezando a pensar que esto es uno de esos paradigmas donde resuelves a con JavaScript para que te calcule el alto total y luego te calcule el centrado automaticamente, o no se podra hacer.

Lo peor... esto si es algo en lo que el maquetado con tablas se almuerza a CSS.

Por cierto arriba puse una implementación del código de Dušan Janovský y Aleksandar Vacić deberias de darle un ojo prueba con contenido de distinto tamaño (metele o quitale parrafos Lipsum) y veras a lo que me refiero, ojo, yo lo pruebo con FF (Alpha 2 ahora) e IE6, para IE6 lamentablemente le quita el centrado horizontal y me tira que el codigo de IE es un control Active X T_T.

Última edición por axterixv; 20/02/2007 a las 21:36 Razón: actualizado!
  #6 (permalink)  
Antiguo 21/02/2007, 02:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Tataríiiii, taríiiiii. Css al rescate.

Cita:
Iniciado por axterixv Ver Mensaje
El problema con la soluciòn que planteas es que si el contenido en este caso es muy chico, pues, quedara un gran espacio hacia abajo.
Es que lo queremos todo: que si es grande se centre; que si es pequeño también... ¡Qué exigencias!

Cita:
Lo peor... esto si es algo en lo que el maquetado con tablas se almuerza a CSS.
¿Cómo? ¡Sacrilegio! En este foro no lo digas ni en broma (he maquetado toda mi vida con tablas )

Prueba este código:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Centrado vertical</title>
  <style type="text/css">
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
  </style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span><span
 id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
</span>
</div>
</div>
</body>
</html>
Me parece que esta vez va a funcionar, "descreído" .

Y como saques otra pega me oyes

Mikel.
  #7 (permalink)  
Antiguo 21/02/2007, 07:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Mikel, te tengo una mala noticia:

FUNCIONO!

XD

Así que ya no nos vamos a poder seguir divirtiendo mas con esto T_T

Te agradezco muchisimo por tu ayuda y compartire por ahi la solución. Ahora sera de someter a discusión y escuchar las opiniones de los demas.

Ojo: Me falta probar IE7 y FF2, voy probando en IE6 y en Gran Paradiso a2

Gracias por ayudar a resolver el problema del centrado universal.

p.d: yo se que es mala palabra maquetar con tablas en un foro de CSS, pero de todas maneras hay muchisimas argumentaciones por un lado u otro. Si quieres te invito a visitar esta discusión reciente en A list apart.

h t t p : // alistapart.com/comments/multicolumnlayouts/

Saludos y gracias de nuevo.
  #8 (permalink)  
Antiguo 21/02/2007, 09:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Lástima.
En mi descargo diré que la solución del centrado para IE6 es de Stu Nichols, de "cssplay", aunque como él dice, su solución funciona en IE pero no en Mozilla y el resto. Así que si va bien en los navegadores que te faltan por chequear, igual sí tenemos yala "solución universal" como dices tú.

Como te he dicho, yo siempre había maquetado con tablas, y aunque estas tienes algunas ventajas, también tienen problemas imposibles de resolver para mi, que se resuelven muy fácilmente con CSS. También está el asunto de la accesibilidad y la semántica.

Ya enseñarás lo que hagas con eso.

Hasta la vista.

Mikel.
  #9 (permalink)  
Antiguo 21/02/2007, 10:14
Avatar de Subotai  
Fecha de Ingreso: mayo-2003
Ubicación: Irúnforge
Mensajes: 198
Antigüedad: 14 años, 7 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Wenass

Ya que axterixv no te va a poner pegas te las pondré yo como le añadirías a ese código un div que hiciera la funciones de pié de página que tenga el mismo ancho que el div contenedor

Llevo tiempo con esta chorrada que no consigo, lo más parecido que logré es este miniejemplillo
Poniendole 99% de anchura o 98 no llega a cuadrar.. he probado muchas muchas combinaciones y na de na...

Anda majo ilumíname..

GRACIASSSSS
  #10 (permalink)  
Antiguo 21/02/2007, 10:21
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Cita:
Iniciado por Mikmoro Ver Mensaje
Lástima.
En mi descargo diré que la solución del centrado para IE6 es de Stu Nichols, de "cssplay", aunque como él dice, su solución funciona en IE pero no en Mozilla y el resto. Así que si va bien en los navegadores que te faltan por chequear, igual sí tenemos yala "solución universal" como dices tú.

Como te he dicho, yo siempre había maquetado con tablas, y aunque estas tienes algunas ventajas, también tienen problemas imposibles de resolver para mi, que se resuelven muy fácilmente con CSS. También está el asunto de la accesibilidad y la semántica.

Ya enseñarás lo que hagas con eso.

Hasta la vista.

Mikel.
Pue si, va bien en los navegadores, hoy revise en FF2 y en IE7 y todo bien, asi que ya tenemos una solución, ahora que tan practica de implementar puff... a ver que pasa. :)
  #11 (permalink)  
Antiguo 21/02/2007, 10:48
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Cita:
Iniciado por Subotai Ver Mensaje
Llevo tiempo con esta chorrada que no consigo, lo más parecido que logré es este h t t p : //pruebas.xare.es/OSCAR/bodi.html"]miniejemplillo
Poniendole 99% de anchura o 98 no llega a cuadrar.. he probado muchas muchas combinaciones y na de na...
GRACIASSSSS
Te refieres a algo asi?

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Centrado vertical</title>
  <style type="text/css">
*{margin:0px; padding:0px;}
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
background: red;
color: white;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
#pie {background: blue; color: white; margin-bottom:0px; text-align:center;}
  </style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span><span
 id="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>
<p>Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.</p>

<div id="pie"><p> un pie o talves 2</p></div>
</div>
</div>
</body>
</html>
  #12 (permalink)  
Antiguo 22/02/2007, 05:35
Avatar de Subotai  
Fecha de Ingreso: mayo-2003
Ubicación: Irúnforge
Mensajes: 198
Antigüedad: 14 años, 7 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Wenasss

Gracias axterixv pero no es exactamente lo que busco. En el ejemplo que tu me has puesto, el pie se queda donde termina el contenido, el texto de la página.
Lo que busco es que siempre se quede en el final de la página, y que mida tanto como mide el div que le contiene.
Siendo un diseño líquido que abarque toda la pantalla menos un pequeño margen a la derecha y a la izquierda.

Mejor copio y pego el css del anterior link para que lo veas mas claro:

CSS:

Código:
/* CSS Document */
html{
	height:100%;
}
body{
	height:100%;
	background-color:#FF0000;
	margin:0px;
}


div#contenedor{
	height:100%;
	background-color:#ffffff;
	color:#FFFFFF;
	bottom:0px;
	margin-left:10px;
	margin-right:10px;
}

div#pie{
	position:fixed;
	width:100%;
	background-color:#767676;
	color:#FFFFFF;
	bottom:0px;
}
HTML:

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>Documento sin t&iacute;tulo</title>
<link href="bodi.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
		<div id="pie">QUISIERA QUE EL PIE MIDA DE ANCHO COMO EL DIV BLANCO</div>
</div>
</body>
La única aclaración es que para IE6 ya lo tengo resuelto, lo que necesito es conseguirlo para el FIREOX

Espero que puedas ayudarme ^^

graciasssss

Última edición por Subotai; 22/02/2007 a las 05:42
  #13 (permalink)  
Antiguo 22/02/2007, 10:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Hola puse un post en el foro que habla de eso, la solución todavía es parcial, pero espero que te pueda servir:

h t t p : // www .forosdelweb.com/showthread.php?t=467272
  #14 (permalink)  
Antiguo 22/02/2007, 17:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

En el post que te comenta axterixv http://www.forosdelweb.com/f53/cosas-basicas-pie-pagina-que-queda-fondo-467272/
(lo pongo porque él todavía no puede poner links )
he puesto una respuesta que puede que te sirva.

Ya contarás.

Mikel.
  #15 (permalink)  
Antiguo 23/02/2007, 04:17
Avatar de Subotai  
Fecha de Ingreso: mayo-2003
Ubicación: Irúnforge
Mensajes: 198
Antigüedad: 14 años, 7 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Me ha venido como anillo al dedo gracias a todosss ^^
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.