• [CSS] Déplacer un élément dans l'en-tête du blog

    Lorsqu'on souhaite déplacer un élément à un endroit précis de la page, on utilise du code CSS pour passer l'élément en position absolue :

    Par exemple pour déplacer le module de menu Newsletter  :

    .module_menu_type_newsletter {
        position:absolute;left:800px;top:10px;
    }

    On ajuste les propriétés left et top pour déplacer le menu.
    On peut également utiliser width et height pour la largeur et la hauteur.

    Pour retirer le titre de ce module on ajoutera :

    .module_menu_type_newsletter .module_menu_titre {
        display:none;
    }

    Mais on se rend alors compte que le module ne conserve pas sa place.
    Il est positionné différemment en fonction de l'écran du PC, du zoom de la page...
    En fait il est fixe par rapport à la page, mais le contenu du blog n'a pas la même place sur la page (il est centrée et donc pas à la même place en fonction de la taille de l'écran).

    Pour éviter cela ajoutez le code CSS suivant :

    #background {position:relative;}

    Il faut ensuite repositionner correctement en modifiant les valeurs left et top car les valeurs sont maintenant relatives au fond du blog.

    En effet le positionnement absolu se fait par rapport au premier parent qui n'est pas positionné de manière static (c'est le positionnement par défaut) ; c'est à dire le corps de la page dans le cas d'un blog car aucun élément structurant n'a de positionnement particulier.

    En forçant le positionnement relatif pour le fond (#background), on positionne alors les éléments par rapport à ce fond au lieu de positionner par rapport à la page.
    Ainsi, les éléments repositionnés en absolute « suivent » le contenu du blog.

    « [SCRIPT] Insérer un compte à rebours sur le blog[CSS] Retirer un visiteur de la liste des derniers visiteurs »

  • Commentaires

    1
    Mardi 8 Juillet 2014 à 19:21

    Merci!!! j'ai cherché la solution pendant des heures (fixer le module) merci encore!

    2
    Samedi 23 Janvier 2016 à 14:48

    Merci ! :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :