Imagen en esquina del navegador

Citar

Escrito el 09 Nov 2006 12:42 pm

Buenas, estoy intentando colocar una imagen fija en el borde inferior derecho de mi navegador y que se quede fijo mientras se hace scroll, el caso es que en firefox perfect pero en ie no lo consigo, se me posiciona pero hace scroll junto a la pagina, cosa que no quiero que me haga.

Como puedo solucionar esto, he buscado por internet y el css que tengo es exacto pero no me funiona no se si es que me falta algo, me he comido algo o que es...

GRACIAS por vuestra paciencia y ayuda.

Adjunto mi CSS

Código :

#superpie{
   position:absolute;
   bottom:0px;
   right:0px;
}

body > div#superpie{
   position: fixed;
}

y esta es la capa sobre la que quiero aplicar el estilo

Código :

<div id="superpie" style="text-align:right">
   <a href="#"><img src="img/nvd2006.gif" class="image" title="Un Juguete Una Sonrisa" /></a> 
</div>

Por hawkweb

10 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 09 Nov 2006 02:40 pm

Hace tiempo encontré una página web que conseguía eso.
Y por fortuna guardé el código fuente (ya que cambiaron el diseño).

La cos iba así:

CSS

Código :

#navcontainer {
   margin: 0;
   padding: 0;
   height: 319px;
   width: 190px;
   position:absolute;
   display:inline;
   top: 150px;
   margin-right:20px;
   left:0;
   float:left;
}
#navcontainer ul li {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: block;
}
#navcontainer #navlist {
   padding: 0;
   margin: 0;
   float:left;
}
@media screen {
   div#navcontainer {position: fixed;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto;height: 100%;padding: 0;}
   * html div#navcontainer {position: absolute;}
}
#contenedor {
   margin: 0;
   padding: 0;
   display:block;
   height: auto;
   width: 810px;
}
#contenido {
   float:right;
   width: 600px;
   height:auto;
   margin:0;
   padding:0;
}

XHTML

Código :

<body>
<div id="contenedor">
<div id="navcontainer">
<ul id="navlist">
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
  <li><a href=" " target="_self">Opci&oacute;n</a></li>
</ul>

</div>
<div id="contenido">
<table width="100" height="1479" border="3" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>

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

</div>
</div></body>

(la tabla es para probar el scroll)

Lo que pasa es que el fixed sólo funciona en IE6 con la lista, si no no va.

Si alguien sabe como ba el hack que lo explique (y si no va avisad, que me habré equivocado)

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 09 Nov 2006 07:01 pm

Código :

body {
background:url(avatarPNG.png) no-repeat fixed bottom right;   
}

Por Sr. QUHO

SWAT Team

1643 de clabLevel

5 tutoriales
1 articulo

SWAT

Envíale un mensaje privado Email

Citar

Escrito el 11 Nov 2006 04:51 pm

Hola pues haciendo alguna prueba, del codigo que me has pasado he utilizado solor:

Código :

@media screen {
   div#navcontainer {position: fixed;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto;height: 100%;padding: 0;}
   * html div#navcontainer {position: absolute;}
}

y ya fundiona, pero la imagen se me monta por encima de la barra de scroll en ie y deja un pequeño borde por abajo que no se como resolver...

GRACIAS

Por hawkweb

10 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 14 Nov 2006 11:29 am

Hola, pues ya lo he solucionado el temilla este de la imagencilla, asi que voy a dejar el codigo por si alguien lo necesita.
Un saludo.

CSS

Código :

#superpie{
   position: absolute;
   bottom: -5px;
   right: 17px;
}
@media screen {
   div#superficie {position: fixed; bottom: 0px; right: 0px;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto; height: 100%;padding: 0;}
   * html div#superficie {position: absolute;}
}
body > div#superpie{
   position: fixed;
   bottom:0px;
   right:0px;
}

HTML

Código :

<div id="superpie" style="text-align:right">
   <a href="#"><img src="imagen" class="image" title="xxxx xxxx" alt="xxxx xxx"/></a> 
</div>

Por hawkweb

10 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 15 Nov 2006 05:19 am

Sr. QUHO escribió:

Código :

body {
background:url(avatarPNG.png) no-repeat fixed bottom right;   
}

hasle caso al Sr. QUHO ese codigo me parece harto mas coherente que el otro mira que Sr. QUHO tiene experiencia en esto

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino Desarrollador de GAIA

Envíale un mensaje privado

Programador y fotógrafo

@inyaka

Citar

Escrito el 15 Nov 2006 11:44 am

Si no es que no quiera hacerle caso... pero es que ese codigo no me soluciona lo que yo he planteado, ya que ahí posicionamos la imagen pero en el fondo de la pagina no sobre el contenido de la pagina en cuestion con lo que la imagen debería ser de unas dimensiones muy cortitas para que no se pise con el contenido de la misma y en el peor de los casos que alguien accediera con resoluciones menores a 1024 (cosa rara ya.. pero bueno de todo hay en la villa del señor...) pues se le quedaría por detras... ademas de la forma que lo pongo podemos crearle un enlace a lo que sea, una pagina etc....

Saludos!!!

Por hawkweb

10 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Imagen en esquina del navegador

Escribe una respuesta rapida