El logo en la esquina de abajo a la derecha.. siempre

Hey, un amigo me hizo una pregunta sobre CSS que no le pude responder, el decidio hacer el truco con javascript pero igual quisiera saber como lograrlo.

El queria tener el logo de su empresa siempre en la esquina derecha de abajo de la pagina, o mejor, del navegador. Sin importar el scroll. Esto seria muy facil de lograr por medio de un background-image en el body, y con atributo fixed... verdad?

pero este metodo tiene dos inconvenientes, uno, no es clickeable (caracteristica fundamental) y dos, el esta incluyendo el logo en sus paginas de la forma:

Código :

<? require_once("includes/logo_eterno.html"); ?>

lo que no le permite crear un atributo CSS.

Yo le sugeri usar algo asi:

Código :

<div style="position: absolute;   right: 5px; float:right; bottom: 10px; visibility: visible; z-index:1"><a href="http://www.gathacol.net"><img src="/logoeterno.png" width="35" height="35" border="0" alt="" /></a></div>

Y esto se aproxima, pero tan pronto uno hace scroll en la pagina, el logo sube y se pierde.

De que otra forma se podria lograr esto, pues seguro que con CSS se puede o no?

esto se logra con position:fixed a traves de css, el tema es que ie no tiene soporte para esto.

aqui un ejemplo que encontre por google de como hacer que funcione para ie tambien con un script

si le das position: absolute, ya de nada sirve el float. Quitalo.

la solucion de gparis es muy buena y se suele usar bastante, el problema que tiene es que la div "tiembla" cuando haces scroll. No sé si fixed tiene soporte ya para IE 7, pero sería conveniente que lo mirases para modificarlo.
Saludos.

en el html... una condicional para ie6... ie7 si soporta position:fixed

Código :

<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->

En el css para ie6

Código :

@media screen
  {
  * html
    {
    overflow-y: hidden;
    }
  * html body
    {
    height: 100%;
    overflow: auto;
    }
  }

Y en mi caso...

Código :

#sidebar
{
   position:absolute;
   top: 0;
   left:30px;
   margin:0;
   padding:0;
   height: auto;
}

Obiamente, es para ie6 y funciona sin javascript... lo del temblor es en el ie5... y si alguién sabe como hacer que deje de temblar.. se los agradezco.

JOS, déjame ponerte una pequeña pega, pero es para no liar demasiado...
con el condicional que tu has puesto, la condicion se cumple exclusivamente en la versión 6 de IE, pero es necesario que se cumpla también en las inferores al 6, por tanto debería ser así:

Código :

<!--[if lte IE 6]>
/**** TODO EL CODIGO QUE QUIERAS****/
<![endif]-->

Mucho ojo con el "lte" !!!

Más información en diseñorama.

Saludos

Johnny escribió:

eso es verdad... y lo que ocurre es que esa solución sólo es para ie6... no sirve para ie5.

Para ie5 es:

si lo quieres arriba... superior izquierda.

Código :

#sidebar
{
   _position:absolute; /* este */
   _top:expression(eval(document.body.scrollTop)); /* y este*/
   left:30px;
   margin-top:0px;
   padding:0;
   height: 100%;
}

si lo quieres abajo.. más exactamente en la parte inferior derecha.

Código :

{
   _position:absolute;
   bottom:0; 
   _top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight); /*este es diferente al anterior o_0 */
   left: 720px;   
}

Cabe resaltar las condicionales... yo use una condicional para cada versión, una exclusiva para ie6 y otra para ie5...
saludos

p.d. ¿Donde esta anabelle?

ah, pues en eso no me había fijado, de todas fórmas asi le damos más énfasis al asunto de las condicionas y todos aprendemos más