*RESOLU* Texte contournant une image dans un tableau

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

Emc2
avatar
Membre

MessageEmc2

  • 16px
  • 24px
  • Zoom
Bonjour,
dans une div, j'ai placé une table. dans cette table, la première cellule contient une image, la seconde un texte. La longueur du texte fait qu'il descend bien plus bas que la hauteur de l'image. le résultat est qu'il y a un espace disgracieux sous l'image. mon but serait de faire continuer le texte sous l'image au lieu de rester du même côté de sa cellule. Voir illustrations :

Ce que j'ai actuellement:

Ce que j'aimerais obtenir:

Et voici le code et le tableau que j'utilise et qui se trouve dans la description d'un forum.
Code:
<div style="background-color:#4b4a4a; margin-left: 130px; width:600px; border:solid 4px #0027f0; border-radius: 15px;">
                                                                    
 <center>
                  
 <table>
                                    
 <tbody>
 <tr>
                                  
 <td>
                  <img src="https://i.servimg.com/u/f11/19/49/33/80/camelo13.png" />                  
 </td>
                                  
 <td>
                            
 <p style="text-align: center;">
                                                         <strong><span style="font-size: 14px; line-height: normal; color: #ffffff;">Cette planète, éloignée des trois lieux que sont Castiana, Sahal, Vagonbrei a été visitée par Arthur et ses chevaliers dans leur quête du Saint Graal. Ses habitants attendent depuis des générations son retour. SG-1 explora Camelot dans le but d'obtenir des indices sur l'arme Anti-Ori développée par Merlin.  Malheureusement, ils échouèrent, mais le contenu de la bibliothèque de Merlin peut les aider contre les olympiens.</span></strong>                                                    
 </p>
                          
 </td>
                                        
 </tr>
                                    
 </tbody>
 </table>
                  
 </center>
                                                                                                                                        
</div>

A noter également que le texte débute trop bas par rapport à l'image, serait-il possible également de le remonter un peu plus. j'ai tenté avec un "padding", mais rien à faire.

Merci par avance.


Dernière édition par Emc2 le Lun 10 Juil 2017 - 10:43, édité 1 fois
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Bruno,
ce code html devrait fonctionner:
Code:
   
<div style="background-color:#4b4a4a; margin-left: 130px; width:600px; border:solid 4px #0027f0; border-radius: 15px;">
                                                                                    
   <center>
                                     
      <table>
                                                          
         <tbody>
                   
            <tr>
                                                              
               <td>
                  <div style="height:150px:"><img src="https://i.servimg.com/u/f11/19/49/33/80/camelo13.png" style="float:left;" />                                                                 
                     <div style="font-size: 14px; line-height: normal; color: #ffffff;">
                        <strong>Cette planète, éloignée des trois lieux que sont Castiana, Sahal, Vagonbrei a été visitée par Arthur et ses chevaliers dans leur quête du Saint Graal. Ses habitants attendent depuis des générations son retour. SG-1 explora Camelot dans le but d'obtenir des indices sur l'arme Anti-Ori développée par Merlin.  Malheureusement, ils échouèrent, mais le contenu de la bibliothèque de Merlin peut les aider contre les olympiens.</strong> 
                     </div>
                                                                            
                  </div>
                                       
               </td>
                                                                                                
            </tr>
                                                             
         </tbody>
                
      </table>
                                     
   </center>
                                                                                                                                                      
</div>




En fait pour un contenu il faut toujours utiliser une div au lieu d'un span.

Tu as placé deux cellules td entre un tr, ce qui est bon,
mais pour avoir le style désiré, j'ai supprime un td et ajouté une div qui englobe tout avec une hauteur de définie et ensuite l'image qui a un float left et enfin le texte clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Emc2
avatar
Membre

MessageEmc2

  • 16px
  • 24px
  • Zoom
Ok, merci, je comprends mieux. Avec la div, je redéfini un espace global et son style. Merci, et en plus ça m'ouvre d'autres perspectives. Je résous le sujet.
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



Administrateur des forums



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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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