• Header non cliquable

    Salut!

    Ceci est une petite astuce pour ceux qui ont un RPG, un jeu interactif ou qui veulent tout simplement que leur header ne contienne pas de lien vers leur accueil.
    Il faut que votre header aie une dimension fixe sinon il risque d'être cliquable sur une partie. (en gros la largeur de page en % rend cette astuce un peu naze).

    Vous aurez besoin:

    • d'une interface d'édition permettant l'ajout de CSS
    • d'une image .png transparente un peu plus grande que votre header (10-15px max en tout pour une pitite marge de sécurité :3)

    Voici l'URL de la mienne: "http://ekladata.com/YslN7-QeoET1CcRKLiBLWoP_v28.png"
    Elle fait 1090px de large et 297px de haut à la base. Vous pouvez modifier les dimensions en ajoutant @XxY avant .png; où X est la largeur et Y est la hauteur de l'image.

    • d'un module simple dans un menu
    • de cette ligne de code HTML:

    <div id="ID">

    Vous pouvez mettre ce que vous voulez à la place de ID, c'est l'identifiant qui permettra d'appeler votre image transparente via CSS.

    Ouvrez un nouveau module simple: votre image transparente doit être le seul contenu du module.
    Puis, insérez-y votre image transparente (n'hésitez pas à prendre celle que je vous donne plus haut).

    Ensuite, copiez-collez ce code CSS dans la partie "Ajouter du CSS" de votre interface d'édition de thème:

    #background {margin: auto} /*pour que votre page, et donc votre header soient bien centrés*/

    #ID {position: absolute; /*permet de mettre l'élément par-dessus tous les autres*/
    top: 0px; /*colle l'élément tout en haut de la page, sans marge*/
    margin: auto; /*centre l'image sur le header*/}

    ID est l'identifiant par lequel vous avez nommé l'élément plus haut en HTML.
    Bien sûr, il faut modifier les coordonnées de position pour que l'image soit sur votre header et pas à côté, prenez en compte vos marges, vos positions si elles sont déjà fixées...

     Voilà, c'est fait ^^ cette astuce est basée sur cette qui consiste à mettre un autre lien sur le header, ici, votre image ne contient simplement aucun lien. Il est aussi possible de ne mettre l'image que sur une partie du header, bref, vous êtes libres de faire ce que vous voulez!

    J'espère que cet article aura servi à quelque chose :3


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :