Re: [Ovillo] Cosas Basicas: Centrado Vertical
Hola gente de la lista,
Pues les cuento que después de mucho probar por fin encontramos una solución
para el centrado vertical con alto fluido (no tan funcional como la tuya
Almirante, pero bastante bien para lo que se buscaba).
Se a probado con IE7, IE6, FF2 y Gran Paradiso A2. También se probo con poco
texto y con mucho texto para ver el efecto de centrado.
Si alguien detecta un error en otro navegador favor avisar,
La solución es un hibrido de:
Stu Nichols (cssplay) y de Mikmoro (aka: Mikel / forosdelweb.com)
http://www.forosdelweb.com/showthread.php?p=1901588posted=1#post1901588
Aquí dejo el código:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
titleCentrado 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=contenedorspan id=vertical_ie/spanspan
id=texto
pLorem 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
pVivamus 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
---
Gracias a todos por la ayuda.
Vlad
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of webmaster
Sent: Martes, 20 de Febrero de 2007 12:51 p.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Christian,
27 páginas mas tarde, en la sección de CSS de forosdelweb.com debo de decirte
que sigo con el mismo problema.
Llegamos a 2 posibles soluciones:
Tabla Sama
Y centrado con height definido.
Si tu viste algo que yo no vi, por favor enviame el link, que creo que quedaria
genial matar este problema.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Martes, 20 de Febrero de 2007 12:12 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo de
kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro del body
se muestre en linea? ¿O es solo el body el que esta en línea?
Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo dibujas
en Paint perfectamente centrado lo grabas como imagen y lo subes de esa manera.
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el
contenido supera el 80% de alto de la página que es el que usan default, o
funciona hasta que cualquiera que definas como height, sea centrada (por eso es
que este centrado vertical es con contenido fluido).
Y sobre lo de google, si buscas un poquito mas de hilos veras que se a buscado,
y que la solución no pareciera encontrarse hasta lo que puso kemi hoy con un
poco de script.
En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la
cosa es, lograrlo hacer sin ella.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque Geldres
Sent: Martes, 20 de Febrero de 2007 10:49 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml
y que de esto:
http://www.google.com.pe/search?hl=esq=centrado+vertical+con+CSSmeta=
ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se busque
Christian Roque G.
-Mensaje original
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Se parece bastante al enlace que dejo kemie, hacen lo mismo de diplay:table
y dentro de este un display:table-cell
En fin que bueno que hayas encontrado una solución
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: miércoles, 21 de febrero de 2007 11:29
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Hola gente de la lista,
Pues les cuento que después de mucho probar por fin encontramos una solución
para el centrado vertical con alto fluido (no tan funcional como la tuya
Almirante, pero bastante bien para lo que se buscaba).
Se a probado con IE7, IE6, FF2 y Gran Paradiso A2. También se probo con
poco texto y con mucho texto para ver el efecto de centrado.
Si alguien detecta un error en otro navegador favor avisar,
La solución es un hibrido de:
Stu Nichols (cssplay) y de Mikmoro (aka: Mikel / forosdelweb.com)
http://www.forosdelweb.com/showthread.php?p=1901588posted=1#post1901588
Aquí dejo el código:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
html
head
titleCentrado 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=contenedorspan id=vertical_ie/spanspan
id=texto
pLorem 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
pVivamus 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
---
Gracias a todos por la ayuda.
Vlad
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of webmaster
Sent: Martes, 20 de Febrero de 2007 12:51 p.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Christian,
27 páginas mas tarde, en la sección de CSS de forosdelweb.com debo de
decirte que sigo con el mismo problema.
Llegamos a 2 posibles soluciones:
Tabla Sama
Y centrado con height definido.
Si tu viste algo que yo no vi, por favor enviame el link, que creo que
quedaria genial matar este problema.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Martes, 20 de Febrero de 2007 12:12 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo
de kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro
del body se muestre en linea? ¿O es solo el body el que esta en línea?
Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo
dibujas en Paint perfectamente centrado lo grabas como imagen y lo subes de
esa manera.
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el
contenido supera el 80% de alto de la página que es el que usan default, o
funciona hasta que cualquiera que definas como height, sea centrada (por eso
es que este centrado vertical es con contenido fluido).
Y sobre lo de google, si buscas un poquito mas de hilos veras que se a
buscado, y que la solución no pareciera encontrarse hasta lo que puso kemi
hoy con un poco de script.
En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la
cosa es, lograrlo hacer sin ella.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Sip de hecho si miras el forodelweb se pública la solución de kemie y de mas de
algo a de haber solucionado, el problema es que la versión de kemie, al
introducir codigo mas grande que el alto de la pantalla (que te obligara a
hacer scroll, no calculaba bien, aparte de que IE7 decia que corrias un
componente active X).
Lo que me alegra es que parece que tenemos una solución pseudo universal para
posicionar verticalmente lo quesea ^^ (Espero XD )
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Miércoles, 21 de Febrero de 2007 10:36 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Se parece bastante al enlace que dejo kemie, hacen lo mismo de diplay:table y
dentro de este un display:table-cell
En fin que bueno que hayas encontrado una solución
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: miércoles, 21 de febrero de 2007 11:29
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Hola gente de la lista,
Pues les cuento que después de mucho probar por fin encontramos una solución
para el centrado vertical con alto fluido (no tan funcional como la tuya
Almirante, pero bastante bien para lo que se buscaba).
Se a probado con IE7, IE6, FF2 y Gran Paradiso A2. También se probo con poco
texto y con mucho texto para ver el efecto de centrado.
Si alguien detecta un error en otro navegador favor avisar,
La solución es un hibrido de:
Stu Nichols (cssplay) y de Mikmoro (aka: Mikel / forosdelweb.com)
http://www.forosdelweb.com/showthread.php?p=1901588posted=1#post1901588
Aquí dejo el código:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head
titleCentrado 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=contenedorspan id=vertical_ie/spanspan id=texto pLorem
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 pVivamus
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
---
Gracias a todos por la ayuda.
Vlad
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of webmaster
Sent: Martes, 20 de Febrero de 2007 12:51 p.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Christian,
27 páginas mas tarde, en la sección de CSS de forosdelweb.com debo de decirte
que sigo con el mismo problema.
Llegamos a 2 posibles soluciones:
Tabla Sama
Y centrado con height definido.
Si tu viste algo que yo no vi, por favor enviame el link, que creo que quedaria
genial matar este problema.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque Geldres
Sent: Martes, 20 de Febrero de 2007 12:12 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo de
kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro del body
se muestre en linea? ¿O es solo el body el que esta en línea?
Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo dibujas
en Paint perfectamente centrado lo grabas como imagen y lo subes de esa manera.
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Re: [Ovillo] Cosas Basicas: Centrado Vertical
De cualquier manera si alguien aca se le ocurre como solucionar el problema de
cómo centrar verticalmente, con un alto no definido para el div a centrar, se
le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se vé
la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript no
se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Just ayer me encontre esto:
http://www.aplus.co.yu/css/relaxed-dead-centre-layout/
no lo he probado, pero por lo que veo, funciona :)
saludos!
kemie
webmaster wrote:
De cualquier manera si alguien aca se le ocurre como solucionar el problema
de cómo centrar verticalmente, con un alto no definido para el div a centrar,
se le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se
vé la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript
no se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
O_O
Pues si parece que funciona... Tu que parece que sabes de esto, talves me
puedes explicar algo?
Los comentarios condicionales de IE, que hacen en esa página? Pareciera como si
fuera algun lenguaje de programación, obteniendo la posición, pero... No miro
ningún dialogo que diga script.
Por otro lado, el hacer html { display:table;) no tiene efectos secundarios muy
fuertes con todo lo demás?
Gracias!
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kemie guaida
Sent: Martes, 20 de Febrero de 2007 10:08 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Just ayer me encontre esto:
http://www.aplus.co.yu/css/relaxed-dead-centre-layout/
no lo he probado, pero por lo que veo, funciona :)
saludos!
kemie
webmaster wrote:
De cualquier manera si alguien aca se le ocurre como solucionar el problema
de cómo centrar verticalmente, con un alto no definido para el div a centrar,
se le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el
que se vé la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript
no se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml
y que de esto:
http://www.google.com.pe/search?hl=esq=centrado+vertical+con+CSSmeta=
ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se
busque
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: martes, 20 de febrero de 2007 11:37
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Si hay algo que una estúpida tabla nos permite, es centrar un objeto
exactamente en el medio de la pantalla. Es una de las cosas más vergonzantes
que vi respecto a CSS, ya que ni poniendo y sacando DTD o haciendo engendros
mutantes de ingeniería casera (léase parcheos con JavaScript) haremos alto
tan fácil como:
table width=100% height=100%
tr align=center valign=middle
tdimg src=tu_imagen.gif
/td/tr/table
Reforzándolo con el siguiente DTD (si se quiere):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
Claro: hay cosas desaprobadas (todo, ¡ja!)... pero un ciego lo puede ver y
un sordo lo puede oir... ¡Qué lo parió!
Mi abuela decía: si es malo y funciona, es bueno; si es bueno y no
funciona: es una mierda (perdón las chicas y los puritanos).
Almirante von Web/.
--
Educando al asno, por no apalearlo.
©2007 ;-)
- Original Message -
From: webmaster [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, February 20, 2007 12:42 PM
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
De cualquier manera si alguien aca se le ocurre como solucionar el problema
de cómo centrar verticalmente, con un alto no definido para el div a
centrar, se le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto
solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se
vé la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript
no se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el
contenido supera el 80% de alto de la página que es el que usan default, o
funciona hasta que cualquiera que definas como height, sea centrada (por eso es
que este centrado vertical es con contenido fluido).
Y sobre lo de google, si buscas un poquito mas de hilos veras que se a buscado,
y que la solución no pareciera encontrarse hasta lo que puso kemi hoy con un
poco de script.
En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la
cosa es, lograrlo hacer sin ella.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Martes, 20 de Febrero de 2007 10:49 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml
y que de esto:
http://www.google.com.pe/search?hl=esq=centrado+vertical+con+CSSmeta=
ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se busque
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: martes, 20 de febrero de 2007 11:37
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Si hay algo que una estúpida tabla nos permite, es centrar un objeto
exactamente en el medio de la pantalla. Es una de las cosas más vergonzantes
que vi respecto a CSS, ya que ni poniendo y sacando DTD o haciendo engendros
mutantes de ingeniería casera (léase parcheos con JavaScript) haremos alto tan
fácil como:
table width=100% height=100%
tr align=center valign=middle
tdimg src=tu_imagen.gif
/td/tr/table
Reforzándolo con el siguiente DTD (si se quiere):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
Claro: hay cosas desaprobadas (todo, ¡ja!)... pero un ciego lo puede ver y un
sordo lo puede oir... ¡Qué lo parió!
Mi abuela decía: si es malo y funciona, es bueno; si es bueno y no
funciona: es una mierda (perdón las chicas y los puritanos).
Almirante von Web/.
--
Educando al asno, por no apalearlo.
©2007 ;-)
- Original Message -
From: webmaster [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, February 20, 2007 12:42 PM
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
De cualquier manera si alguien aca se le ocurre como solucionar el problema de
cómo centrar verticalmente, con un alto no definido para el div a centrar, se
le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se vé
la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript no
se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of
distancia */
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo
de kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro
del body se muestre en linea? ¿O es solo el body el que esta en línea?
Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo
dibujas en Paint perfectamente centrado lo grabas como imagen y lo subes de
esa manera.
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el
contenido supera el 80% de alto de la página que es el que usan default, o
funciona hasta que cualquiera que definas como height, sea centrada (por eso
es que este centrado vertical es con contenido fluido).
Y sobre lo de google, si buscas un poquito mas de hilos veras que se a
buscado, y que la solución no pareciera encontrarse hasta lo que puso kemi
hoy con un poco de script.
En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la
cosa es, lograrlo hacer sin ella.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Martes, 20 de Febrero de 2007 10:49 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml
y que de esto:
http://www.google.com.pe/search?hl=esq=centrado+vertical+con+CSSmeta=
ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se
busque
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: martes, 20 de febrero de 2007 11:37
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Si hay algo que una estúpida tabla nos permite, es centrar un objeto
exactamente en el medio de la pantalla. Es una de las cosas más vergonzantes
que vi respecto a CSS, ya que ni poniendo y sacando DTD o haciendo engendros
mutantes de ingeniería casera (léase parcheos con JavaScript) haremos alto
tan fácil como:
table width=100% height=100%
tr align=center valign=middle
tdimg src=tu_imagen.gif
/td/tr/table
Reforzándolo con el siguiente DTD (si se quiere):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
Claro: hay cosas desaprobadas (todo, ¡ja!)... pero un ciego lo puede ver y
un sordo lo puede oir... ¡Qué lo parió!
Mi abuela decía: si es malo y funciona, es bueno; si es bueno y no
funciona: es una mierda (perdón las chicas y los puritanos).
Almirante von Web/.
--
Educando al asno, por no apalearlo.
©2007 ;-)
- Original Message -
From: webmaster [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, February 20, 2007 12:42 PM
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
De cualquier manera si alguien aca se le ocurre como solucionar el problema
de cómo centrar verticalmente, con un alto no definido para el div a
centrar, se le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto
solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se
vé la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript
no se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of
distancia */
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Christian,
27 páginas mas tarde, en la sección de CSS de forosdelweb.com debo de decirte
que sigo con el mismo problema.
Llegamos a 2 posibles soluciones:
Tabla Sama
Y centrado con height definido.
Si tu viste algo que yo no vi, por favor enviame el link, que creo que quedaria
genial matar este problema.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque
Geldres
Sent: Martes, 20 de Febrero de 2007 12:12 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Busca en forosdelweb.com, ahí se ha preguntado eso varias veces, el ejemplo de
kemie me desconcierta, ¿el diplay: table-cell no haría que todo dentro del body
se muestre en linea? ¿O es solo el body el que esta en línea?
Claro que seria mas fácil con una tabla, es mas, seria mas fácil si lo dibujas
en Paint perfectamente centrado lo grabas como imagen y lo subes de esa manera.
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de webmaster
Enviado el: martes, 20 de febrero de 2007 12:43
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Te digo algo muy sencillo, el de tierra de nomadas funciona hasta que el
contenido supera el 80% de alto de la página que es el que usan default, o
funciona hasta que cualquiera que definas como height, sea centrada (por eso es
que este centrado vertical es con contenido fluido).
Y sobre lo de google, si buscas un poquito mas de hilos veras que se a buscado,
y que la solución no pareciera encontrarse hasta lo que puso kemi hoy con un
poco de script.
En cierto punto, tiene razón el almirante, es mas sencillo con una tabla, la
cosa es, lograrlo hacer sin ella.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Christian Roque Geldres
Sent: Martes, 20 de Febrero de 2007 10:49 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Y que me dices de esto:
http://www.tierradenomadas.com/tw003.phtml
y que de esto:
http://www.google.com.pe/search?hl=esq=centrado+vertical+con+CSSmeta=
ejemplos hay hasta por gusto, y kemie dio uno mas, otra cosa es que no se busque
Christian Roque G.
-Mensaje original-
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
En nombre de LISTAS
Enviado el: martes, 20 de febrero de 2007 11:37
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Si hay algo que una estúpida tabla nos permite, es centrar un objeto
exactamente en el medio de la pantalla. Es una de las cosas más vergonzantes
que vi respecto a CSS, ya que ni poniendo y sacando DTD o haciendo engendros
mutantes de ingeniería casera (léase parcheos con JavaScript) haremos alto tan
fácil como:
table width=100% height=100%
tr align=center valign=middle
tdimg src=tu_imagen.gif
/td/tr/table
Reforzándolo con el siguiente DTD (si se quiere):
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
Claro: hay cosas desaprobadas (todo, ¡ja!)... pero un ciego lo puede ver y un
sordo lo puede oir... ¡Qué lo parió!
Mi abuela decía: si es malo y funciona, es bueno; si es bueno y no
funciona: es una mierda (perdón las chicas y los puritanos).
Almirante von Web/.
--
Educando al asno, por no apalearlo.
©2007 ;-)
- Original Message -
From: webmaster [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, February 20, 2007 12:42 PM
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
De cualquier manera si alguien aca se le ocurre como solucionar el problema de
cómo centrar verticalmente, con un alto no definido para el div a centrar, se
le agradeceria mucho.
Gracias.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of NetVicious
Sent: Lunes, 19 de Febrero de 2007 06:03 a.m.
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el que se vé
la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin javascript no
se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto
Re: [Ovillo] Cosas Basicas: Centrado Vertical
En el IE6 no sale centrado.
Yo al final he optado por centrar la capa con JavaScript y asunto
solucionado.
Putatidas:
- Si pones la capa visible al principio hay un pequeño momento en el
que se vé la capa a la izquierda
- Si pones la capa oculta antes del centrado y el usuario va sin
javascript no se ve nada.
El miércoles, 14 feb 2007 a las 22:45, escribiste:
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical - contenido fluido enla vertical
En IE7 no lo he probado, dado que todavía no pienso instalarlo. Prefiero
esperar un poco mas hasta que se arreglen mas las deficiencias, al igual que
con WinVista. Tengo otros centrados guardados que quizá te sirva. Lo pondré
a ver que tal lo ves.
--
#boxcenterMLCS { position:absolute; top:50%; left:50%; width:500px;
height:300px; margin-left:-250px; margin-top:-150px; }
#boxcenterMLCL { position:absolute; top:10%; left:16%; width:68%;
height:80%; }
Un cordial saludo de SantosVZ
-Mensaje original-
De: webmaster [mailto:[EMAIL PROTECTED]
Enviado el: Jueves, 15 de Febrero de 2007 11:52 a.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Cosas Basicas: Centrado Vertical - contenido fluido
enla vertical
Hola Santos gracias por tu respuesta, creo que el problema con esto es el
mismo que plantie en el ejemplo anterior, necesitamos definir un alto para
el div, el problema se nota cuando tu div empieza a ser mayor que los 27.5
em (en tu ejemplo) adicionalmente IE7 parece que no lo esta interpretando
muy bien,, pero eso no tiene nada de nuevo.
Sigo buscando soluciones y alentando a los expertos en la lista a tratar de
encontrar una solución a este problema que creo que nos podria beneficiar a
todos.
Vlad
P.d:
Soluciones posibles encontradas:
1. JavaScript para determinar el tamaño del div verticualmente y solucionar
con margenes negativos.
2. La vieja amiga tabla.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Santos Corrales
Sent: Miércoles, 14 de Febrero de 2007 03:45 p.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Cosas Basicas: Centrado Vertical
Hola gente de la lista,
Estoy tratando de hacer algo que por lo visto es muy sencillo, pero la solución
que utilizaba parece no funcionar muy bien con IE7, quisiera buscar algo que
funcione en todos los navegadores y de preferencia sin hacks.
Estoy tratando de que el contenido de una página quede centrado verticalmente,
normalmente haria esto con una tabla principal, le daria ancho y alto de 100% y
alineo el contenido en el centro y ya esta, pero quisiera hacer algo sin usar
tablas.
Este es mi codigo:
---
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleEsto es una prueba de centrado vertical/title
style type=text/css
!--
* {margin:0; padding:0;}
#contenedor {width:750px; margin:auto; overflow:auto;}
--
/style
/head
body
div id=contenedor
div id=banner
h1Nombre del sitio/h1
/div
div id=navegacion
ul
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
/ul
/div
div id=contenido
pLorem 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
pAqui va todo lo legal y cosas similares/p
/div
/div
/body
/html
---
Gracias de antemano!
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
Hola Ignacio, si te das cuenta el problema con esa solución es que la altura
tiene que estar predefinida, en este caso no tenemos altura predefinida.
:S
También el mismo autor pone:
NOTE (October 2006): valid solution described below doesn't work in Internet
Explorer 7 (standard mode), because IE7 doesn't understand table- values in
display property. Please use non-valid solution above untill somebody would
find any valid hack for IE7 (or write in quirk mode).
De todas maneras muchas gracias ignacio.
Vlad.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ignacio Fortea
Sent: Miércoles, 14 de Febrero de 2007 09:45 a.m.
To: 'Ovillo, la lista de CSS en castellano'
Subject: Re: [Ovillo] Cosas Basicas: Centrado Vertical
Aquí teines un perfecto manual (en inglés):
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Un saludo.
Ignacio Fortea
Serlog21 - Consultoría de Recursos Humanos Pso. Sagasta, 62 :: Edificio venus,
oficina 4 :: 50006 Zaragoza Tlf. 902 10 40 98 - 976 37 25 06 :: Fax. 976 37 25
30
-Mensaje original-
De: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] En nombre de webmaster
Enviado el: miércoles, 14 de febrero de 2007 16:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Cosas Basicas: Centrado Vertical
Hola gente de la lista,
Estoy tratando de hacer algo que por lo visto es muy sencillo, pero la
solución que utilizaba parece no funcionar muy bien con IE7, quisiera
buscar algo que funcione en todos los navegadores y de preferencia sin
hacks.
Estoy tratando de que el contenido de una página quede centrado
verticalmente, normalmente haria esto con una tabla principal, le
daria ancho y alto de 100% y alineo el contenido en el centro y ya
esta, pero quisiera hacer algo sin usar tablas.
Este es mi codigo:
---
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1 / titleEsto es una prueba de centrado
vertical/title style type=text/css
!--
* {margin:0; padding:0;}
#contenedor {width:750px; margin:auto; overflow:auto;}
--
/style
/head
body
div id=contenedor
div id=banner
h1Nombre del sitio/h1
/div
div id=navegacion
ul
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
lia href=#Item 1/a/li
/ul
/div
div id=contenido
pLorem 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
pAqui va todo lo legal y cosas similares/p
/div
/div
/body
/html
---
Gracias de antemano!
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o
desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cosas Basicas: Centrado Vertical
style type=text/css
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-color:#999;
}
#distancia {
width:1px;
height:50%;
margin-bottom:-13.75em; /* half of container height */
float:left;
}
#container {
margin:0 auto;
position:relative; /* puts container in front of distancia
*/
height:27.5em;
width:45em;
clear:left;
background-color:#666;
border:1px dashed #fff;
}
/style
/head
body
div id=distancia/div
div id=container/div
/body
Un cordial saludo de SantosVZ
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
