[PHPBB2] Décaler des petites images dans le corps du message d'accueil sur l'index;

[Mi Neth]

• Version du forum :
  PHPBB2
• Templates modifiés :
  oui
• Navigateur :
  Chrome

Bonjour Milouze, 

Dans la zone message sur la page d'accueil, j'ai installé l"astuce de ce tuto, 
https://forum.forumactif.com/t233727-creer-un-forum-ou-les-membres-postent-mais-seuls-les-admins-lisent

J'aimerai y joindre deux petites images dans les coins, Comme cette exemple, 


Mais, j'ai beau modifier l'alignement, j'obtiens toujours ce même résultat, 


J'apprécie, d'avance, ton aide, 
Merci et bonne journée, 
Mi Neth,

[Milouze14Fondateur]

Hello Neth,

comment as tu pratiqué pour afficher les deux images stp?

[Mi Neth]

Bonjour Milouze, 

Pour ma première tentative,
J'ai sélectionné l'image de gauche et cliqué sur l'icône aligner à gauche dans le sélecteur d"édition, Puis fais de même avec le texte (aligner au centre, Et fini par l'image de droite (aligner à droite),

Pour ma deuxième tentative et suivantes (parce que j'ai insisté après avoir vidé mon cache), 
J'ai écris,

Code:

<p align="left"><img src="lien de mon image" /></p>

<p align="center">Toque ...</p>

<p align="right"><img src="lien de mon image" /></p>

Merci et bonne journée,
Mi Neth,

[Milouze14Fondateur]

Hello Neth,
non , je veux le code html installé sur ton fofo

[Mi Neth]

Avant de revenir te soumettre mon texte, j'ai retenté de nouveau,
Cette fois mes images sont bien à gauche et à droite, mais elles ne sont pa salignées avec mon lien, comme je voudrai,
Voici mon texte actuel,

Code:

<div align="center">
 
 <div style="text-align: left;">
    
 <div>
   <a rel="nofollow" target="_blank" class="postlink" href="https://servimg.com/view/18902432/1532"><img alt="" border="0" src="https://i.servimg.com/u/f88/18/90/24/32/img_to19.jpg" /></a>  
 </div>
    
 <div>
   <br />  
 </div>
    
 <div style="text-align: center;">
   <a href="https://yacinth.forumactif.com/post?f=8&mode=newtopic">Toque à la porte pour te présenter,</a>  
 </div>
    
 <div style="text-align: right;">
  <br />  
 </div>
    
 <div style="text-align: right;">
   <a rel="nofollow" target="_blank" class="postlink" href="https://servimg.com/view/18902432/1531"> </a>  
 </div><a rel="nofollow" target="_blank" class="postlink" href="https://servimg.com/view/18902432/1531"> </a>  
 <div style="text-align: right;">
  <a rel="nofollow" target="_blank" class="postlink" href="https://servimg.com/view/18902432/1531"> <img alt="" border="0" src="https://i.servimg.com/u/f88/18/90/24/32/img_to18.jpg" /></a>  
 </div>
            
 </div>
</div>

Merci pour ton aide,
Bonne journée,

[Milouze14Fondateur]

Hum, le bug est relatif au balise html du template.
On va remédier en insérant des class sur le code html.

Code:

<div class="M14_pa">
                
   <div class="M14_pa_left"><img border="0" src="https://i.servimg.com/u/f88/18/90/24/32/img_to19.jpg" alt="" />       
   </div>
   <div class="M14_pa_center">
              <a href="https://yacinth.forumactif.com/post?f=8&mode=newtopic">Toque à la porte pour te présenter,</a>       
   </div>
                  
   <div class="M14_pa_right"><img border="0" src="https://i.servimg.com/u/f88/18/90/24/32/img_to18.jpg" alt="" />       
   </div>
</div>

Puis ajouter ceci dans la feuille de style:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


div.M14_pa{width:100%;height: 90px;}
div.M14_pa_left,div.M14_pa_center,div.M14_pa_right{width:30%;height: 90px;display: inline-block;}
div.M14_pa_center a{top: -30px;position: relative;}



Penser a cliquer sur le bouton

[Mi Neth]

Merci pour ton aide,
J'ai installé les deux codes, Il y a un mieux, J'ai tenté de modifier le css, via les tailles en pourcentage et pixel pour que mes images se positionnent comme voulu, Comme, je n'y suis pas parvenue, j'ai remis ton code tel que fourni,
Voici je que j'obtiens,



Encore merci;
Bonne journée à toi,

[Milouze14Fondateur]

Tu peux ajouter ceci dans ta feuille de style Nteh:

Code:

div.M14_pa_left img{margin-left:-100%;}
div.M14_pa_right img{margin-right:-100%;}

[Mi Neth]

Merci Milouze,

J'ai mis à 95%, ça met, pile les images où je voulais,
Par contre, j'avais refait le script sans le mode gras, Et, c'est normal, tu as corrigé à partir de mon dernier script fourni,
Du coup, lorsque je tente de mettre le lien en gras, il s'en trouve sur deux lignes, J'ai testé de changer la taille, sans succès,
Bonne soirée,

[Milouze14Fondateur]

Re Neth,

alors il faut diminuer les valeurs de la première div et la dernière:
Les trois ont 30%:

Code:


div.M14_pa_left,div.M14_pa_center,div.M14_pa_right{width:30%;height: 90px;display: inline-block;}

Si tu modifies ainsi:

Code:


div.M14_pa_left,div.M14_pa_center,div.M14_pa_right
{height: 90px;display: inline-block;}
div.M14_pa_left{width:20%;}
div.M14_pa_center{width:40%;}
div.M14_pa_right{width:20%;}


Il faudra ajuster ensuite le rapprochement des images vers les extrémités.

[Mi Neth]

Bonjour Milouze,

J'ai, finalement, remis les codes précédents, Je renonce à mettre le lien en gras, Soi mes tentatives décalaient les images, L'une en hauteur, L'autre dans le corps des catégories, Soi elles se rapprochaient, Mais le lien, lui, ne changeait pas, J'avais commencé en diminuant, comme tu me l'as conseillé, Mais ça n'a rien voulu savoir, Je me suis demandé, C'est un pourcentage pour les trois zones left, center, right (donc 100 divisible en trois)? Ou chacune à son pourcentage (ce qui donnerait 100 multiplié par trois)?
S"il s'agit de trois zones communes, celle du centre doit elle avoir l'absolu d'un pourcentage supérieur? Et dans le cas de zones distinctes, si je diminue le pourcentage de celle de gauche pour la placer au plus près du cadre, je dois faire le contraire pour celle de droite, non?
Merci pour ton aide et pour tes réponses,
Bonne journée,
Mi Neth,

[Milouze14Fondateur]

Hello Neth,

S"il s'agit de trois zones communes, celle du centre doit elle avoir l'absolu d'un pourcentage supérieur? Et dans le cas de zones distinctes, si je diminue le pourcentage de celle de gauche pour la placer au plus près du cadre, je dois faire le contraire pour celle de droite, non?

Toutes les divs seront placées à l'horizontale avec le display inline-block.
Donc rien en absolute.

Voilà pourquoi j'ai modifié la c.s.s:

Code:

div.M14_pa_left,div.M14_pa_center,div.M14_pa_right
{height: 90px;display: inline-block;}
div.M14_pa_left{width:20%;}
div.M14_pa_center{width:40%;}
div.M14_pa_right{width:20%;}

Au lieu de:

Code:

div.M14_pa_left,div.M14_pa_center,div.M14_pa_right{width:30%;height: 90px;display: inline-block;}

Sur mon fofo de tests tout fonctionne.
Si tu as laissé cette partie:

Code:

[code]div.M14_pa_left,div.M14_pa_center,div.M14_pa_right{width:30%;height: 90px;display: inline-block;}[/code]

Il est logique que rien ne fonctionne Neth.

---

---

Si on repart de zéro, ce code html et cette c.s.s sont fonctionnelle:

Code:

 
<div class="M14_pa">
                            
 <div class="M14_pa_left">
 <img border="0" alt="" src="https://i.servimg.com/u/f88/18/90/24/32/img_to19.jpg" />              
 </div>
      
 <div class="M14_pa_center">
                  <a href="https://yacinth.forumactif.com/post?f=8&mode=newtopic">Toque à la porte pour te présenter.</a>              
 </div>
                              
 <div class="M14_pa_right">
 <img border="0" alt="" src="https://i.servimg.com/u/f88/18/90/24/32/img_to18.jpg" />              
 </div>
    
</div>



Code:

div.M14_pa{width:100%;height: 90px;}
div.M14_pa_left,div.M14_pa_center,div.M14_pa_right
    {height: 90px;display: inline-block;}
    div.M14_pa_left{width:20%;}
    div.M14_pa_center{width:40%;}
    div.M14_pa_right{width:20%;}
div.M14_pa_left img{margin-left:-150%;}
div.M14_pa_right img{margin-right:-150%;}
div.M14_pa_center a{top: -30px;position: relative;font-size:18px;font-weight:bold;text-decoration:none!important;}

Voir le forum de tests:
https://testdesforums.1fr1.net/

[Mi Neth]

Merci à toi,
J'ai adapté à 140% et c'est tout bon,
Pour te répondre, je n'avais pas remis le petit bout de code,
Et merci pour tes réponses,
Je mets en résolu,
bon week end,

[Milouze14Fondateur]

De rien et bon week-end à toi aussi.

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande