• Positions fixed, absolute et relative

     

    La position la + utilisée

    Position ABSOLUTE:

    Placement horizontal et vertical d'une image HORS de son contenu (module ou billet)

    Voir le chat ki marche sur mon slogan header

     

    Passons maintenant au top et bottom

    Pour une position:absolute; top: 50px;

    c'est l'espace entre le haut du blog et ton image

    *******************

    Pour une position:absolute; bottom: 50px;

    c'est l'espace entre le bas du blog et ton image

    (celui-là on en parlera sur prochain billet)

     

    Passons maintenant au margin-left

     

    margin-left:  80px;

    espace entre le bord  gauche de ta page et ton image

    "si tu as mis image dans menu de gauche"

     

    margin-left:  -80px;

    espace entre le bord  droit de ta page et ton image

    "si tu as mis image dans menu de droite , ton px est en signe négatif"

     

    Passons maintenant à la construction du code

     

     <div style="position: absolute; top: 50px; margin-left: 80px;"><img src="url image"/></div>

     

    Exercice pratique

     

    1- Copier et coller cette image dans un module

    2-Ouvrir votre code source <>

    3- Mettre le htlm de votre image entre

     

    <div style="position: absolute; top: 50px; margin-left: 80px;"><img src="url image" /> </div>

     

    4- Modifier les px selon votre positionnement d'image

     

    5- ça me ferait plaisir de voir votre exercice...

     

     

     

    Autres position: relative ou fixed

     

    Position RELATIVE:

    Placement horizontal et vertical d'une image dans son contenu (module ou billet)

    Comme vous pouvez constater, on place où l'on veut dans le billet

    même sur une image !

     

     

    Position FIXED:

    Placement horizontal et vertical d'une image HORS de son contenu (module ou billet)

    C'est ce système kon emploie pour mettre les flêches "Monter et descendre"

    Même si tu déroules ta page, les flêches restent à la même place

     

    En espérant ke mes explications sont claires
    @ Bientôt
    © LaGentilleRebelle

     

    « Du changement en ce ki concerce le menu headerEnlever la barre "cookie-info" »

  • Commentaires

    1
    Jeudi 30 Octobre 2014 à 19:59

    mdr ..............j'ai cru que tu avais fait un article sur un autre sujet ..............je ne développe pas ma pensée ...mdr -

    Blague à part, merci pour tes informations bisous Mamy Annick

    2
    Jeudi 30 Octobre 2014 à 19:59

    euhhhhh c'est du chinois pour moi lol

    3
    Jeudi 30 Octobre 2014 à 20:27

    Merci Dali, ça fonctionne, bisous!

    4
    Jeudi 30 Octobre 2014 à 21:14

    bonsoir

    très intéressant ca, je testerais. par contre excude moi de mon absence mais septembre et octobre en congés (Morbihan et Portugal) et au retour opération qui a necessité quatre jours d'hôpital mais rien de grave tout va bien.

    bonne continuation à ce blog qui nous est fort utile.

    amitié

    mimi

    5
    Jeudi 30 Octobre 2014 à 21:39

    Je reviendrai regarder ça de plus près demain. C'est très intéressant!

    Bonne soirée.

    Michel

    6
    Jeudi 30 Octobre 2014 à 23:31

    Voici ce que je voulais te dire pour le code et ça marche 

    .module_menu_type_lastvisitors{positionabsolute;
                         top520px;
                          margin-left300pxright300px;}

    Bon je vais continuer ma lecture

    7
    Vendredi 31 Octobre 2014 à 06:16

     

     

    Merci j'ai essayé sur mon blog d'essais et ça fonctionne.

    Bisous,

    Allison

    8
    Vendredi 31 Octobre 2014 à 07:42

    coucou

    suis comme Mamy Annick

    vu le titre je m'attendais à autre chose...rôôôô !!mais enfin!!

    à nos âges..redevenons sérieuses ... mdrrrr

    je vais essayer..et te dirais...

    si j'ai réussi...hummm

    bisous ma Dalila

    bon week-end

    9
    Vendredi 31 Octobre 2014 à 11:36

    coucou

    1er essai raté...suis mdrrrr

    ça m'aurait étonné!!!

    bisous

    10
    Vendredi 31 Octobre 2014 à 11:41

    Je reviendrai plus tard, je vais faire la tournée des cimetières aujourd'hui, demain il doit pleuvoir, bisous ma belle et merci.

    Bon weekend.

    11
    Vendredi 31 Octobre 2014 à 12:54

    Désolée mais quand j'ai vu le titre je me suis dite cette fois c'est le kamasutra.... Si sisi....!!!!!!

    12
    Dimanche 2 Novembre 2014 à 15:58

    Merci, ça fonctionne très bien !

    13
    Dimanche 2 Novembre 2014 à 20:25

    coucou

    bonne soirée

    bonne semaine

    ici pluie et pluie et vent..boffff boffff

    bisous bisous

    ♥♥

    14
    Lundi 3 Novembre 2014 à 12:36

    pour ma part , je vais revenir , car là ,j'ai l'impression , que je suis dans le brouillard (pourtant , il n'y en a pas ici )

    je viendrais relire ligne par ligne .................m d r

     bisous

    15
    Lundi 3 Novembre 2014 à 13:01

    coucou ma Dalila

    ça y est ici

    bonne journée

    bisous

    16
    Lundi 3 Novembre 2014 à 13:30

    merci beaucoup

    alors j'ai essayé de le changer de place

    mais oupss perdu!!j'ai refait avec ton code

    (remettre sans rien changer)

    et oupss revenu...

    je ne  touches plus...loll

    le voilà

    en plus je comprends paaaaaaas

    j'ai pris le tien en left et il c'est mis en right...hiiiiii !! halloween est passé pourtant

    le prncipal c'est que j'ai réussi

    suis ptdr!!

    <div style="position: absolute; top: 50px; margin-right: 80px;"><img src="http://ekladata.com/24Z9seU-6CHx-7mJlcrv9I70fu4.gif" alt="" /></div>

    biiiiisous

     

    17
    Lundi 3 Novembre 2014 à 13:36

    PS :suis perdue pour les positions (normal à mon âge)

    là j'ai du mal!!rôôô !!

    il y a quelque chose que je n'ai pas encore compris...

    18
    Lundi 3 Novembre 2014 à 13:42

    mais c pas normal ke le left ce change en right tout seul !!!!! mdr

    moi mon code c'est toujours avec margin-left

    ya ke le signe ki change selon si on met code dans menu droite ou gauche , c'est expliqué dans billet

    19
    Lundi 3 Novembre 2014 à 15:02

    mdrr

    mais tu sais que il n'y a jamais rien de normal avec les codes

    quand je les installes chez moi

    je te l'ai mis exprès

     

    20
    Mardi 4 Novembre 2014 à 14:01

    Coucou Dalila.

    Alors je l'ai fait, et pour aller vite

    j'ai pris les petits oiseaux gif chez toi.

    Si ça te gêne tu me le dis, je mettrai autre chose....

    Tu peux voir la modif ICI

    (petits oiseaux sur le scrap)

    Et merci beaucoup pour les astuces ♥

    Amitiés. Dani

    ps : par contre à l'installation,

    l'image se met à la bonne place.

    mais dans l'article non, elle est ailleurs  LOL

    Il faut donc jouer avec les chiffres

    pour qu'elle soit placée correctement là où on la veut.

    ça vient je crois des derniers changements Eklablog...

    21
    Mardi 4 Novembre 2014 à 14:47

    Oui c'est ça, position relative.

    Je ferai un essai plus tard pour la position absolute,

    mettre le code dans un module je pense... 

    Je te préviendrai aussi si je le fais.

    Je prendrai autre chose que les oiseaux.

    Quoi, je ne sais pas encore ?  winktongue

    Des croquettes seraient les bienvenues  hihihihi

    (je plaisante bien sûr !)

    22
    Mardi 4 Novembre 2014 à 16:53

    bonjour 

    un petit souçis d'encadrement pour mes desings avant je reglais avec le htlm

    mais j'ai vu que sa a changer je ne voyais plus que mes images

    et non le kits 

    j'ai se code dans le css 

    #background table {
     border-collapseseparate;
     border-spacing:15px;
    }​mais je ne peut plus regler dans le htlm comme avant

    avez vous une solution

    merci d'avance 

    23
    Mardi 4 Novembre 2014 à 17:44

    Hello, pourquoi je ne reçois plus la news quand tu fais un nouvel article ?? Zut, je ne trouve pas ou m'abonnez ? Dois je changer de lunettes Dali ???

    mdr

    24
    Dimanche 23 Novembre 2014 à 22:05

    coucou mon amie

      je passe  te voir

      j'ai  plus mon ascenseur   

     pourtant le  code  y  ai dedans mais depuis 

      que  ekla  fait  des modif   sa déconne

      as tu  un code pour moi  

     cela  serait  gentille  

     j'espère que tu as passer un bon dimanche

     moi en famille  sa fait  du bien 

     j'ai reprit doucement mon blog

      depuis plus  de 3 semaine  en pause 

     je  te fait de gros bisous  

     dors bien  

    25
    Mercredi 1er Avril 2015 à 19:34

    Bonjour, c'est encore moi, je ne dois pas être au bon endroit, mais je ne sais pas ou poser cette question

    Comment faire pour avoir les bordures du fond du blog en 3D

    Je ne trouve pas

    Merci d'avance

    Sergio63

    26
    Mercredi 1er Avril 2015 à 20:43

    Merci pour ton code, c'est sympa.

    L'effet est comme je le désirais, c'est super.

    Pour info j'ai sauvegardé le code et supprimé ton commentaire.

    Encore merci

    Sergio63

    27
    Jeudi 2 Avril 2015 à 17:16

    Bonjour,

    J'ai réussi a mettre les 2 effets ensemble et le résultat est vraiment nickel.

    Çà donne vraiment un autre style a mon blog.

    Je suis super content et je te remercie une nouvelle fois.

    A bientôt

    Sergio63

    28
    Dimanche 3 Mai 2015 à 00:55

    Bonjour Dalila

    merci pour ce code

    je vais tenter de l'installer, je ne suis pas sûre d'avoir tout bien compris

    J'aurais voulu mettre ta bannière dans mes liens utiles mais je ne trouve pas le code

    s'il existe pourrais-tu m'indiquer où le trouver s'il te plaît ?

    merci d'avance

    Bon dimanche

    Agnès

     

    29
    Dimanche 21 Juin 2015 à 07:47

    Bonjour ma douce donc comme j'ai compris l'absolute on le remplace par relative pour mettre dans un module!!! car j'ai mis module sur mon blog, met dans le module titre au milieu malgré que je l'ai remplacer sa fonctionne pas,mdr ou je me suis platé car j'aurais voulu placé mon papillon  dans module car sa fais vide.

    30
    Mardi 23 Juin 2015 à 10:19

    Bonjour ma belle Dali

    Haha on va voir mais un peu complique pour moi...Vais voir (lol)

    J'espere que tu as passé un bon week end

    Belle journée à toi et gros bisous Jasmine

    31
    Jeudi 2 Juillet 2015 à 03:02

    Merci pour ces explication, je le ferait la prochaine fois le tête reposer.

    32
    Vendredi 28 Août 2015 à 02:04

    Merci beaucoup. J'adore ce code. Bon vendredi. Bisous

    33
    Vendredi 28 Août 2015 à 03:36

    Bonsoir merci beaucoup pour le code, c'est fantastique cette astuce. J'aimerais savoir su ont peux mettre ce genre de code a la place de l'image. Merci a l'avance. Bonne journée.

    34
    Lundi 7 Septembre 2015 à 06:29

    Bonjour Dalili

    Mieux vaut tard que jamais, je me suis enfin décidée à tenter l'expérience dans l'entête et le pied-de-page

    Cette astuce est vraiment bien pour mettre un peu de mouvement dans les entêtes quand on n'utilise pas de flash

    J'ai eu un peu de mal au départ à déterminer où commençait et où finissait le code de l'image mais à force de tâtonner j'y suis finalement parvenue

    Je souhaiterais savoir s'il est possible  de placer le code dans un article pour éviter d'avoir un module de plus

    Merci  beaucoup pour le partage

    Bonne semaine

    Agnès

    35
    Vendredi 21 Février 2020 à 20:43

    Bonsoir Dalila

    J'espere que tu vas bien ou mieux.

    Je voudrais savoir si tu saurais me dire comment mettre un header  transparent avec horloge,  en htlm 5.

    j'ai essayé, mais je n'y comprend rien

    C'est toi la technicienne.

    J'espere ne pas te deranger.

    Bonne soirée .

    Bisous

    Vous devez être connecté pour commenter