Uso de posiciones relativas en vez de absolutas en la wiki!

  • Hola! Bienvenid@ a esta pequeña explicación de por que debes usar posiciones relativas en la wiki en vez de posiciones absolutas!!


    Cuando creamos una plantilla en la wiki, a todos nos gusta que se vea bonita!
    Pero.. un detalle muy importante a tener en cuenta es que no eres el único que va a añadir cosas, si no que los demás también! Por ello es importante que cuando diseñes algo, hazlo pensando en futuros cambios!


    Por ello, cuando creamos algo como una imagen que esta en una posición, tenemos que pensar que esta imagen quizás no este en esa posición siempre!


    Un ejemplo de una situación real es como están puestas las imágenes ahora de por ejemplo los collares sobre el inventario! Así que por que no lo analizamos y enredemos el problema, para encontrar una solución?!


    Ahora mismo se usa la siguiente linea de codigo

    Code
    1. {{Añadir Collar|collar=Collar de madera.png}}


    Para añadir la imagen del collar de madera sobre la imagen del inventario, que es esta:



    El problema esta en que esta imagen es parte de una plantilla, mientras que la linea que hemos visto antes es una parte individual, vamos a analizarlas en mas detalle!


    La linea de "Añadir collar" llama a una plantilla que tiene el siguiente código:



    Code
    1. {|
    2. |-
    3. | width="32" height="32" style="position: absolute; top:243px; left:165px; z-index:1;" | [[File:{{{collar}}}]]
    4. |}

    Y esto es una locura!! Por que independientemente de que la imagen del inventario exista o no, o este en una posición o en otra, nuestra "collar" siempre ira a la misma posicion de la pagina! y eso no nos interesa.. con el mas mínimo cambio en la pagina se vera horrible y fuera de posición!!


    Y se que ahora estarás pensando.. vale.. pero si no le digo que tiene que estar en una posición especifica, como le digo donde tiene que estar?! Y te diré.. que el problema no esta en poner el collar en un sitio u otro de la pantalla, si no en separarlo de la imagen con la que va relacionado!!


    Debes entender que para que de igual donde coloques las imágenes, siempre se vean bien, primero tienes que relacionarlas de alguna forma! y esto lo haremos de la siguiente forma, en vez de crear una imagen y otra separada, creamos una sola!



    Code
    1. {|
    2. |-
    3. | valign="top" | [[File:Inventario.png|link=]]
    4. | width="32" height="32" style="position: relative; top:-10px; left:-95px; z-index:1;"|[[File:{{{collar}}}]]
    5. | }


    Y en esta imagen en vez de una posición absoluta, creamos una relativa! Relativa a que? pues a su propia posición! que es justo al lado de la imagen del inventario!


    haciendo esto nos aseguramos que da igual donde este el inventario, la imagen siempre estará correcta!