Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Dim 26 Avr 2020, 10:17

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.Habbonu.fr/

Description du problème

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Intro_10

Bonjour, comme le démontre le screen ci-dessus, je souhaiterais créer une image superposé avec un texte à droite, et de même en bas pour la gauche, le tout dans un fond gris et dans un cadre avec un titre sous une couleur bleu, comme le screen.

Je dispose d'un code avec le fond gris derrière :
Code:
<div class="annonce_de_mon_FA">
          
 <div class="gauche">
          <iframe src="https://www.youtube.com/embed/WN4d1IeYv_0?rel=0" frameborder="0" allowfullscreen="" style="width: 560px; height: 349px;"></iframe>      
 </div>
          
 <div class="droite">
              
 <div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                
 <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
                    
 <div style="text-shadow: 3px 3px 4px #0B0B61;">
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
    <span style="font-size: 13px;"><br /></span>    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
    <strong style="font-size: 13px;"><span style="font-size: 16px;"><a href="https://www.habbonu.fr/h22-introduction"><img src="https://i.servimg.com/u/f95/19/01/14/64/introd13.png" onmouseover="this.src='https://i.servimg.com/u/f95/19/01/14/64/introd12.png'" onmouseout="this.src='https://i.servimg.com/u/f95/19/01/14/64/introd13.png'" /></a></span></strong>    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
    <br />    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);" align="center">
    <a style="font-size: 15px;" href="http://www.habbonu.org/h12-activite"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a>    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);" align="center">
    <br />    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
                          
 <div style="text-align: center;">
    <a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a>    
 </div>
                          
 <div style="text-align: center;">
    <br />    
 </div>
                      
 </div>
                      
 <div style="text-align: center;">
    <a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a>    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);" align="center">
    <br />    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
    <strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong>    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);" align="center">
    <br />    
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);" align="center">
                          
 <div style="font-size: 15px;" align="center">
    <strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong>    
 </div>
                          
 <div style="" align="center">
    <br />    
 </div>
                      
 </div>
                      
 <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
    <img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" />    
 </div>
                    
 </div>
                
 </div>
              
 </div>
          
 </div>
</div>

Et ici pour le cadre bleu mais le tout étant intégrer avec d'autres éléments difficile à retirer :

Code:
ble class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="catHead" height="28"><span class="cattitle"><center>ENGAGEZ-VOUS !</center></span></td>
  </tr>
  <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
        <div class="gensmall">
         <div style="center; border: 3px solid black;padding:00px;">
            <div style="center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png');order: 6px solid #0000;padding:12px;">
               <div style="text-shadow: 3px 3px 4px #0B0B61;">
                  <div style="background-color: rgb(41, 41, 41);" align="center">
                     <strong><span style="color: rgb(255, 255, 153);"><span style="font-family: Palatino;"><span style="font-size: 24px;"><img src="https://i.servimg.com/u/f20/17/70/94/08/char_o12.png" /> <iframe style="width: 560px; height: 349px;" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/WN4d1IeYv_0?rel=0"></iframe></span></span></span></strong><br />
                  </div>
                  <div style="background-color: rgb(41, 41, 41);" align="center">
                     <a style="font-family: Palatino; font-size: 15px;" href="http://www.habbonu.fr/h15-recrutement"><img http:="" i68.servimg.com="" u="" f68="" 17="" 70="" 94="" 08="" centre14.png""="" "="" src="https://i.servimg.com/u/f11/17/70/94/08/bouton19.png" /></a><br />
                  </div>
               </div>
            </div>
         </div>
         </div>
      </td>
  </tr>
</table>

Et voilà ce que j'ai en CSS :

Code:
.annonce_de_mon_FA {height: 349px; display: flex}
.annonce_de_mon_FA .gauche {width: 560px}
.annonce_de_mon_FA .droite {width: 100%}

Merci d'avance Smile
Cordialement Papy Roosevelt,
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Dim 26 Avr 2020, 13:05

Hello,

Comme toujours, on regarde avant :
- https://www.xul.fr/css/texte-sur-image.php

Toutefois, je m'aperçois que vous n'utilisez pas un forum d'essai.
Je vous invite vivement à créer un forum d'essai pour faire des tests Wink

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Dim 26 Avr 2020, 13:54

Bonjour Smile

Merci mais ça c'est un texte sur une image, moi je voudrais une superposition image et texte à coté mais à l'intérieur du cadre "généralité" (que tu m'as soigneusement passé d'ailleurs sur un autre sujet) avec le fond gris foncé derrière, enfaîte j'ai déjà du mal à identifier les différents scripts alors ne me demandez pas de créer un assemblage lol, pourtant j'ai essayer toute l’après-midi pas moyen. Crying or Very sad


Le script de ce cadre seul (Généralité de mon forum) titre sous fond bleu, et contenu sous un fond gris foncé :

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Gzonzo10



Puis je n'arrive pas à identifier le script qui permet la superposition en flexbox :

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Gzonzo11


Et pouvoir les assemblées tout les deux c'est encore autre chose aussi malheuresement Razz

ça devient plus compliqué, je m'en mêle les pinceaux depuis des heures lol
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Lun 27 Avr 2020, 03:29

Hello,

Vous devez juste réfléchir et être logique.
La superposition doit être dans gauche ou dans droite.

Exemple dans tout ce codage :
Code:
<style type="text/css">
.annonce_de_mon_FA {height: 349px; display: flex}
.annonce_de_mon_FA .gauche {width: 560px}
.annonce_de_mon_FA .droite {width: 100%}
</style>


<div class="annonce_de_mon_FA">
   <div class="gauche">
      <div style="position:relative; height:400px">
         <div style="position:absolute;z-index:1">
            <img src="https://www.xul.fr/css/images/greenhouse.jpg">
         </div>
         <div style="position:absolute;top:360px; width:600px; height:400px; z-index:2;font-size:200%">
            <center><b>Ma maison...</b></center>
         </div>
      </div>
   </div>
   <div class="droite">
      <div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
         <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
            <div style="text-shadow: 3px 3px 4px #0B0B61;">
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><span style="font-size: 13px;"><br /></span></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 13px;"><span style="font-size: 16px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton18.png" /></span></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><a href="http://www.habbonu.org/h12-activite" style="font-size: 15px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton21.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
                  <div style="text-align: center;"><a href="http://www.habbonu.org/h9-locaux"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton20.png" /></a></div>
                  <div style="text-align: center;"><br /></div>
               </div>
               <div style="text-align: center;"><a href="http://www.habbonu.org/h17-hierarchie-et-uniforme"><img src="https://i.servimg.com/u/f11/17/70/94/08/grade_10.png" /></a></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton22.png" /></strong></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);"><br /></div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
                  <div align="center" style="font-size: 15px;"><strong style="font-size: 24px;"><img src="https://i.servimg.com/u/f11/17/70/94/08/bouton23.png" /><br /></strong></div>
                  <div align="center" style=""><br /></div>
               </div>
               <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);"><img src="https://2img.net/r/hpimg15/pics/635175141123111647994795.png" /></div>
            </div>
         </div>
      </div>
   </div>
</div>

Soyez attentif à ce que l'on vous propose. Poser des questions sur le fonctionne du codage que je vous propose afin d'être capable en autonomie de le géré correctement. Il y a aussi des cours depuis internet et là il n'y manque également de rien.

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Lun 27 Avr 2020, 11:21

Yees après plus d'effort de ma part, je pense avoir réussie tu en penses quoi ? Smile

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Visuel10

Code:
<br />
<table class="forumline" border="0" cellspacing="1" cellpadding="0" style="width: 100%;">
   <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="catHead" style="height: 28px;">
 <span class="cattitle"> </span>
 <center style="">
 INTRODUCTION
 </center><span class="cattitle"></span>
 </td>
    
 </tr><tbody></tbody><tbody></tbody> <tbody></tbody>
 <tr style="">
 
 <td class="row1" rowspan="3" align="center" valign="middle">
  
 <div style="text-align: center; border: 3px solid black; padding: 0; height: 388.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
  
 <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
  
 <div style="text-shadow: 3px 3px 4px #0B0B61;">
  
 </div>
  
 <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
  
 </div>
  
 </div>
    
 <div class="annonce_de_mon_FA">
      
 <center>
    
 <div class="gauche">
   <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png" />  
 </div>
    
 </center>
    
 <div class="droite">
   CECI EST UN TEST <br />   BLABLABLAAAAH <br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />  
 </div><br />  
 </div>
 
 </div>
 
 </td>
 
 </tr><tbody></tbody><tbody></tbody>
</table>
 <br />
<div style="text-align: center;">
                                                                         <em>Habbonu all rights reserved - 2008. Design by Papy Roosevelt. </em>
</div>
                                                                          
<div style="text-align: center;">
                                                                            <em><span style="font-size: 13px;">Habbonu ne fait en aucun cas parti du groupe Sulake Corporation Oy.</span></em><em><br /></em>
</div>
<div style="text-align: center;">
   <em><span style="font-size: 13px;"><br /></span></em>
</div>

Cependant dernier petit problème je n'arrive pas à faire une autre superposition en bas en inversant image à droite et texte à gauche le tout sur la même page :


Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Visuel11

Code:
<br />
<table class="forumline" border="0" cellspacing="1" cellpadding="0" style="width: 100%;">
   <tbody></tbody> <tbody></tbody>
 <tr style="">
        
 <td class="catHead" style="height: 28px;">
 <span class="cattitle"> </span>
 <center style="">
 INTRODUCTION
 </center><span class="cattitle"></span>
 </td>
    
 </tr><tbody></tbody><tbody></tbody> <tbody></tbody>
 <tr style="">
 
 <td class="row1" rowspan="3" align="center" valign="middle">
  
 <div style="text-align: center; border: 3px solid black; padding: 0; height: 777.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">
  
 <div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;">
  
 <div style="text-shadow: 3px 3px 4px #0B0B61;">
  
 </div>
  
 <div align="center" style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);">
  
 </div>
  
 </div>
    
 <div class="annonce_de_mon_FA">
      
 <center>
    
 <div class="gauche">
   <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png" />  
 </div>
    
 </center>
    
 <div class="droite">
   CECI EST UN TEST <br />   BLABLABLAAAAH <br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />  
 </div><br />  
 </div>

<div class="droite">
   <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png" />  
 </div>
<div class="gauche">
   CECI EST UN TEST <br />   BLABLABLAAAAH <br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />  
 </div>
 
 </div>
 
 </td>
 
 </tr><tbody></tbody><tbody></tbody>
</table>
 <br />
<div style="text-align: center;">
                                                                         <em>Habbonu all rights reserved - 2008. Design by Papy Roosevelt. </em>
</div>
                                                                          
<div style="text-align: center;">
                                                                            <em><span style="font-size: 13px;">Habbonu ne fait en aucun cas parti du groupe Sulake Corporation Oy.</span></em><em><br /></em>
</div>
<div style="text-align: center;">
   <em><span style="font-size: 13px;"><br /></span></em>
</div>

Cordialement Papy Roosevelt,
salut
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Lun 27 Avr 2020, 12:21

Hello,

Quand j'ai vu votre code, j'ai fait OMG !! Smile
Vous utilisez un éditeur de code sur votre PC, je vous recommande Sublime Text Wink

