Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Détails techniques
Version du forum : phpBB2Poste 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
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
Cordialement Papy Roosevelt,
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
Bryx
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
Bryx
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Bonjour
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.
Le script de ce cadre seul (Généralité de mon forum) titre sous fond bleu, et contenu sous un fond gris foncé :
Puis je n'arrive pas à identifier le script qui permet la superposition en flexbox :
Et pouvoir les assemblées tout les deux c'est encore autre chose aussi malheuresement
ça devient plus compliqué, je m'en mêle les pinceaux depuis des heures lol
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.
Le script de ce cadre seul (Généralité de mon forum) titre sous fond bleu, et contenu sous un fond gris foncé :
Puis je n'arrive pas à identifier le script qui permet la superposition en flexbox :
Et pouvoir les assemblées tout les deux c'est encore autre chose aussi malheuresement
ça devient plus compliqué, je m'en mêle les pinceaux depuis des heures lol
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Hello,
Vous devez juste réfléchir et être logique.
La superposition doit être dans gauche ou dans droite.
Exemple dans tout ce codage :
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
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Yees après plus d'effort de ma part, je pense avoir réussie tu en penses quoi ?
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 :
Cordialement Papy Roosevelt,
- 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 :
- 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,
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Hello,
Quand j'ai vu votre code, j'ai fait OMG !!
Vous utilisez un éditeur de code sur votre PC, je vous recommande Sublime Text
Voici l'essai que j'ai fait en page 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
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
Bryx
Quand j'ai vu votre code, j'ai fait OMG !!
Vous utilisez un éditeur de code sur votre PC, je vous recommande Sublime Text
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
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
Bryx
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Négatif, j'utilises juste l'éditeur de code sur forumactif lol
Merci pour le partager je viens de télécharger le logiciel
Je confirme c'est beaucoup mieux avec les couleurs c'est cool
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
Cordialement Papy Roosevelt,
Merci pour le partager je viens de télécharger le logiciel
Je confirme c'est beaucoup mieux avec les couleurs c'est cool
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
Cordialement Papy Roosevelt,
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
Nouveau codage, mis à jour et qui ne reprend pas les autres (surtout le CSS).
Bryx
Par exemple, la page est enregistrée sur mon PC et non sur mon forum d'essai Forumactif
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Ah d'accord je comprend
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
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
Cependant, le contenu de gauche et de droite est-ce mieux ?
Bryx
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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 :
Et là pour les pages HTML le changement de dimension choque énormément à nos utilisateurs :
là c'était parfait pour l'accueil :
Et là pour les pages HTML le changement de dimension choque énormément à nos utilisateurs :
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Hello,
Voici mes modifications.
Supprime ce que tu avais jusqu'à maintenant et utilise ceci :
CSS :
HTML :
Bryx
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
- 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>
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
Il s'agit uniquement du fond ? Merci de me fournir le code couleur, l'image, etc.
Merci, Bryx
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
C'est tout se que j'ai comme code :
Merci
- 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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Je m'occupe de la personnalisation du tableau sous peu
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
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
Oy o/
Est-ce que tu pourrais coller le code complet pour les images que tu veux des deux côtés opposés ?
Ce commentaire par contre...
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...
Re: Superposer une image avec un texte mais à l'intérieur d'un cadre dans un fond gris
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 :
Du coup c'est se que je chercher merci quand même
- 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
Sujets similaires
» Texte noir sur fond gris foncé dans plusieurs endroits du forum
» Image catégorie mais texte dans le fils d'Arianne
» je souhaiterais mettre un lien dans la bande défilante mais avec une ancre texte
» Image de fond dans le cadre réponse
» Avoir une image de fond dans le cadre du forum
» Image catégorie mais texte dans le fils d'Arianne
» je souhaiterais mettre un lien dans la bande défilante mais avec une ancre texte
» Image de fond dans le cadre réponse
» Avoir une image de fond dans le cadre du forum
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum