Foros del Web » Creando para Internet » CSS »

Mikmoros e IE

Estas en el tema de Mikmoros e IE en el foro de CSS en Foros del Web. buenas, de nuevo yo. xD He estado dándole a la cabeza, y.... http://www.araudi.net/ejemplos/centrado_vertical.html no hay manera que funcione en IE? He estado buscando para poder ...
  #1 (permalink)  
Antiguo 26/09/2010, 15:45
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Mikmoros e IE

buenas, de nuevo yo. xD

He estado dándole a la cabeza, y.... http://www.araudi.net/ejemplos/centrado_vertical.html no hay manera que funcione en IE?

He estado buscando para poder alinear el menú en la parte inferior, aunque no se si vale la pena, ya que luego intentaré meterlo en una capa para que le des a una flechita y se mueva hacia arriba (osea, escondido y con la flecha, sale desde abajo oculto hasta la posición donde está ahora) en wakkos.es

Pero vamos, me interesaría ver una opción para IE.

Zenkiu verimoch!
__________________
Cool Village
@Wakkos

Última edición por Wakkos; 26/09/2010 a las 15:47 Razón: Se me coló la "S"!
  #2 (permalink)  
Antiguo 26/09/2010, 17:48
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

Espero que todo esté bien.

El ejemplo que te puede ayudar mejor es el segundo http://www.araudi.net/ejemplos/centrado_vertical2.html o el tercero http://www.araudi.net/ejemplos/centrado_vertical3.html. De esos fue que me base para unas aplicaciones que necesitaba mostrar en IE.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 26/09/2010, 18:03
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

Mi problema es el alineado abajo y al centro más que nada. Pero voy a darles vueltas a esos a ver que traen.
__________________
Cool Village
@Wakkos
  #4 (permalink)  
Antiguo 26/09/2010, 18:12
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

Trátalos vas a ver que con esos puedes hacerlo. Pero si es posible muestra alguna página de demo para que te podamos indicar mejor donde debes corregir.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 26/09/2010, 18:17
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

Ahi la tienes la demo, la puse arriba: www.wakkos.es

Puedes ver el CSS en http://wakkos.es/codigo.php?uri=wp-c...cool/style.css y el código donde se desarrolla en el footer.php:

http://wakkos.es/codigo.php?uri=wp-c...ool/footer.php
__________________
Cool Village
@Wakkos
  #6 (permalink)  
Antiguo 26/09/2010, 20:58
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

Mira un ejemplo, para que tengas más claro, tomado de araudi.net pero modificado.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>Centrado vertical 3 - Recursos CSS - araudi.net</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7.  
  8. html, body{
  9.     width: 100%;
  10.     height: 100%;
  11.     margin: 0;
  12.     padding: 0;
  13. }
  14. #content{
  15.     position: relative;
  16.     display: table;
  17.     width: 960px;
  18.     height: 100%;
  19.     margin: 0 auto;
  20. }
  21. .alignCenter {
  22.     display: table-cell;
  23.     vertical-align: middle;
  24.     *position: absolute;
  25.     *top: 30%;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="content">
  32.     <div class="alignCenter">
  33.         <p>
  34.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  35.             Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
  36.             ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
  37.             Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
  38.             eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
  39.             felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
  40.             nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae,
  41.             eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
  42.             Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
  43.             Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  44.         </p>
  45.         <p>
  46.             Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
  47.             sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,
  48.             hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
  49.             libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
  50.             Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat,
  51.             leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
  52.             Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed,
  53.             nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit
  54.             fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
  55.             cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.
  56.         </p>
  57.     </div>
  58. </div>
  59.  
  60. </body>
  61. </html>
El * antes de position y top, es para que solamente IE lea esos atributos. El porciento de top debes modificarlo de acuerdo a la cantidad de texto que tengas, para que así quede más o menos centrado.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #7 (permalink)  
Antiguo 27/09/2010, 02:33
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

*mas o menos centrado* no es centrado, puto IE.

Voy aprobar con ese code a alinearlo abajo.
__________________
Cool Village
@Wakkos
  #8 (permalink)  
Antiguo 27/09/2010, 02:42
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

No se me alinean abajo o me hacen aparecer la scrollbar.

Voy a intentarlo con algo como FooterStick
__________________
Cool Village
@Wakkos
  #9 (permalink)  
Antiguo 27/09/2010, 08:24
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

En el de abajo, debes otorgarle un negativo al valor de margin-top, por ejemplo, el de mikmoro http://www.araudi.net/ejemplos/pie_siempre_abajo.html
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #10 (permalink)  
Antiguo 27/09/2010, 13:10
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

claro pero ese margin-top me lo puede alinear abajo independiente de la resolución?
__________________
Cool Village
@Wakkos
  #11 (permalink)  
Antiguo 27/09/2010, 14:07
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

El ejemplo que hace Mikmoro, funciona en todas las resoluciones, porque en realidad es que el contenedor es un 100% y luego el pie va después del contenedor solo se le resta al tamaño que tiene para que quede exactamente abajo.

Edito:
Mira este ejemplo para que tengas idea
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Pie siempre abajo - Recursos CSS - araudi.net</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <style type="text/css">
  6. html, body{
  7.     margin: 0;
  8.     padding: 0;
  9.     height: 100%;
  10. }
  11. #contenedor {
  12.     min-height: 100%;
  13.     height: auto !important;
  14.     height: 100%;
  15. }
  16. #cabecera{
  17.     height: 4em;
  18.     background-color: #399;
  19.     color: #fff;
  20.     text-align: center;
  21. }
  22. #contenido {padding: 1em;}
  23. #pie{
  24.     text-align: center;
  25.     background-color: #366;
  26.     color: #fff;
  27.     height: 3em;
  28.     margin-top: -3em;
  29. }
  30. .ejemplo{
  31.     position:relative;
  32.     top: 0.5em;
  33.     font-size: 1.2em;
  34. }
  35.  
  36. /*
  37. Este (clear) es importante para que el contenido no
  38. se mezcle con el pie
  39. */
  40. .clear{
  41.     clear: both;
  42.     padding-top: 2em;
  43. }
  44. </head>
  45.  
  46. <div id="contenedor">
  47.     <div id="cabecera">
  48.         <span class="ejemplo">Cabecera</span>
  49.     </div>
  50.  
  51.     <div id="contenido">
  52.         <span class="ejemplo">Contenido</span>
  53.         <p>
  54.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  55.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  56.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  57.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  58.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  59.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  60.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  61.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  62.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  63.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  64.         </p>
  65.         <p>
  66.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  67.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  68.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  69.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  70.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  71.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  72.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  73.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  74.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  75.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  76.         </p>
  77.         <p>
  78.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  79.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  80.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  81.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  82.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  83.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  84.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  85.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  86.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  87.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  88.         </p>
  89.         <p>
  90.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
  91.             diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
  92.             erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
  93.             ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  94.             Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
  95.             molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
  96.             eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
  97.             zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
  98.             dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  99.             euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  100.         </p>
  101.     </div>
  102.     <div class="clear"></div>
  103. </div>
  104.  
  105. <div id="pie">
  106.     <span class="ejemplo">Pie</span>
  107. </div>
  108.  
  109. </body>
  110. </html>
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Última edición por abimaelrc; 27/09/2010 a las 14:26
  #12 (permalink)  
Antiguo 27/09/2010, 14:35
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Mikmoros e IE

Soy un negao tio!

Gracias por toda la ayuda, todo el código y el tiempo! Parece que me funciona (TE funciona =P)

Ahora voy a darme de ostias a ver porque cuando agrego un <UL> me sale la barra de scroll xD

Muchas gracias de nuevo!
__________________
Cool Village
@Wakkos
  #13 (permalink)  
Antiguo 27/09/2010, 14:44
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: Mikmoros e IE

Si quieres agrega algo como
Código CSS:
Ver original
  1. *{margin: 0; padding: 0;}
Al principio del style.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Etiquetas: Ninguno
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 02:46.