• Mettre une image fixe dans l'écran

    1- Tu as déjà une image dans ton ordinateur.

        Sinon, tu enregistres dans ton ordinateur une image trouvée sur le net .

     

    2- Dans un nouvel article,

    • tu télécharges ton image depuis ton ordinateur ( tu peux à ce moment là redimensionner l'image ).

    Mettre une image fixe dans l'écran

    • tu récupères ( copier) l'adresse url de ton image.

    3- Toujours dans l'éditeur d'article, tu cliques sur l'icone 'html' ( éditeur en mode normal: icone après la palette de peintre)
         Tu te trouves alors dans l'éditeur de code source html et  tu vas voir le code html qui permet d'afficher ton image dans l'article.

    • Tu crées un nouveau module simple, tu y envoies ton image en demandant de la centrer ( tu peux aussi la redimensionner).
    • Tu cliques sur icone html de l'éditeur de module pour aller dans l'éditeur de source html  et
      • tu vas voir du code :  un truc comme cela, qui commence par <p ..............><img src="adresse/url de l'image"></p>

      Pour l'image ci-dessus, ça donne cela:

     <p style="text-align: center;"><img src="http://ekladata.com/taK83UIcT77gaRFEFTAYVWjabe4.gif" alt="imageloulouman" /></p>

    • Dans les premiers crochets, c'est le style et c'est là qui tu peux indiquer que tu veux que ton image s'affiche, non pas dans l'article le module du menu , mais en position fixe et à un endroit bien défini sur l'écran.

              Par exemple, si tu mets


              <p style="text-align: center; position: fixed; top: 10px; right: 10%;">

               l'image va aller se "fixer" à 10px du haut de l'écran et à 10% du bord droit de l'écran.


               A toi de jouer sur ces valeurs pour obtenir l'emplacement que tu désires.

     

    4- Donc au final, dans ton éditeur html de module , tu dois avoir avec tes propres valeurs,

    <p style="text-align: center; position: fixed; top: XXpx; right: XX%; "><img src="http://ekladata.com/taK83UIcT77gaRFEFTAYVWjabe4.gif" alt="image loulouman" /></p>

     

    5- tu cliques sur "mettre à jour", la fenêtre " éditeur source html" se ferme et tu  cliques sur "enregistrer"  de l'éditeur de     module.                
         Normalement l'image ne devrait plus apparaitre dans l'article le module mais fixée sur l'écran.

     

    6- tu peux laisser ton article en non publié, hors ligne, je crois que ça marche quand même. ( bin, non !)
    Pour ne pas voir le module vide dans ton menu de coté, faut trouver le numéro de ton module et
     mettre dans le CSS:

    #module_menuXXXXXXXXX
    {display:none;}

    ( je t'explique plus tard comment trouver le numéro du module ou regarde cet article "examiner le code et retrouver numéro module menu",
    en attendant mets par exemple simplement, comme titre au module, un petit signe/caractère, du style ¤,  on ne verra que ça  dans ton menu où se trouve le module et ce sera donc très discret...)

     

    « Afficher un fil d'actualités de webpresse ou autre blogFormulaire d'envoi courriel dans boite mail auteur »
    Partager via Gmail Yahoo! Google Bookmarks

  • Commentaires

    1
    Dimanche 29 Septembre 2013 à 13:39

    sa ne marche pas, je fait tout mais sa reste un article.

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    2
    Dimanche 29 Septembre 2013 à 18:30

    C'est normal que ça reste un article ! Ce qu'il faudrait, c'est que l'image que tu as mis dans l'article n'apparaisse plus dans l'article ( du coup article vide d'image) mais en dehors de l'article , et fixée à l'endroit indiqué avec les valeurs par rapport au bord d'en haut et au bord de droite du blog...

    Mais en fait faut que l'article soit publié et ça ne marche que sur la page où se trouve l'article donc je vais modifier mon article d'explication

    Faut faire grosso modo la même chose mais dans un module simple car le module d'un menu latéral est présent sur toutes les pages ( même si on ajoute un peu de CSS pour ne pas voir le titre de celui avec l'image  ...)



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl