Tengo una fila de iconos que deben estar en la parte inferior de la página, que también necesitan ser corregidos. Sencillo, ¿verdad? No. Cuando la posición fija, los iconos de caer en uno a otro tan sólo un icono muestra. Así que ahí va eso, pero ahí va también la oportunidad de colocarlos en la parte inferior de la página ya que la necesito

#icons {
position:fixed;
bottom:0;
}

Siempre se podía colocar manualmente, pero esto significa que no puede ser fijado como necesito demasiado, y yo tendría que declarar para diferentes navegadores. Ayuda?

Enlace a la web: Roseannebarr.tumblr.com

He aquí un ejemplo de mi HTML

<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">

{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>
InformationsquelleAutor Earl Larson | 2011-01-01

2 Comentarios

  1. 4

    Posición fija es lo que se dice, ‘fijo’, y se utiliza la misma posición para todas ellas.

    La mejor manera es no utilizar la posición de:fija en #exterior, en lugar de tratar con display:inline; y mejor aún, veo que están dentro de #titular, uso fijo en #titular y modificar #descripción por lo que puede ser mostrado anteriormente porque es lo que está mostrando el contenido.

    Por ejemplo:

    #holder{
    bottom: 0px;
    left: -382.5px;
    margin: 0px auto 0px 50%;
    margin-left: 50%;
    position: fixed;
    width: 765px;}
    
    #tooltip{
    background: #6CB4E2;
    border-top: 30px solid white;
    display: none;
    left: 50%;
    margin-left: -382px;
    padding: 10px;
    position: absolute;
    bottom: 51px;
    width: 745px;}
    
    #outer {
    background: #6CB4E2;
    bottom: 0px;
    display: inline;
    float: left;
    margin-top: -8px;}
    • Esto…. Eres increíble! Por qué no pueden todos ser como usted? Todos los demás sólo se queja y se burla de mí cuando no se pueden averiguar la respuesta, pero en lugar de que usted acaba de descubrirlo! Yo sabía que no podía ser muy difícil. Gracias!
    • Tengo que dejar otro comentario. Esto es demasiado bueno. Estoy tan increíblemente feliz. Por fin puedo llegar a la materia de la diversión! Gracias!!!!
  2. 3

    Envolvía sus iconos en un div como este:

    <div id="myicons_container">
        <img src="icon1.gif">
        <img src="icon2.gif">
        <img src="icon3.gif">
        <img src="icon4.gif">
        <img src="icon5.gif">
    </div>
    
    <style type="text/css" media="screen">
        #myicons_container {
            position: fixed;
            bottom: 0;
        }
    </style>

    Editar : Por tu comentario, me permito sugerir a re-escribir el código para recoger los iconos en un elemento contenedor. Pero, usted puede conseguir lejos con esto (no lo he probado en el navegador):

    <style type="text/css" media="screen">
        .block {
            width: 50px;
            height: 50px;
            float: left;
            position: fixed;
            bottom: 0;
        }
    </style>

    Nota: usted tiene que dar flotando elementos de una anchura y altura.

    Una otra nota, en su código, usted tendrá varios elementos con el mismo ID de atributo. Este es un no-no. Usted tendrá que cambiar a una clase de como lo he hecho en el CSS anterior.

    • 🙁 Estoy totalmente de hacer que excepto los iconos son lo pop de los puestos de arriba, y la forma en que escribí mi código es que cada icono es una especie de «conectado» para cada uno de los post del html.
    • Actualizado el post original
    • He actualizado mi post para intentar algo diferente. Nota, no es lo ideal y puede que no funcione en todos los navegadores. Pero es la primera cosa que la parte superior de mi cabeza.
    • A ver, esto funciona, pero los iconos a caer en un icono. He usado el código, ir a la página web y ver.
    • Se olvidó de guardar, si no se podía ver a hacerlo de nuevo. Va a estar allí.
    • Por alguna razón no funciona en IE < 9 pero de nuevo, es decir siempre tiene problemas de visualización de contenidos.

Dejar respuesta

Please enter your comment!
Please enter your name here