Fijar un elemento en horizontal. LEFT y RIGHT con 50%. | Oloblogger Cuando usamos FIXED para mantener siempre visible un elemento aún haciendo scroll, tenemos que indi...

12 de febrero de 2010

Fijar un elemento en horizontal. LEFT y RIGHT con 50%.

Cuando usamos FIXED para mantener siempre visible un elemento aún haciendo scroll, tenemos que indicar una distancia al borde superior (o inferior) de la ventana y lo mismo con respecto al borde izquierdo (o derecho). Normalmente lo hacemos con valores absolutos (px, em...) y esto provoca que al hacer la ventana del navegador más grande o más pequeña, o simplemente con el uso de una pantalla con distinto ancho, el elemento no se muestre dónde queríamos en un principio.

Los que tengais la flecha Ir arriba construida de esta manera, podeis hacer una prueba cambiando el ancho de vuestra ventana. Este es el código tipo con el que ocurre esto y el siguiente es con el que se ha construido el DIV con fondo rojo que podeis ver arriba a la derecha. Con él también podeis comprobar lo que comentábamos antes:
Este DIV se "mueve a la izquierda según vayamos haciendo más pequeña la ventana de nuestro navegador, mientras que la flecha negra de abajo no.

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position: fixed; bottom: 10px; right: 10px;" /></a>

<div style="position: fixed; top: 10px; right: 200px;background:#990000;text-align:center;font-size:9px;color:#ffffff;width:150px;padding:10px;border:1px solid black;" >TEXTO&let;/div>


Con el primer código, la imagen estará SIEMPRE a 10px del borde derecho de la ventana y con el segundo, el DIV SIEMPRE estará a 200px. Con el TOP no tenemos este inconveniente porque el borde superior siempre está en el mismo sitio: arriba (perogrullada necesaria).

Para solucionar este desplazamiento horizontal, podemos utilizar un sencillo truco que consiste en cambiar la posición horizontal absoluta (LEFT, RIGHT), por un valor en porcentaje y, en concreto, por el valor 50%. Esto hace que el elemento se situe hacia la mitad de la página en cualquier resolución. Una vez allí, sólo tenemos que aplicar un margen a derecha o a izquierda, según el caso, y con ello conseguimos desplazarlo del centro hasta donde nos convenga. Tomar como referencia el centro es la clave para que no se nos "mueva" el DIV.

La flecha que ahora mismo hay en la parte inferior derecha está construida con este sistema. Quizás sea más fácil entender la diferencia, observando el comportamiento del DIV rojo y de la flecha, al ir estrechando poco a poco la ventana de vuestro navegador.

<a href="#"><img src="URLdeTUimagen" title="Ir al principio" style="position:fixed; bottom:0px; left:50%;margin-left:410px;" /></a>


Cosas a tener en cuenta...


En el gráfico podeis observar a modo de resumen el comportamiento de diversas combinaciones LEFT/RIGHT, MARGIN-LEFT/MARGIN-RIGHT.

Con LEFT:50% y sin margen, el vértice superior izquierdo del DIV se sitúa a partir de la mitad de la ventana. Sin embargo, el mismo caso con RIGHT:50% lo que hace es posicionar la esquina superior derecha en el centro.

En los cuadros claros de la segunda fila, utilizamos LEFT:50% con un MARGIN-LEFT:120PX y efectivamente, el intérprete nos deja ese margen por la izquierda, contando desde el centro. En este caso, un MARGIN-RIGHT no producirá ningún desplazamiento. Si partimos de un RIGHT:50%, el resultado será justo al contrario.

El cuadro claro que se encuentra en último lugar, refleja la posición que adoptaría un elemento posicionado con LEFT:50% y con un MARGIN-LEFT negativo. Este es un efecto bastante interesante para según qué cosas...

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. oloman que varible tiene? positon: fixed
    algo como position: XXXXX

    ResponderEliminar
  2. Me ha venido bien para hacer unos arreglos en mi blog: www.tutoshector.blogspot.com

    ResponderEliminar
  3. Muy interesante y tomo nota para cuando me resulte útil, al igual que he hecho ya con otras entradas. Sigo construyendo mi blog con tus artículos, ¡gracias!

    SALUDOS DESDE LA LUNA

    ResponderEliminar
  4. Mexotopo no entiendo la pregunta.

    Héctor y Goffry, se os corresponde al saludo. Gracias.

    ResponderEliminar
  5. Este post me viene muy bien, ya casí termino el nuevo blog.

    ¿Qué te parece? te gusta el "dinamismo" y el recorrido que hace Mario? jaja.

    Chequealo y despues me cuentas. =D

    http://incojerencias.blogspot.com/

    Y una última pregunta, así como con el DIV, se puede hacer eso con un Menú?, porque quiero un Menú así. o al menos ponerlo donde quiera, porque esta muy limitado su espacio.

    ResponderEliminar
  6. Qué tal si pruebas a quitar el Mario que forma parte de la cabecera y a subir a su posición el otro. Así se vera sólo uno bajando.

    ResponderEliminar
  7. Gracias por el conesejo, lo iré probando en estos días. Por ahora estoy con el icono de feeds y demás, para ponerlos a un costado, en la sidebar, pero todavía no encontre específicamente como poner las imagenes para linkearlas. no sé bien que código tengo que poner.

    Saludos

    ResponderEliminar
  8. ah, una posdata:

    no es Mario, sino que se llama "Hilario" :D

    y lo que te quería decir antes era que los tres logos están en tres gadgets, porque no se como ponerlos en un solo gadget con tres links distintos. Probé muchas variantes pero con malos resultados =(

    ResponderEliminar
  9. Amigo Oloman,

    Ya nos conocemos por bastantes consultas que yo te he hecho y tú me has resuelto exitosamente. Veo que en tu blog generosamente nos enseñas trucos para instalar artilugios en el blog. Es muy interesante. También veo que, a modo de ejemplo, pones a veces unas palabras en lo que puede ser Latín, pero sin significado ninguno. Teniendo en cuenta que hoy es el día de San Valentín, y está dedicado al Amor, te envío un hermoso texto, en Latín y en Castellano, por si lo quieres utilizar para esos fines. Así se matarían dos pájaros de un tiro. Es mi contribución al sentimiento más noble que existe en el ser humano. Es una especie de Oda Grandiosa al Amor universal, que lo nutre todo.

    Aquí está el texto en Latín, con algunas modificaciones de grafía:

    Omne adeo genus in terris hominumque ferarumque
    et genus aequoreum, pecudes pictaeque uolucres,
    in furias ignemque ruunt: amor omnibus idem.
    245
    Tempore non alio catulorum oblita leaena
    saeuior errauit campis, nec funera uulgo
    tam multa informes ursi stragemque dedere
    per siluas; tum saeuus aper, tum pessima tigris;
    heu male tum Libyae solis erratur in agris.
    250
    Nonne uides ut tota tremor pertemptet equorum
    corpora, si tantum notas odor attulit auras?
    Ac neque eos iam frena uirum neque uerbera saeua,
    non scopuli rupesque cauae atque obiecta retardant
    flumina correptosque unda torquentia montis.
    255
    Ipse ruit dentesque Sabellicus exacuit sus
    et pede prosubigit terram, fricat arbore costas
    atque hinc atque illinc umeros ad uulnera durat.

    (Vergilius, Georgicon liber tertius, 242-257)

    Traducción al Castellano:

    Ciertamente los seres todos que viven en la tierra, hombres y fieras, los animales del mar, los ganados y aves de variados colores, se lanzan furiosamente hacia ese fuego: el amor es el mismo para todos. En ninguna otra ocasión la leona, olvidada de sus cachorros, anduvo errante más furiosa por los campos, ni los deformes osos causaron por doquier tantas muertes y matanzas en las selvas; entonces es el jabalí feroz, entonces el tigre más cruel que nunca. ¡Ay! Con qué peligro entonces se camina por las llanuras solitarias de la Libia. ¿No ves acaso cómo un temblor conmueve el cuerpo entero de los caballos si tan sólo el olor les trajo los efluvios conocidos? Y por eso, ni el hombre con los frenos ni con el látigo cruel, ni los peñascos y barranqueras, ni los ríos que se oponen a su paso los detienen, aunque arrastren con sus aguas montañas descuajadas. El mismo jabalí sabélico se lanza y aguza sus colmillos y escarba con los pies la tierra, se rasca las costillas contra un árbol y endurece sus espaldas para las heridas por uno y otro lado (Virgilio, Geórgicas, Libro III, 242-257).

    (Traducción de Tomás de la Ascensión Recio García y Arturo Soler Ruiz, BIBLIOTECA CLÁSICA GREDOS, 141, EDITORIAL GREDOS, MADRID, 1990)


    Te envío un cordial saludo,

    Antonio Martín Ortiz
    Catedrático de Latín

    ResponderEliminar
  10. Arriba del parquet, ya he visto que has atendido mi sugerencia sobre Hilario :D.

    Con respecto a lo de los enlaces de los iconos, simplemente crea un enlace con imagen para cada uno. Para poner los tres en el mismo gadget, sólo tienes que redactar uno a continuación del otro.

    Se trata de que hagas los otros dos exactamente igual a cómo has hecho el del feed, salvo por la dirección que es lo único que debe cambiar de uno a otro.

    ResponderEliminar
  11. Gracias por tu regalo Antonio. Sabes que mi especialidad no son las letras, pero aunque sea un tópico, reconozco la intención porque seguro que lo has hecho con la mejor de ellas.

    Por otra parte, supongo que tu preámbulo se refiere al texto "Lorem ipsum dolor sit amet,..." y sobre eso, quería comentarte que el hecho de que no tenga significado es precisamente su razón de ser.

    Ese texto se usa habitualmente para demostraciones tipográficas y para ejemplos de diseño, precisamente por ser ininteligible para la mayor parte de los mortales. Así el texto no distrae la vista y permite observar mejor la estructura del documento. Incluso han pensado en gente como tú, porque ni siquiera sabiendo latín, las frases tienen sentido, ya que en muchos casos las palabras latinas originales están truncadas.

    En este enlace puedes ver algo más sobre el tema.

    Y repito... ¡gracias!.

    ResponderEliminar
  12. Hola Oloman.

    Solo dejar un comentario.
    En el código en lugar de “bottom” que nos deja el limite en la parte inferior,
    probar a poner “top” que nos deja el límite en la parte superior.

    Esto es para visualizar a la misma altura algo que coloquemos aunque sean diferentes pantallas, si queremos que parezca que queden suspendidas de la parte superior,
    Aquí hay un ejemplo de unas zapatillas colgando.

    http://dekarlatissa.blogspot.com/

    Un saludo afectuoso.
    cocodrolo

    ResponderEliminar
  13. Perdona, he vuelto a leerlo y ya lo tienes puesto, lo siento.

    ResponderEliminar
  14. Seguramente no de manera tan expresa como tú :D

    Ya veo que has cambiado bastante la idea que inicialmente llevabas para el blog. Incluso después de solucionarlo, has desestimado lo del chat flotante ;)

    ResponderEliminar
  15. Increible!!!!!!!!!!!!!!!! me salvaron la vida..era lo que buscaba!!!

    ResponderEliminar
  16. Anónimo4/4/10 23:11

    Hola Oloman mira Quiero posicionar un Objeto (Marcador social) en la plantilla para ser mas especifico, en la superior derecha, como haria para posicionarlo?

    ResponderEliminar
  17. Busca "position" en el buscador interno y te aparecerán varios post sobre el tema. Hay una colección de tres que creo que lo explica con bastante detalle.

    ResponderEliminar
  18. Hola Oloman

    Muchas gracias por tu aporte me fue muy útil. Un millón de saludos desde Colombia :)

    ResponderEliminar
  19. Hola Oloman aprovecho este post que es algo parecido a mi duda. Te sigo ya hace tiempo y no quería dejar la oportunidad de preguntarte y/o sugerirte sobre si podrías escribir algún artículo de como fijar un widget en la sidebar del blog a medida que haces scroll, de modo que el último widget de la sidebar quede estático.

    Por más que he buscado no encuentro nada que me solucione el problema ya que creo que he de poner position: fixed en el CSS del widget, pero mi problema viene en que no soy capaz de encontrar la propiedad ID dentro del Css.


    Gracias

    ResponderEliminar
    Respuestas
    1. Puedes fijar "un algo" de la misma manera que yo lo hice con esa caja roja con texto que ves arriba a la izquierda, pero si lo que quieres es que haya "varios algos" y que uno de ellos permanezca fijo a partir de cierta altura cuando se hace scroll, eso sólo se puede hacer hoy por hoy con JavaScript.

      Hay algunas utilidades jQuery que hacen ese efecto y te va a resultar más rápido buscar alguna que esperar a que yo tenga tiempo de explicar una ;)

      Eliminar