Mikmoros e IE

Wakkos · #1 (**permalink**) 26/09/2010, 14:45

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!

abimaelrc · #2 (**permalink**) 26/09/2010, 16:48

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.

Wakkos · #3 (**permalink**) 26/09/2010, 17:03

Mi problema es el alineado abajo y al centro más que nada. Pero voy a darles vueltas a esos a ver que traen.

abimaelrc · #4 (**permalink**) 26/09/2010, 17:12

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.

Wakkos · #5 (**permalink**) 26/09/2010, 17:17

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

abimaelrc · #6 (**permalink**) 26/09/2010, 19:58

Mira un ejemplo, para que tengas más claro, tomado de araudi.net pero modificado.

Código HTML:

Ver original<!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" xml:lang="es" lang="es-es"> 
<head> 
<title>Centrado vertical 3 - Recursos CSS - araudi.net</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#content{
    position: relative;
    display: table;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
.alignCenter {
    display: table-cell;
    vertical-align: middle;
    *position: absolute;
    *top: 30%;
}
</style> 
</head> 
<body> 
 
<div id="content">
    <div class="alignCenter"> 
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur 
            ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
            Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate 
            eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
            felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper 
            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
            eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 
            Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. 
            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
        </p>
        <p>
            Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, 
            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, 
            hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut 
            libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. 
            Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, 
            leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. 
            Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, 
            nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit 
            fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
            cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.
        </p>
    </div> 
</div> 
 
</body> 
</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.

Wakkos · #7 (**permalink**) 27/09/2010, 01:33

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

Voy aprobar con ese code a alinearlo abajo.

Wakkos · #8 (**permalink**) 27/09/2010, 01:42

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

Voy a intentarlo con algo como FooterStick

abimaelrc · #9 (**permalink**) 27/09/2010, 07:24

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

Wakkos · #10 (**permalink**) 27/09/2010, 12:10

claro pero ese margin-top me lo puede alinear abajo independiente de la resolución?

abimaelrc · #11 (**permalink**) 27/09/2010, 13:07

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<!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" xml:lang="es" lang="es-es">
<head>
<title>Pie siempre abajo - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
}
#contenedor {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#cabecera{
    height: 4em;
    background-color: #399;
    color: #fff;
    text-align: center;
}
#contenido {padding: 1em;}
#pie{
    text-align: center;
    background-color: #366;
    color: #fff;
    height: 3em;
    margin-top: -3em;
}
.ejemplo{
    position:relative;
    top: 0.5em;
    font-size: 1.2em;
}
 
/*
Este (clear) es importante para que el contenido no 
se mezcle con el pie
*/
.clear{
    clear: both;
    padding-top: 2em;
}
</style>
</head>
<body>
 
<div id="contenedor">
    <div id="cabecera">
        <span class="ejemplo">Cabecera</span>
    </div>
 
    <div id="contenido">
        <span class="ejemplo">Contenido</span>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
            erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
            erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
            erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
            diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
            erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
            eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
            zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
            dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
            euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </p>
    </div>
    <div class="clear"></div>
</div>
 
<div id="pie"> 
    <span class="ejemplo">Pie</span> 
</div>
 
</body> 
</html>

Wakkos · #12 (**permalink**) 27/09/2010, 13:35

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!

abimaelrc · #13 (**permalink**) 27/09/2010, 13:44

Si quieres agrega algo como

Código CSS:

Ver original*{margin: 0; padding: 0;}

Al principio del style.