Voici l'essai que j'ai fait en page HTML :
Code:
<html>
   <head>
      <title>Test page</title>
      <link rel="stylesheet" href="https://www.habbonu.fr/20-ltr.css" type="text/css" />
   </head>
   <body style="width: 900px; margin: 0 auto; justify-content: center; align-items: center; display: flex; height: auto">
      <style type="text/css">
      .annonce_de_mon_FA {height: 349px; display: flex}
      .annonce_de_mon_FA .gauche {width: 560px}
      .annonce_de_mon_FA .droite {width: 100%}
      </style>

      <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <tr>
            <td class="catHead" height="28"><span class="cattitle">Mon titre</span></td>
        </tr>
        <tr>
            <td class="row1" rowspan="3" align="center" valign="middle">
              <div class="gensmall">
               <div class="annonce_de_mon_FA">
                  <div class="gauche">
                     <div style="position:relative; height:335px">
                        <div style="position:absolute;z-index:1">
                           <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
                        </div>
                        <div style="position:absolute;top:150px; width:419px; height:335px; z-index:2;font-size:200%">
                           <center>Test A</center>
                        </div>
                     </div>
                  </div>
                  <div class="droite">
                     Ceci est un message de droite !
                  </div>
               </div>

               <div class="annonce_de_mon_FA">
                  <div class="gauche">
                     Ceci est un message de gauche !
                  </div>
                  <div class="droite">
                     <div style="position:relative; height:335px">
                        <div style="position:absolute;z-index:1">
                           <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
                        </div>
                        <div style="position:absolute;top:150px; width:419px; height:335px; z-index:2;font-size:200%">
                           <center>Test B</center>
                        </div>
                     </div>
                  </div>
               </div>
              </div>
            </td>
        </tr>
      </table>
   </body>
</html>

Depuis Sublime Text, fait " Ctrl + s" pour enregistrer la page, puis mettre index.html
La page sera alors en .html sur votre PC et peut-être ouverte depuis votre navigateur sans problème.

D'ailleurs, ça va vous changer grandement la vie Wink

Dans la page HTML, je récupère intégralement votre CSS sur votre forum.
Vous n'avez aucune action à faire, hormis faire les modifications Wink

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Lun 27 Avr 2020, 12:47

Négatif, j'utilises juste l'éditeur de code sur forumactif lol

Merci pour le partager je viens de télécharger le logiciel Yes
Je confirme c'est beaucoup mieux avec les couleurs c'est cool Smile

Par contre le script que tu m'as passé y'a un problème ça a déformé la page en plus petit et il n'y a pas le fond gris derrière Razz

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Proble10

Cordialement Papy Roosevelt,
salut
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Mar 28 Avr 2020, 10:48

Effectivement, la page fournie n'est pas à être utilisée sur une page HTML de votre forum, mais depuis votre navigateur.

Par exemple, la page est enregistrée sur mon PC et non sur mon forum d'essai Forumactif

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Captur16

Bryx a écrit:Depuis Sublime Text, fait " Ctrl + s" pour enregistrer la page, puis mettre index.html
La page sera alors en .html sur votre PC et peut-être ouverte depuis votre navigateur sans problème.

Nouveau codage, mis à jour et qui ne reprend pas les autres (surtout le CSS).

Code:
<html>
 <head>
 <title>Test page</title>
 <link rel="stylesheet" href="https://www.habbonu.fr/20-ltr.css" type="text/css" />
 </head>
 <body style="width: 900px; margin: 0 auto; justify-content: center; align-items: center; display: flex; height: auto">
 <style type="text/css">
 .mon_introduction_FA {padding: 15px; display: flex; flex-direction: row; flex-wrap: wrap}
 .mon_introduction_FA .gauche {width: 50%}
 .mon_introduction_FA .droite {width: 50%}
 </style>

 <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" height="28"><span class="cattitle">Mon titre</span></td>
   </tr>
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
         <div class="gensmall">
 <div class="mon_introduction_FA">
 <div class="gauche">
 <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
 </div>
 <div class="droite">
 Ceci est un message de droite !
 </div>
 </div>
 <div class="mon_introduction_FA">
 <div class="gauche">
 Ceci est un message de gauche !
 </div>
 <div class="droite">
 <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
 </div>
 </div>
         </div>
      </td>
   </tr>
 </table>
 </body>
</html>

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Mer 29 Avr 2020, 09:04

Ah d'accord je comprend Smile
Merci je viens de copier ton nouveau code au CSS et HTML, toujours la même chose, il s'adapte pas avec la taille du forum Confused
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Mer 29 Avr 2020, 10:37

Pour la largeur, elle n'a aucune importance car elle n'est pas celle de votre forum.

Cependant, le contenu de gauche et de droite est-ce mieux ?

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Mer 29 Avr 2020, 18:54

Le contenu de gauche et de droite c'est presque parfait et je te remercie beaucoup pour cela :p mais presque parfait car lorsque j'écris un texte, ça déborde comme le démontre le dernier screen, et je n'arrive toujours pas à mettre le fond gris derrière en background, et régler la dimension de ce bloc qui n'est pas du tout uniforme aux autres pages du forum.

là c'était parfait pour l'accueil :
Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Big10

Et là pour les pages HTML le changement de dimension choque énormément à nos utilisateurs :
Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Small10
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Jeu 30 Avr 2020, 04:01

Hello,

Voici mes modifications.

Supprime ce que tu avais jusqu'à maintenant et utilise ceci :

CSS :
Code:
.mon_introduction_FA {word-wrap: break-word; padding: 15px; display: flex; flex-direction: row; flex-wrap: wrap}
.mon_introduction_FA .gauche {width: 50%}
.mon_introduction_FA .droite {width: 50%}

HTML :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="catHead" height="28"><span class="cattitle">Mon titre</span></td>
  </tr>
  <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
        <div class="gensmall">
         <div class="mon_introduction_FA">
            <div class="gauche">
               <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
            </div>
            <div class="droite">
               Ceci est un message de droite !
            </div>
         </div>
         <div class="mon_introduction_FA">
            <div class="gauche">
               Ceci est un message de gauche !
            </div>
            <div class="droite">
               <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
            </div>
         </div>
        </div>
      </td>
  </tr>
</table>

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Jeu 30 Avr 2020, 23:01

Ah c'est déjà mieux comme ça merci Bryx, il manque plus que le fond gris à l'intérieur que je n'arrive pas à mettre Mad

Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris Fond_g10

Code:
<div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;"></div>
            
            <div style="text-shadow: 3px 3px 4px #0B0B61;"></div>
               
               <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
<br><br><br>

                                 
               
<br>

      <div class="gensmall"> </div> </div>
        <div class="mon_introduction_FA">
            <div class="gauche">
              <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
            </div>
            <div class="droite">
              Ceci est un message de droite !
            </div>
        </div>
        <div class="mon_introduction_FA">
            <div class="gauche">
              Ceci est un message de gauche !
            </div>
            <div class="droite">
              <img src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png">
            </div>
        </div>
        </div>
      </td>
  </tr>
</table>
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Ven 01 Mai 2020, 03:22

Vous avez un gros souci avec le code que vous m'avez fourni.
Il s'agit uniquement du fond ? Merci de me fournir le code couleur, l'image, etc.

Merci, Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Ven 01 Mai 2020, 13:33

C'est tout se que j'ai comme code :

Code:
<br />

<div style="text-align: center; border: 3px solid black; padding: 0; height: 343.1px; color: rgb(255, 255, 255); font-family: Palatino; background-color: rgb(41, 41, 41);">

<div style="text-align: center; background-image: url('https://i.servimg.com/u/f58/17/70/94/08/backgr10.png'); border: 6px solid 0000; padding:12px;"></div>
            
            <div style="text-shadow: 3px 3px 4px #0B0B61;"></div>
               
               <div style="color: rgb(255, 255, 255); font-family: Palatino; font-size: 15px; background-color: rgb(41, 41, 41);" align="center">
<br><br><br>
                  
               </div> </div>
<br>

Merci Smile
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Bryx Ven 01 Mai 2020, 16:03

Je m'occupe de la personnalisation du tableau sous peu Smile
Laisse-moi un peu de temps, UP tous les 5 jours si tu ne vois aucune réponse de ma part.

J'ai repris les cours en télétravail et faut que je réorganise mon planning.

Bryx ::pourtoi::
Bryx

Bryx
****

Masculin
Messages : 404
Inscrit(e) le : 03/12/2017

https://webtoons.forumactif.com
Bryx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Ven 01 Mai 2020, 17:09

Arf c'est gentil merci, mais d'ici tout les 5 jours on aura déjà rouvert le forum faut que je trouve une autre alternative, merci quand même, je te souhaite une belle reprise Smile

Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Mer 06 Mai 2020, 12:34

UP ?
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Lun 11 Mai 2020, 23:41

Up
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par mSyx Mar 12 Mai 2020, 08:24

Oy o/
Est-ce que tu pourrais coller le code complet pour les images que tu veux des deux côtés opposés ?

Hello,

Vous devez juste réfléchir et être logique.

Ce commentaire par contre...
mSyx

mSyx
****

Masculin
Messages : 394
Inscrit(e) le : 22/09/2012

https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris

Message par Papy Roosevelt Ven 15 Mai 2020, 02:53

C'est gentil de vouloir m'aider Kehoru, mais du coup un ami à moi m'a aidé entre temps, il m'a donner ce code :

Code:
<br /> <style>
  .container {
    border: 3px solid black;
    padding: 5px;
    background-color: rgb(41, 41, 41);
  }

  p {
    text-align: center;
    color: white;
    font-family: Palatino;
    font-size: 18px;
    text-shadow: 3px 3px 4px #0B0B61;
  }
</style> 
<div class="container">
        
   <p>
            <img style="float: right; margin: 0px 15px 15px 0px;" src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png" />      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra at lacus a condimentum. Sed in turpis      justo. Morbi porta, metus vitae tincidunt ultrices, nulla ipsum venenatis est, id pretium quam lectus in sapien.      Nunc semper faucibus justo, at congue tortor tempus quis. Morbi gravida urna vitae diam volutpat, sed sagittis      ligula aliquet. Nunc venenatis nunc id tempor dapibus. Maecenas elementum velit sit amet lobortis sagittis. Duis      non turpis velit. Morbi vitae sagittis nisi.      Sed in dignissim quam. In auctor risus arcu, iaculis ultricies ligula consectetur in. Curabitur aliquet magna sed      accumsan ultricies. Sed commodo, libero vitae ultrices bibendum, nibh lorem pharetra enim, eu accumsan sapien odio      eget justo. Aenean nec hendrerit elit. Nam id lectus convallis, bibendum tortor vel, aliquam magna. Vestibulum vel      risus arcu. Morbi at enim condimentum, bibendum ex eu, ultricies velit. Nam varius at tellus quis dapibus.      Nam ut nisl diam. Ut sed venenatis orci. Quisque nec augue tempus, elementum ligula at, malesuada lectus. Nunc      dolor risus, fringilla vel diam sit amet, sodales rhoncus turpis. Suspendisse eu sapien id ante aliquam lobortis.      Morbi augue felis, auctor interdum augue vitae, auctor ullamcorper quam. Donec sollicitudin enim at viverra      lobortis. Suspendisse at magna quis velit sagittis pellentesque. Sed efficitur auctor leo, et suscipit orci      commodo eu.      Ut a justo diam. Donec hendrerit laoreet urna in egestas. Morbi a semper velit. Mauris quis felis tellus. Mauris      vulputate elit vel arcu consequat facilisis. Nullam accumsan laoreet tellus, sit amet malesuada neque tristique      vel. In sed volutpat nunc. Nam sit amet placerat ligula, ac blandit dui.      Aliquam aliquet in risus egestas eleifend. Duis sit amet dignissim turpis. Aliquam varius commodo neque, a tempus      nulla. Fusce quis neque porttitor, tempus elit a, dictum mauris. Maecenas a urna scelerisque, faucibus nisl a,      placerat enim. Morbi molestie sit amet ligula tempus feugiat. Phasellus euismod, quam nec tincidunt ultricies,      sapien ante consectetur nibh, ac pretium tellus lacus vitae orci. Morbi a magna sollicitudin, feugiat nibh eu,      congue velit. Morbi a felis laoreet, pharetra nulla vel, ultrices mauris. Maecenas feugiat orci nisl, nec      facilisis urna facilisis eu. In pulvinar mattis leo eu vulputate. Praesent luctus leo eros, id venenatis orci      bibendum non. Maecenas lacus nunc, luctus egestas dolor eu, imperdiet sodales ex. Nulla dignissim, tellus id      porttitor vestibulum, ante augue vehicula eros, sit amet viverra orci augue eget ante. Sed auctor ullamcorper eros      id sollicitudin.      <br style="clear: both;" />   
   </p>
       <br />    <br />   
   <p>
            <img style="float: left; margin: 0px 15px 15px 0px;" src="https://i.servimg.com/u/f20/17/70/94/08/image_13.png" />      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra at lacus a condimentum. Sed in turpis      justo. Morbi porta, metus vitae tincidunt ultrices, nulla ipsum venenatis est, id pretium quam lectus in sapien.      Nunc semper faucibus justo, at congue tortor tempus quis. Morbi gravida urna vitae diam volutpat, sed sagittis      ligula aliquet. Nunc venenatis nunc id tempor dapibus. Maecenas elementum velit sit amet lobortis sagittis. Duis      non turpis velit. Morbi vitae sagittis nisi.      Sed in dignissim quam. In auctor risus arcu, iaculis ultricies ligula consectetur in. Curabitur aliquet magna sed      accumsan ultricies. Sed commodo, libero vitae ultrices bibendum, nibh lorem pharetra enim, eu accumsan sapien odio      eget justo. Aenean nec hendrerit elit. Nam id lectus convallis, bibendum tortor vel, aliquam magna. Vestibulum vel      risus arcu. Morbi at enim condimentum, bibendum ex eu, ultricies velit. Nam varius at tellus quis dapibus.      Nam ut nisl diam. Ut sed venenatis orci. Quisque nec augue tempus, elementum ligula at, malesuada lectus. Nunc      dolor risus, fringilla vel diam sit amet, sodales rhoncus turpis. Suspendisse eu sapien id ante aliquam lobortis.      Morbi augue felis, auctor interdum augue vitae, auctor ullamcorper quam. Donec sollicitudin enim at viverra      lobortis. Suspendisse at magna quis velit sagittis pellentesque. Sed efficitur auctor leo, et suscipit orci      commodo eu.      Ut a justo diam. Donec hendrerit laoreet urna in egestas. Morbi a semper velit. Mauris quis felis tellus. Mauris      vulputate elit vel arcu consequat facilisis. Nullam accumsan laoreet tellus, sit amet malesuada neque tristique      vel. In sed volutpat nunc. Nam sit amet placerat ligula, ac blandit dui.      Aliquam aliquet in risus egestas eleifend. Duis sit amet dignissim turpis. Aliquam varius commodo neque, a tempus      nulla. Fusce quis neque porttitor, tempus elit a, dictum mauris. Maecenas a urna scelerisque, faucibus nisl a,      placerat enim. Morbi molestie sit amet ligula tempus feugiat. Phasellus euismod, quam nec tincidunt ultricies,      sapien ante consectetur nibh, ac pretium tellus lacus vitae orci. Morbi a magna sollicitudin, feugiat nibh eu,      congue velit. Morbi a felis laoreet, pharetra nulla vel, ultrices mauris. Maecenas feugiat orci nisl, nec      facilisis urna facilisis eu. In pulvinar mattis leo eu vulputate. Praesent luctus leo eros, id venenatis orci      bibendum non. Maecenas lacus nunc, luctus egestas dolor eu, imperdiet sodales ex. Nulla dignissim, tellus id      porttitor vestibulum,      ante augue vehicula eros, sit amet viverra orci augue eget ante. Sed auctor ullamcorper eros id sollicitudin.      <br style="clear: both;" />   
   </p>
      
</div>
 

Du coup c'est se que je chercher merci quand même Smile
Papy Roosevelt

Papy Roosevelt
***

Masculin
Messages : 109
Inscrit(e) le : 03/07/2015

http://www.Habbonu.fr/
Papy Roosevelt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum