balises br générées seules dans une balise div contenant tableau.

[Shawn Gryffondor]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://harrypotter-univers.forumactif.com/

Description du problème

Bonjour,

J'ai codé (bricolé) un joli message privé lorsqu'un nouveau membre s'inscrit.
Pour le reste de mon forum je fais un mélange de Bbcode et de HTML et ça semble plus ou moins fonctionner.

Malheureusement dans le cas du MP d'inscription j'ai dû tout faire en HTML seul vu qu'on ne peut pas faire autrement.

Bref, sur l'image vous pouvez voir un cadre de fond noir à bordures. Sur le 1er avec l'image de la lettre et sur le dernier avec le blason de Poudlard, j'ai des BR qui se sont incrustés.

Que faire pour avoir ce résultat ? https://2img.net/r/hpimg15/pics/375427Capture2.jpg

Code:

<center>
    
   <div class="astuces">
           
      <table>
         
         <tbody>
             
            <tr>
                
               <td valign="top">
                   
                  <center>
                     <img src="https://img15.hostingpics.net/pics/422957Enveloppe.png" /> 
                  </center>
                       
               </td>
                  
               <td>
                                                              <img src="https://img15.hostingpics.net/pics/155142Textebienvenue.png" /> 
                  <center>
                           <em>Cher(e) {USERNAME},</em>   
                  </center>
                         
               </td>
                  
            </tr>
               
         </tbody>
            
      </table>
         
   </div>
      
   <div class="astuces">
          Nous avons le plaisir de vous informer que vous bénéficiez d'ores et déjà d'une inscription au collège Poudlard. Vous trouverez ci-joint la liste des ouvrages et équipements nécessaires au bon déroulement de votre scolarité.<br /><br /> La rentrée étant fixée au 1er septembre, nous attendons votre fiche de présentation le 31 juillet au plus tard.<br /><br />Veuillez croire, cher(e) {USERNAME}, en l'expression de nos sentiments distingués.<br /><br /><em>Minerva McGonagall Directrice adjointe</em><br />   
   </div>
    
   <div class="astuces">
       
      <div class="titreproduits">
           ET MAINTENANT, JE FAIS QUOI ? 
      </div>
         
      <table>
            
         <tbody>
               
            <tr>
                  
               <td>
                    1. Je vais lire et signer <a href="http://harrypotter-univers.forumactif.com/t1-reglement-v1"><span style="color: #b59b59;"><em>le règlement </em></span></a><br />2. Je lis <a href="http://harrypotter-univers.forumactif.com/t6-le-concept-de-hpu#7"><span style="color: #b59b59;"><em>le concept </em></span></a><br />3. Je crée ma fiche de personnage <a href="http://harrypotter-univers.forumactif.com/t2-modele-fiche-de-personnage"><span style="color: #b59b59;"><em>selon le modèle</em></span></a><br />4. Une fois validé, je dois aller acheter <a href="http://harrypotter-univers.forumactif.com/t5-fournitures-scolaires"><span style="color: #b59b59;"><em>mes fournitures pour la rentrée </em></span></a> et ouvrir un compte à Gringott.<br />                                          5. (ÉTAPE BONUS) Je vais au quai 9/4 réaliser mon premier rôle play. +15XP<br />6. Enfin je participe à la cérémonie de répartition dans le grand hall de Poudlard ! 
               </td>
                  
               <td>
                   <img style="width: 190px; height: 190px;" src="http://vignette2.wikia.nocookie.net/es.harrypotter/images/6/6a/Hogwarts_Logo.png/revision/latest?cb=20170201023802" /> 
               </td>
                                            
            </tr>
             
         </tbody>
          
      </table>
       
   </div>
</center>

Code:

.astuces {
  width: 550px !important;
  text-align: justify;
  padding: 8px;
  background: url(https://img15.hostingpics.net/pics/932478QEELFONDREPEAT.png) repeat repeat;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(20, 20, 20);
  border-radius: 5px;
  box-shadow: 1px 1.732px 5px 0px rgba(0, 0, 0, 0.294);
}

Merci à vous

[Shawn Gryffondor]

Bonjour !
Je me permets de relancer

[Neptunia]

Bonjour ^^


Il faudrait déjà commencer par nettoyer le code en supprimant toutes les balises <center> parce que :

- <center> était un élément de type bloc (comme les div) et donc était automatiquement accompagné de deux sauts de ligne, l'un avant l'élément, l'autre après.
- <center> est obsolète depuis 20 ans et n'a plus sa place dans un quelconque codage.

-> <center> - Mozilla Developer Network

[Shawn Gryffondor]

Bonjour Neptunia,

D'accord je ne savais pas, merci pour l'info. Toutefois, remplacer le center par du text-align center en CSS ne règle pas mon problème.

Puisque ça va seulement centrer le texte à l'intérieur de ma balise mais pas ma balise elle-même.
Hors j'ai un fond avec pattern qui est lui aussi centré sur la page. Dois-je lui appliquer une position top et left ? Ou un margin ?

Merci

[Shawn Gryffondor]

Bonsoir,

Je relance. Quelqu'un a une idée de comment régler mon problème d'affichage ?

Merci,

[Shawn Gryffondor]

Bonsoir,

Je me permets de relancer. Merci

[Scoubifitz]

Description du problème

Bonjour,

J'ai codé (bricolé) un joli message privé lorsqu'un nouveau membre s'inscrit.
Pour le reste de mon forum je fais un mélange de Bbcode et de HTML et ça semble plus ou moins fonctionner.

Bonjour,

Ce code est donc pour un MP , un message dans le forum ... et se comportera comme un message .

Malheureusement dans le cas du MP d'inscription j'ai dû tout faire en HTML seul vu qu'on ne peut pas faire autrement.

Il est parfaitement possible de tout faire en BBcode pour le message de bienvenue , même votre code .

Bref, sur l'image vous pouvez voir un cadre de fond noir à bordures. Sur le 1er avec l'image de la lettre et sur le dernier avec le blason de Poudlard, j'ai des BR qui se sont incrustés.

La solution la plus rapide (mais pas la plus propre) pour enlever ces retours à la ligne , est de ne plus faire de retour à la ligne dans le code :

Code:

<center> <div class="astuces"> <table> <tbody> <tr> <td valign="top"> <center> <img src="https://img15.hostingpics.net/pics/422957Enveloppe.png" /> </center> </td> <td> <img src="https://img15.hostingpics.net/pics/155142Textebienvenue.png" /> <center> <em>Cher(e) {USERNAME},</em> </center> </td> </tr> </tbody> </table> </div> <div class="astuces"> Nous avons le plaisir de vous informer que vous bénéficiez d'ores et déjà d'une inscription au collège Poudlard. Vous trouverez ci-joint la liste des ouvrages et équipements nécessaires au bon déroulement de votre scolarité.<br /><br /> La rentrée étant fixée au 1er septembre, nous attendons votre fiche de présentation le 31 juillet au plus tard.<br /><br />Veuillez croire, cher(e) {USERNAME}, en l'expression de nos sentiments distingués.<br /><br /><em>Minerva McGonagall Directrice adjointe</em><br /> </div> <div class="astuces"> <div class="titreproduits"> ET MAINTENANT, JE FAIS QUOI ? </div> <table> <tbody> <tr> <td> 1. Je vais lire et signer <a href="http://harrypotter-univers.forumactif.com/t1-reglement-v1"><span style="color: #b59b59;"><em>le règlement </em></span></a><br />2. Je lis <a href="http://harrypotter-univers.forumactif.com/t6-le-concept-de-hpu#7"><span style="color: #b59b59;"><em>le concept </em></span></a><br />3. Je crée ma fiche de personnage <a href="http://harrypotter-univers.forumactif.com/t2-modele-fiche-de-personnage"><span style="color: #b59b59;"><em>selon le modèle</em></span></a><br />4. Une fois validé, je dois aller acheter <a href="http://harrypotter-univers.forumactif.com/t5-fournitures-scolaires"><span style="color: #b59b59;"><em>mes fournitures pour la rentrée </em></span></a> et ouvrir un compte à Gringott.<br />5. (ÉTAPE BONUS) Je vais au quai 9/4 réaliser mon premier rôle play. +15XP<br />6. Enfin je participe à la cérémonie de répartition dans le grand hall de Poudlard ! </td> <td> <img style="width: 190px; height: 190px;" src="http://vignette2.wikia.nocookie.net/es.harrypotter/images/6/6a/Hogwarts_Logo.png/revision/latest?cb=20170201023802" /> </td> </tr> </tbody> </table> </div> </center>

édit : un code propre en BBcode (le style d'écriture sera celui de votre forum) :

Code:

[table style="width: 550px;margin:auto;color:#fff;padding: 8px;background:rgb(13,13,13);border: 1px solid rgb(20, 20, 20);border-radius: 5px;box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.3);"][tr][td valign="top"]
[img]https://img15.hostingpics.net/pics/422957Enveloppe.png[/img]
[/td]
[td style="text-align:center" colspan="2"]
[img]https://img15.hostingpics.net/pics/155142Textebienvenue.png[/img]
[i]Cher(e) {USERNAME},[/i]
[/td]
[/tr]
[tr][td colspan="3"][justify]
Nous avons le plaisir de vous informer que vous bénéficiez d'ores et déjà d'une inscription au collège Poudlard. Vous trouverez ci-joint la liste des ouvrages et équipements nécessaires au bon déroulement de votre scolarité.
 
La rentrée étant fixée au 1er septembre, nous attendons votre fiche de présentation le 31 juillet au plus tard.
 
Veuillez croire, cher(e) {USERNAME}, en l'expression de nos sentiments distingués.[/justify]
 
[i]Minerva McGonagall
Directrice adjointe[/i]
[/td]
[/tr]
[tr][td style="font-family:'Just Another Hand',cursive;font-size:20px;text-align:center;text-shadow:#fff 0 0 3px;" colspan="3"][size=20]

ET MAINTENANT, JE FAIS QUOI ?

[/size][/td]
[/tr]
[tr][td colspan="2"][justify]1. Je vais lire et signer [url=http://harrypotter-univers.forumactif.com/t1-reglement-v1][color=#b59b59][i]le règlement [/i][/color][/url]
2. Je lis [url=http://harrypotter-univers.forumactif.com/t6-le-concept-de-hpu][color=#b59b59][i]le concept [/i][/color][/url]
3. Je crée ma fiche de personnage [url=http://harrypotter-univers.forumactif.com/t2-modele-fiche-de-personnage][color=#b59b59][i]selon le modèle[/i][/color][/url]
4. Une fois validé, je dois aller acheter [url=http://harrypotter-univers.forumactif.com/t5-fournitures-scolaires][color=#b59b59][i]mes fournitures pour la rentrée [/i][/color][/url] et ouvrir un compte à Gringott.
5. (ÉTAPE BONUS) Je vais au quai 9/4 réaliser mon premier rôle play. +15XP
6. Enfin je participe à la cérémonie de répartition dans le grand hall de Poudlard ![/justify]
[/td]
[td style="width: 190px;"][img(190px,190px)]http://vignette2.wikia.nocookie.net/es.harrypotter/images/6/6a/Hogwarts_Logo.png/revision/latest?cb=20170201023802[/img]
[/td]
[/tr]
[/table]

Ceci n'est pas une image ...

	Cher(e) Invité,
Nous avons le plaisir de vous informer que vous bénéficiez d'ores et déjà d'une inscription au collège Poudlard. Vous trouverez ci-joint la liste des ouvrages et équipements nécessaires au bon déroulement de votre scolarité. La rentrée étant fixée au 1er septembre, nous attendons votre fiche de présentation le 31 juillet au plus tard. Veuillez croire, cher(e) Invité, en l'expression de nos sentiments distingués. Minerva McGonagall Directrice adjointe
ET MAINTENANT, JE FAIS QUOI ?
1. Je vais lire et signer le règlement 2. Je lis le concept 3. Je crée ma fiche de personnage selon le modèle 4. Une fois validé, je dois aller acheter mes fournitures pour la rentrée et ouvrir un compte à Gringott. 5. (ÉTAPE BONUS) Je vais au quai 9/4 réaliser mon premier rôle play. +15XP 6. Enfin je participe à la cérémonie de répartition dans le grand hall de Poudlard !

[Shawn Gryffondor]

Bonjour Scoubifitz et merci pour le coup de main !

J'imagine que c'est le mélange HTML et BBCODE qui n'avait pas plu au système.
Tout était recodé en HTML et du coup la présentation ne ressemblait plus à rien... Mais avec ton code tout fonctionne.

Le problème est donc résolu !!