Foros del web

willyfc · 22-jun-2009, 11:10

Buenas colegas, vengo con una duda. Ya hemos visto muchas veces de como centrar una web horizontal y verticalmente

Cita:

html, body {height:100%; }
#fijo {
position:absolute;
width:200px;
height:200px;
border:1px solid #000;
background:#cff;
left:50%;
margin-left:-100px;
top:50%;
margin-top:-100px;
}

código extraído de Mik.

Ahora, caigo en el dilema de que estoy haciendo mi primera web en flash que esta en %, ya esta hecho de esa manera, y debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo.

Agradecería cualquier ayudilla o sugerencia.

Mikmoro · 22-jun-2009, 11:54

Prueba esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical 5</title>
<style type="text/css">
html, body {height: 100%;
width: 100%;margin: 0;}
#caja {display: table;
height: 100%;
width: 100%;
position: relative;
}
.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
height: 100%;
}
.texto {position: relative;
top: 0;
display: block;
background-color: #f00;
color: #fff;
height: 30%;
}
</style>
</head>
<body>
<div id="caja">
<div class="centrado" style="*position: absolute;*top: 50%;*height: 30%">
<span class="texto" style="*top: -50%;*height: 100%">
Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba
</span>
</div>
</div>
</body>
</html>

(cómo me gustan los retos)

P.D.: sólo lo he mirado en IE6 y FF2.

willyfc · 22-jun-2009, 12:22

, mmm, mmm, Mik te estas riendo de mí,

Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo.

PD:No pasarás a dar tu veredicto en la última competencia de CSS?.

Mikmoro · 22-jun-2009, 15:16

Cita:

Iniciado por willyfc

, mmm, mmm, Mik te estas riendo de mí,

No, me rio de mi. Pensaba que iba aser más difícil encontrar la solución y que estaría un ratillo mirando y lo dejaría, pero resulta que ha salido fácil y más rápido de lo esperado.

Cita:

Iniciado por willyfc

PD:No pasarás a dar tu veredicto en la última competencia de CSS?.

Pues pensaba hacerlo, pero lo cierto es que tengo bastante trabajo, y aunque de rato en rato me conecto para ver que hay de nuevo, nunca paso el suficiente tiempo parado como el que habría que dedicarle a una análisis un poco detallado. Y lo mismo que la última vez, lo cierto es que se han dicho bastantes cosas ya, y puede que no pudiera aportar mucho de nuevo.

Lo siento, pero esta vez me ha pillado un poco mal.

Mikmoro · 22-jun-2009, 15:19

Por cierto: es una interesante nueva manera de centrado compatible con tamaño en porcentaje, que añadiré a la colección un día de estos. A tu salud porque tú la has motivado

Calizman · 22-jun-2009, 15:27

Cita:

Iniciado por WillyFC

Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo.

Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta.

willyfc · 22-jun-2009, 15:33

Cita:

Iniciado por Mikmoro

Lo siento, pero esta vez me ha pillado un poco mal.

Que pena Mik, ya sabes que para muchos de nosotros es importante tu opinión en estos temas,sin desmerecer que Triby hizo un gran trabajo dando varios detalles.Pero el trabajo es primero.

Cita:

Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta.

Ya vieron como colaboré en el Indice de Recursos

ssclamp · 22-jun-2009, 18:00

Mik, formidable código: claro, conciso y de gran ingenio. Muchas gracias por él.

Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto.

Por las prisas que has tenido te ha faltado un pequeño valor para que funcione bien en ie7, y me he permitido añadirlo:

<div class="centrado" style="*position: absolute; *top: 50%; *height: 30%; *width: 100%; /*añadido el width para que funcione en ie7*/">

Repito, muchas gracias

Saludos

Calizman · 22-jun-2009, 18:02

Cita:

Repito, muchas gracias

...

Mikmoro · 23-jun-2009, 00:45

Cita:

Iniciado por ssclamp

Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto.

Estupendo.

Cita:

Iniciado por ssclamp

