Foros del Web » Creando para Internet » CSS »

centrado vertical con %

Estas en el tema de centrado vertical con % en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/06/2009, 12:10
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
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
codigo82
  #2 (permalink)  
Antiguo 22/06/2009, 12:54
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
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.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 22/06/2009, 13:22
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
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
codigo82
  #4 (permalink)  
Antiguo 22/06/2009, 16:16
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
Respuesta: centrado vertical con %

Cita:
Iniciado por willyfc Ver Mensaje
, 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 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 22/06/2009, 16:19
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
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
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 22/06/2009, 16:27
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
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 ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #7 (permalink)  
Antiguo 22/06/2009, 16:33
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: centrado vertical con %

Cita:
Iniciado por Mikmoro Ver Mensaje
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
codigo82
  #8 (permalink)  
Antiguo 22/06/2009, 19:00
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
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/06/2009 a las 19:06 Razón: También funciona bien en ie8
  #9 (permalink)  
Antiguo 22/06/2009, 19:02
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: centrado vertical con %

Cita:
Repito, muchas gracias
...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #10 (permalink)  
Antiguo 23/06/2009, 01:45
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
Respuesta: centrado vertical con %

Cita:
Iniciado por ssclamp Ver Mensaje
Testado en ie6, ff3, safari4 (w) y opera9, opera10beta ,chrome2 y ie8... y perfecto.
Estupendo.

Cita:
Iniciado por ssclamp Ver Mensaje
<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
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 23/06/2009, 10:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrado vertical con %

Cita:
Iniciado por ssclamp Ver Mensaje
<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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 23/06/2009, 11:15
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
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%;
}
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 23/06/2009, 11:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
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
codigo82
  #14 (permalink)  
Antiguo 23/09/2009, 11:03
Avatar de Jandor  
Fecha de Ingreso: septiembre-2009
Mensajes: 71
Antigüedad: 8 años, 2 meses
Puntos: 1
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....
  #15 (permalink)  
Antiguo 23/09/2009, 11:14
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
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.
  #16 (permalink)  
Antiguo 23/09/2009, 14:24
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
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.

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:19.