Placer un texte vertical dans mes infobulles

[Ombeline30]

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://voyances-ombeline.forumgratuit.be/

Description du problème

Bonjour,

Voilà, tout est dans le titre je ne parviens pas à placer mon texte dans le sens de la longueur de mes images en colonne histoire de combler le vide que ça engendre tel que cela est, pouvez-vous m'aider s'il vous plaît ?

Donc en gros je souhaiterais avoir un effet similaire :



Merci,

Au plaisir,

Ombeline.


Voici la partie CSS de ma page d'accueil dans laquelle se trouve ces infobulles (pour le staff) :

Code:

/*....Page d'accueil....*/
.cadre-principal {
  display:block;
  background-color:#302117 ;
  background-repeat: no-repeat;
  background-position: top center;
  width:940px;height:auto;}
.contexte {
float:left;
display:block;
overflow: auto;
background: #1d0300;
height:260px;
width:330px;
padding:5px;
position:relative;
top: 40px; left: 20px;
border: 2px solid #c19161;
text-align: center;
font-size:18px;
}
.image {
float:left;
display:block;
background: #c19161;
height:333px;
width:236px;
position:relative;
top: 50px; left: 30px;
}
.staff {
float:left;
display:block;
background: #1d0300;
overflow: auto;
height:190px;
width:289px;
padding:5px;
position:relative;
top: 40px; left: 40px;
border: 2px solid #c19161;
}
.new {
float:left;
display:block;
background: #1d0300;
overflow: auto;
height:150px;
width:289px;
padding:5px;
position:relative;
top: 50px; left: 40px;
border: 2px solid #c19161;
}
.topsite {
float:left;
display:block;
background: #1d0300;
overflow: auto;
height:80px;
width:330px;
padding:5px;
position:relative;
top: -45px; left: 20px;
border: 2px solid #c19161;
}
.partenaire {
float:left;
display:block;
background: #1d0300;
overflow: auto;
height:60px;
width:880px;
padding:10px;
position:relative;
top: -30px; left: 20px;
border: 2px solid #c19161;
}
.titre1{
  height:25px; width: 70%px;
  color:#D9744E;font-size:40px;
  text-align:center;text-shadow:1px 1px 0px #000;
  }
 .titre2 {
color:#D9744E;
border-bottom: 1px dotted #d9744e;
font-size:20px;
text-align: center;
text-shadow:1px 1px 1px #000;
font-family: 'Berkshire Swash', cursive;
margin-top:-10px;}
   
.titre3{
  color:#7D552B;font-size:12px;
  text-align:center;
  font-style: italic;
  margin-top: 450px;}

div.infobulle{
position: relative;
float: left ;
padding:5px;
}

div.infobulle span{
display: none;
}

div.infobulle:hover{
background: none;
z-index: 999;
}

div.infobulle:hover span
{
display: inline;
position: absolute;
top: 5px; left: 5px;
}
div.infobulle span{
  position: absolute;
  background: #302117;
  border: 2px solid #c19161;
  color:#d9744e;
  font-size:10px;
  text-align:center;
  width: 50px;
  height: 155px;
}
/*....fin page d'accueil....*/

Et ici le HTML de la page d'accueil :

Code:

<div class="cadre-principal">
                                                                                                                                                                                                                
   <div class="titre1">
                                                                                                                      <link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" type="text/css" /> <span style="font-family: 'Berkshire Swash', cursive;">Bienvenue sur le Forum</span>                                                                           
   </div>
                                                                                                      
   <div class="contexte">
                                                                                                                                                                           
      <table>
                                                                                                                                                                              
         <tbody>
                                                                                                                                                                                 
            <tr>
                                                                                                                                                                                    
               <td>
                                                                                                                                                                                       
                  <div class="titre2">
                                                                                                       Poème d'Accueil                                                       
                  </div>
                                                                                                        Il était une fois, dans un monde, en des temps reculés, une cartomancienne qui eut une vision, un ressenti bien marqué. En train, vers son destin, elle chemina apaisée. En Ésotérie, elle parvint, les cartes ne s'étaient pas trompées ! (Par Ombeline)                                                                       
               </td>
                                                                                                                                
            </tr>
                                                                                                                           
         </tbody>
                                                                                                                        
      </table>
                                                                                                                     
   </div>
                                                                                                      
   <div class="image">
                                                                                                                                                                         
      <table>
                                                                                                                                                                            
         <tbody>
                                                                                                                                                                               
            <tr>
                                                                                                                                                                                  
               <td>
                                                                                        <img style="width: 230px; height: 327px;" src="http://i35.servimg.com/u/f35/18/27/94/56/sans_t13.jpg" />                                                   
               </td>
                                                                                                                            
            </tr>
                                                                                                                       
         </tbody>
                                                                                                                      
      </table>
                                                                                                         
   </div>
                                                                                                      
   <div class="staff">
                                                                                                                                                                         
      <table>
                                                                                                                                                                            
         <tbody>
                                                                                                                                                                               
            <tr>
                                                                                                                                                                                  
               <td>
                                                                                                                                                                                     
                  <div class="titre2">
                                                                                                       Le Staff                                                                                   
                  </div>
                                                                                                                                           
                  <div class="infobulle">
                                                                                     <img src="http://i35.servimg.com/u/f35/13/93/15/59/ava_pa10.png" /><span>Ombeline <br /> Fondatrice</span>                                                                 
                  </div>
                                                                                                                                       
                  <div class="infobulle">
                                                                                     <img src="http://i35.servimg.com/u/f35/17/14/09/65/ava_pa11.png" /><span>Gaiane <br /> Modo</span>                                                                 
                  </div>
                                                                                                                                                                           
               </td>
                                                                                                                              
            </tr>
                                                                                                                         
         </tbody>
                                                                                                                          
      </table>
                                                                                                         
   </div>
                                                                                                      
   <div class="new">
                                                                                                                                                                           
      <table>
                                                                                                                                                                              
         <tbody>
                                                                                                                                                                                 
            <tr>
                                                                                                                                                                                    
               <td>
                                                                                                                                                                                       
                  <div class="titre2">
                                                                                                       Les Nouveautés                                                                                     
                  </div>
                                                                                                  ♥25/08/16: 1ère soirée "Tea Party" (soirée "blabla") ce soir à 19h<br /> ♥23/08/16: Ouverture officielle de la section dédiée à l'organisation des soirées "Tea Party"<br /> ♥12/08/16: Nouvelle PA (merci Cerise) <br />♥08/08/16: Nouvelle ChatBox repensée par mes soins<br /> ♥03/08/16: Nouveau QEEL (merci Lixyr)<br />                                                                               
               </td>
                                                                                                                                
            </tr>
                                                                                                                             
         </tbody>
                                                                                                                            
      </table>
                                                                                                                 
   </div>
                                                                                                      
   <div class="topsite">
                                                                                                                                                                           
      <table>
                                                                                                                                                                              
         <tbody>
                                                                                                                                                                                 
            <tr>
                                                                                                                                                                                    
               <td>
                                                                                                                                                                                       
                  <div class="titre2">
                                                                                                       Votez pour Nous                                                                                     
                  </div>
                                                                                        <a target="_blank" href="http://www.root-top.com/topsite/forumsdeforumactif/in.php?ID=14"><img class="image-top" src="http://i35.servimg.com/u/f35/13/93/15/59/icone_10.png" /></a> <a target="_blank" href="http://www.root-top.com/topsite/esoterique/in.php?ID=1356"><img class="image-top" src="http://i35.servimg.com/u/f35/13/93/15/59/icone_10.png" /></a> <a target="_blank" href="http://audeladesvoyances.boosterforum.com/"><img class="image-top" src="http://i35.servimg.com/u/f35/13/93/15/59/icone_10.png" /></a> <a target="_blank" href="http://www.root-top.com/topsite/blue_spirit/in.php?ID=369"><img class="image-top" src="http://i35.servimg.com/u/f35/13/93/15/59/icone_10.png" /></a>                                                                                                           
               </td>
                                                                                                                                
            </tr>
                                                                                                                           
         </tbody>
                                                                                                                        
      </table>
                                                                                                                     
   </div>
                                                                                                            
   <div class="partenaire">
                                                                                                                                                         
      <table>
                                                                                                                              
         <tbody>
                                                                                                                       
            <tr>
                                                                                                                            
               <td>
                                                                                                                         
                  <div class="titre2">
                                                                                                       Nos Partenaires                                                                                     
                  </div>
                                                                                                                                                                                                         
                  <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                                                                                       <a target="_blank" href="http://art-the-fruits.forumpro.fr/"><img src="http://i35.servimg.com/u/f35/11/92/62/51/logo_812.png" /></a> <a target="_blank" href="http://www.forumsdeforumactif.com"><img title="L'Annuaire" alt="L'Annuaire" border="0" src="http://www.aht.li/2889210/ban_mini_88_31.png" /></a> <a target="_blank" href="http://la-porte-est-en-dedans.over-blog.com/"><img src="http://i35.servimg.com/u/f35/18/95/70/55/image510.png" /></a> <a target="_blank" href="http://www.ouaf-ouaf-pub.com/"><img src="http://nsa38.casimages.com/img/2016/03/30/160330064818912134.png" border="0" alt="titre" /></a>                               
                  </marquee>
                                                                                                                             
               </td>
                                                                                                                                  
            </tr>
                                                                                                                               
         </tbody>
                                                                                                                          
      </table>
                                                                                                                           
   </div>
                                                                                                      
   <div class="titre3">
                                                      Design@ <a href="http://art-the-fruits.forumpro.fr/" target="_blank"> Cerise </a> - PA@ <a href="http://art-the-fruits.forumpro.fr/" target="_blank"> Cerise </a> - Catégories@ <a href="http://www.forumsdeforumactif.com/"> Lixyr et kilinah</a> - QEEL@ <a href="http://www.forumsdeforumactif.com/">Lixyr</a>                                                           
   </div>
</div>

[Ombeline30]

Un petit up pour avoir de l'aide s'il vous plaît

[Invité]

Hello Ombeline30,


un peu de renseignements ici:
https://developer.mozilla.org/fr/docs/Web/CSS/writing-mode

Dans ta feuille de style:

ici:

Code:

 
div.infobulle span


ajoutes ceci:

Code:


writing-mode: sideways-lr;


Le texte sera positionné à gauche.


a++

[Ombeline30]

Bonjour Milouze14,

Et un grand merci pour ta réponse ;-)

Je viens de tester mais cela ne change rien

Belle journée,

Ombeline.

[Invité]

Re,

Je viens de tester mais cela ne change rien

Hum tu as fais quoi stp ?
a++

[Ombeline30]

Re

Alors j'ai repéré ceci:

Code:

div.infobulle span{
display: none;
}

Et j'y ai ajouté ce que tu m'as mis ce-dessus => writing-mode: sideways-lr;

[Invité]

Re,
désolé des problèmes de box pffffff.

=

Code:

div.infobulle span{
display: none;
}

Ok , avec Firefox çà fonctionne, on va jouer alors avec la compatibilité des navigateurs.

Supprimes ceci:

Code:


writing-mode: sideways-lr;


et remplaces par:

Code:

 
 -ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;


a++

[Ombeline30]

Re Milouze,

Vraiment un grand merci pour ta précieuse aide tout fonctionne nickel

Au plaisir,

Très belle journée,

Ombeline