Ah, muy bien. No había pensado en el ancho porque tampoco willyfc decía nada de eso (creo), pero mejor, así nos aseguramos de que no se cuela nada.

Muchas gracias. Otro contribuyente a la próxima actualización

kseso? · 23-jun-2009, 09:50

Cita:

Iniciado por ssclamp

Pero así se fuerza la aparición del scroll horizontal.

Se evita con

Cita:

.centrado {padding: 0 0.99%; width: 98%; /*resto de propiedades*}

Mi céntimo al index

Mikmoro · 23-jun-2009, 10:15

Huyyyyyyyyy!!!!!! Casi casi.
Veamos:
suponiendo que willyfc quisiera ocupar todo el ancho, bastaría con esta pequeña modificación:

Cita:

.centrado {display: table-cell;
vertical-align: middle;
margin: 0 auto;
height: 100%;
width: 100%;
}

que sería añadir el width del 100 y quitar el padding que tenía ese selector.

Pero teniendo en cuenta que dice:
"debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo."
y que lo de que sea sólo centrado vertical me lo he inventado yo, porque igual quería directamente porcentual y centrado en las dos dimensiones, sería tan fácil como hacer:

Cita:

.centrado {display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
.texto {position: relative;
margin: 0 auto;
top: 0;
display: block;
background-color: #f00;
color: #fff;
height: 30%;
width: 70%;
}

willyfc · 23-jun-2009, 10:25

Esta sería la gráfica de lo que en realidad se quisiera lograr, pero como a mi no me gusta estar jorobando, he estado tratando de solucionarlo yo.

digamos que de ancho debería tener 90 o quizá 80%.
para esta tarde veré como queda al final

Jandor · 23-sep-2009, 10:03

Consulta: tu lo que deseas hacer es que la pagina hecha en flash que tienes se centre tanto verticalmente, como horizontalmente en el navegador.....

Si te entendi bien yo lo que he hecho es esto y me ha servido de maravilla en todos los exploradores que he probado, IE, Mozilla, Opera, Safari y Chrome

<table align="center" height="100%">
<tr>
<td valign="middle">

//Aqui iria tu FLASH

</td>
</tr>
</table>

Bueno espero que sea esto lo que deseas, si no es asi mil disculpas pro entender mal....

Mikmoro · 23-sep-2009, 10:14

Es buena tu intención, Jandor, pero se intenta hacer sin usar tablas para maquetar la página, por eso no se utiliza esa solución.

jomaruro · 23-sep-2009, 13:24

Hola:

La verdad, viendo temas como este, con todos los maestros aportando su opinión y su "centimo" me doy cuenta de lo poco que sé de CSS.

Gracias a todos.

Saludos.

22-jun-2009, 11:10	#1 (permalink)
willyfc 648 Mensajes Ubicación: Santa Cruz - Bolivia	centrado vertical con % Buenas colegas, vengo con una duda. Ya hemos visto muchas veces de como centrar una web horizontal y verticalmente Cita: html, body {height:100%; } #fijo { position:absolute; width:200px; height:200px; border:1px solid #000; background:#cff; left:50%; margin-left:-100px; top:50%; margin-top:-100px; } código extraído de Mik. Ahora, caigo en el dilema de que estoy haciendo mi primera web en flash que esta en %, ya esta hecho de esa manera, y debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo. Agradecería cualquier ayudilla o sugerencia. __________________ WFC

22-jun-2009, 11:54	#2 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Prueba esto: Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Centrado Vertical 5</title> <style type="text/css"> html, body {height: 100%; width: 100%;margin: 0;} #caja {display: table; height: 100%; width: 100%; position: relative; } .centrado {display: table-cell; vertical-align: middle; margin: 0 auto; padding: 0 10px; height: 100%; } .texto {position: relative; top: 0; display: block; background-color: #f00; color: #fff; height: 30%; } </style> </head> <body> <div id="caja"> <div class="centrado" style="position: absolute;top: 50%;height: 30%"> <span class="texto" style="top: -50%;*height: 100%"> Texto de prueba, más texto de prueba, otro texto de prueba y el último texto de prueba </span> </div> </div> </body> </html> (cómo me gustan los retos) P.D.: sólo lo he mirado en IE6 y FF2. __________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar.

22-jun-2009, 12:22	#3 (permalink)
willyfc 648 Mensajes Ubicación: Santa Cruz - Bolivia	Respuesta: centrado vertical con % , mmm, mmm, Mik te estas riendo de mí, Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo. PD:No pasarás a dar tu veredicto en la última competencia de CSS?. __________________ WFC

22-jun-2009, 15:16	#4 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Cita: Iniciado por willyfc , mmm, mmm, Mik te estas riendo de mí, No, me rio de mi. Pensaba que iba aser más difícil encontrar la solución y que estaría un ratillo mirando y lo dejaría, pero resulta que ha salido fácil y más rápido de lo esperado. Cita: Iniciado por willyfc PD:No pasarás a dar tu veredicto en la última competencia de CSS?. Pues pensaba hacerlo, pero lo cierto es que tengo bastante trabajo, y aunque de rato en rato me conecto para ver que hay de nuevo, nunca paso el suficiente tiempo parado como el que habría que dedicarle a una análisis un poco detallado. Y lo mismo que la última vez, lo cierto es que se han dicho bastantes cosas ya, y puede que no pudiera aportar mucho de nuevo. Lo siento, pero esta vez me ha pillado un poco mal. __________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar.

22-jun-2009, 15:19	#5 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Por cierto: es una interesante nueva manera de centrado compatible con tamaño en porcentaje, que añadiré a la colección un día de estos. A tu salud porque tú la has motivado __________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar.

22-jun-2009, 15:27	#6 (permalink)
Calizman Organiza competencias CSS 1.071 Mensajes Ubicación: Foro CSS	Respuesta: centrado vertical con % Cita: Iniciado por WillyFC Sabía que tu darías con esta solución, me va genial. Muchas Gracias Mik, un saludo. Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta. __________________ [ Mi Sitio Personal ] "Aunque podamos ser eruditos por el saber de otros, sólo podemos ser sabios por nuestra propia sabiduría" Montagne

22-jun-2009, 15:33	#7 (permalink)
willyfc 648 Mensajes Ubicación: Santa Cruz - Bolivia	Respuesta: centrado vertical con % Cita: Iniciado por Mikmoro Lo siento, pero esta vez me ha pillado un poco mal. Que pena Mik, ya sabes que para muchos de nosotros es importante tu opinión en estos temas,sin desmerecer que Triby hizo un gran trabajo dando varios detalles.Pero el trabajo es primero. Cita: Nada, aqui se agradece poniendo "Yo Soy Mikmorista" y la pagina web de Mikmoro en tu firma. Sino, tus agradecimientos no son tomados en cuenta. Ya vieron como colaboré en el Indice de Recursos __________________ WFC

22-jun-2009, 18:00	#8 (permalink)
ssclamp 289 Mensajes	Respuesta: centrado vertical con % Mik, formidable código: claro, conciso y de gran ingenio. Muchas gracias por él. Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto. Por las prisas que has tenido te ha faltado un pequeño valor para que funcione bien en ie7, y me he permitido añadirlo: <div class="centrado" style="position: absolute; top: 50%; height: 30%; width: 100%; /añadido el width para que funcione en ie7/"> Repito, muchas gracias Saludos Última edición por ssclamp; 22-jun-2009 a las 18:06 Razón: También funciona bien en ie8

22-jun-2009, 18:02	#9 (permalink)
Calizman Organiza competencias CSS 1.071 Mensajes Ubicación: Foro CSS	Respuesta: centrado vertical con % Cita: Repito, muchas gracias ... __________________ [ Mi Sitio Personal ] "Aunque podamos ser eruditos por el saber de otros, sólo podemos ser sabios por nuestra propia sabiduría" Montagne

23-jun-2009, 00:45	#10 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Cita: Iniciado por ssclamp Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto. Estupendo. Cita: Iniciado por ssclamp <div class="centrado" style="position: absolute; top: 50%; height: 30%; width: 100%; /añadido el width para que funcione en ie7/"> Ah, muy bien. No había pensado en el ancho porque tampoco willyfc decía nada de eso (creo), pero mejor, así nos aseguramos de que no se cuela nada. Muchas gracias. Otro contribuyente a la próxima actualización __________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar.

23-jun-2009, 09:50	#11 (permalink)
kseso? Colaborador 4.134 Mensajes	Respuesta: centrado vertical con % Cita: Iniciado por ssclamp <div class="centrado" style="position: absolute; top: 50%; height: 30%; width: 100%; /añadido el width para que funcione en ie7/"> Pero así se fuerza la aparición del scroll horizontal. Se evita con Cita: .centrado {padding: 0 0.99%; width: 98%; /resto de propiedades} Mi céntimo al index

23-jun-2009, 10:15	#12 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Huyyyyyyyyy!!!!!! Casi casi. Veamos: suponiendo que willyfc quisiera ocupar todo el ancho, bastaría con esta pequeña modificación: Cita: .centrado {display: table-cell; vertical-align: middle; margin: 0 auto; height: 100%; width: 100%; } que sería añadir el width del 100 y quitar el padding que tenía ese selector. Pero teniendo en cuenta que dice: "debe tener este tipo de centrado pero no puedo utilizar los margenes en px ya que la caja que lo contiene debe de estar en % y no como en el ejemplo." y que lo de que sea sólo centrado vertical me lo he inventado yo, porque igual quería directamente porcentual y centrado en las dos dimensiones, sería tan fácil como hacer: Cita: .centrado {display: table-cell; vertical-align: middle; height: 100%; width: 100%; } .texto {position: relative; margin: 0 auto; top: 0; display: block; background-color: #f00; color: #fff; height: 30%; width: 70%; } __________________ No esperes que nadie haga más esfuerzo en responderte que el que hagas tú en preguntar.

23-jun-2009, 10:25	#13 (permalink)
willyfc 648 Mensajes Ubicación: Santa Cruz - Bolivia	Respuesta: centrado vertical con % Esta sería la gráfica de lo que en realidad se quisiera lograr, pero como a mi no me gusta estar jorobando, he estado tratando de solucionarlo yo. digamos que de ancho debería tener 90 o quizá 80%. para esta tarde veré como queda al final __________________ WFC

23-sep-2009, 10:03	#14 (permalink)
Jandor 55 Mensajes	Respuesta: centrado vertical con % Consulta: tu lo que deseas hacer es que la pagina hecha en flash que tienes se centre tanto verticalmente, como horizontalmente en el navegador..... Si te entendi bien yo lo que he hecho es esto y me ha servido de maravilla en todos los exploradores que he probado, IE, Mozilla, Opera, Safari y Chrome <table align="center" height="100%"> <tr> <td valign="middle"> //Aqui iria tu FLASH </td> </tr> </table> Bueno espero que sea esto lo que deseas, si no es asi mil disculpas pro entender mal....

23-sep-2009, 10:14	#15 (permalink)
Mikmoro Colaborador 7.217 Mensajes Ubicación: K-pax	Respuesta: centrado vertical con % Es buena tu intención, Jandor, pero se intenta hacer sin usar tablas para maquetar la página, por eso no se utiliza esa solución.

23-sep-2009, 13:24	#16 (permalink)
jomaruro Colaborador 3.856 Mensajes Ubicación: Tatooine	Respuesta: centrado vertical con % Hola: La verdad, viendo temas como este, con todos los maestros aportando su opinión y su "centimo" me doy cuenta de lo poco que sé de CSS. Gracias a todos. Saludos. __________________ En tus manos está el poder de evitar que mis ojos sangren. Pintura Surrealista

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Modo lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado