Placer un texte vertical dans mes infobulles

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

Résolu Placer un texte vertical dans mes infobulles

Message par Ombeline30 le Jeu 8 Sep 2016 - 17:41

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>


Dernière édition par Ombeline30 le Sam 10 Sep 2016 - 9:04, édité 1 fois

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Ombeline30 le Ven 9 Sep 2016 - 18:31

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

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Milouze14 le Sam 10 Sep 2016 - 6:15

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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Ombeline30 le Sam 10 Sep 2016 - 7:59

Bonjour Milouze14,

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

Je viens de tester mais cela ne change rien Rolling Eyes

Belle journée,

Ombeline.

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Milouze14 le Sam 10 Sep 2016 - 8:02

Re,
Je viens de tester mais cela ne change rien

Hum tu as fais quoi stp ?
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Ombeline30 le Sam 10 Sep 2016 - 8:06

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;

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Milouze14 le Sam 10 Sep 2016 - 8:57

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

@Ombeline30 a écrit:=

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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Placer un texte vertical dans mes infobulles

Message par Ombeline30 le Sam 10 Sep 2016 - 9:03

Re Milouze,

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

Au plaisir,

Très belle journée,

Ombeline flower

Ombeline30
***

Messages : 132
Inscrit(e) le : 11/08/2015

http://voyances-ombeline.forumgratuit.be/
Ombeline30 a été remercié(e) par l'auteur de ce sujet.

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


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