Comment faire en sorte que mon panneau des infos reste sur toutes les pages ?

[DXiie]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis son installation
Lien du forum : http://domaine-sorrom.forumactif.org/

Description du problème

Re-bonjour, c'est encore moi!
Après la largeur de mon forum, j'ai un autre nouveau problème!
J'ai tenté de coder une barre d'infos sur le coté ( celle avec les partenaires VIP , les rumeurs ectt... ) et je pense avoir réussi mais elle n’apparaît que sur l'index. Alors que j'aimerais qu'elle reste sur toutes les pages. c:

Voici mon forum : http://domaine-sorrom.forumactif.org/

Le code de ma barre d'infos :

Code HTML

Code:

<div class="BOITE1">
                                                                                                                            
   <div class="CADRE1">
                                    <span style="font-family: Almendra;"><span style="font-size: 18px;">LE HAUT-PARLEUR</span>  </span>                                           
   </div>
                                                                                                                          
   <div align="center">
                                                    <br />          <span style="color: #F5E09B;"><strong>RUMEURS</strong> </span>                                                       
   </div>
                                                                                                                  
   <blockquote>
                                                              <span style="color: #C2AE9F;"><span style="font-size: 10px;"><em><span style="font-size: 10px;"><span style="color: #F5E09B;">" Julius aurait été aperçu en compagnie d'un loup d'une autre meute... On dit même que ce serait le chef des Whitefawn. Il y aurait été question de pacte et, surtout, de la promesse d'aide contre une autre meute... "</span></span></em> ▬ Source inconnue.</span></span>                                                       
   </blockquote><br />                                                     
   <div align="center">
                                                            <span style="color: #F5E09B;"><strong>MISTER & MISS SÖRROM</strong></span>                                                     
   </div>
                                                                                                            
   <blockquote>
                                                                                                             
      <div align="center">
                                                                                                  
         <div class="contenant">
                                                                                                                         
            <div class="contenu">
                                                                                                                      
               <div align="center">
                                                                <br />    Meilleur votant <br /> <strong>ALINA</strong>                                                   
               </div>
                                                                                                                      
            </div>
                                                                    <img src="http://i35.servimg.com/u/f35/19/51/05/60/alina210.png" />                                                   
         </div>
                                                                                                          
         <div class="contenant">
                                                                                                                     
            <div class="contenu">
                                                                                                                      
               <div align="center">
                      <br />                                                Membre le plus actif <br /> <strong>Maxime</strong>                                                   
               </div>
                                                                                                                      
            </div>
                                                                    <img src="http://orig11.deviantart.net/276a/f/2016/220/6/0/90_98_by_dumdog-dad3rag.png" />                                                   
         </div>
                                                                                                  
      </div>
                                                                                                               
   </blockquote>
                                                                                          
   <div align="center">
                                                    <br />          <span style="color: #F5E09B;"><strong>PARTENAIRES VIP</strong> </span>                                                       
   </div>
                                                                                                                  
   <blockquote>
                                                                                   
      <ul>
                        
         <div class="staggered-partners">
                         
            <div align="left">
                                                               <a href="http://endrpg.forumactif.org/" title="End - Forum RPG Canins Réels" class="partner-link" target="_blank"><img src="http://i.imgur.com/7wp3j3Q.png" alt="Never Utopia" /></a>       
            </div>
                                                     
         </div>
                                                                        
      </ul>
                                                                                               
   </blockquote>
</div>
            <br /> 

Et mon CSS :

Code:

#i_logo {
  width: 100%;
}



a.mainmenu img{
display: none;
}


/*
 * ------------------------------
 * BLOC PARTENAIRES AVEC DECALAGE
 * Libre service - Never Utopia
 * ------------------------------
 */

/* Bloc contenant les partenaires */
.staggered-partners {
  font-size: 0; /* ne pas enlever */
  width: 591px;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Affichage pour un lien partenaire */
.staggered-partners .partner-link {
  display: inline-block;
  width: 88px; /* largeur */
  height: 31px; /* hauteur */
  margin-right: 20px;
}

/* Style image du partenaire */
.staggered-partners .partner-link img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: transform 600ms;
  transition: transform 600ms;
}

/* Effet au survol sur image */
.staggered-partners .partner-link:hover img {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  z-index: 1;
}

/* Decalage a gauche une ligne sur 2 */
.staggered-partners .partner-link:nth-child(14n+8) {
  margin-left: 55px;
}

/* Suppression de la marge à droite une ligne sur 2 */
.staggered-partners .partner-link:nth-child(14n) {
  margin-right: 0;
}

/* Style quand le lien n'a pas d'image */
.staggered-partners .partner-link:empty {
  display: none;
}

/* Crédit */
.credits-partners {
    margin-top: 10px;
    font-size: 12px;
    text-align: right;
    font-family: sans-serif;
    opacity: 0.3;
    transition: all 1s;
    -webkit-transition: all 1s;
}

/* Lien */
.credits-partners a {
    text-decoration: none;
    color: black;
}

/* Apparition du crédit au survol du bloc */
.staggered-partners:hover .credits-partners {
    opacity: 1;
}

/*------------------------------
 * FIN BLOC PARTENAIRES AVEC DECALAGE
 * ------------------------------ */






div.contenant {
    width:145px;  /*largeur du contenant, la meme que celle de l image*/
    height:65px; /*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;
  box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
text-align:center;
}
 div.contenu {
    width: 145px;  /*largeur du contenu, la meme que celle de l image*/
    height: 65px; /*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
 }
.contenant img {
    width:145px; /*largeur de l image*/
    height:65px;  /*hauteur de l image*/
    position: relative; 
    bottom: 65px; /*ici mettre la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}
.contenant:hover img {  /*au survol de la souris sur le bloc*/
    bottom: 6565px; /*ici mettre deux fois la hauteur de l image*/
    transition: 9.5s;  /*pour l effet de transition*/

}



.BOITE1 { 
width:230px; /*--Largeur à éditer en fonction de la taille de ton forum (en px ou %)--*/
height:716px;/*--Hauteur à changer en fonction de ton texte--*/
box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;

/*-----------------------------------------------Note :----------------------------------------
  Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
  et éditer celui ou ceux voulus.
---------------------------------------------------------------------------------------------*/
 
position:fixed; /*--Position de la boite : Fixe--*/
TOP : 0px; /*--Position à partir du haut--*/
LEFT: 1px;
Background-color:#705F53; /*--Couleur de fond : supprimer pour mettre en transparent--*/
padding:5px;/*--Marge intérieure générale--*/
padding-top:4px;/*--Marge intérieure du haut, éditée "à la place" de la bordure générale--*/
text-align:justify; /*--Alignement du texte : "right" -> droite ; "left" -> Gauche ; "justify" -> justifié . --*/
Color: #C2AE9F; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
}

.CADRE1{
height:30px;
margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
padding:5px;
background-color: #171310 ;
color: #F5E09B ; /*--Couleur du texte :
  Note : le vert donné n'était pas le bon donc à éditer si ça ne convient pas--*/
font-family: GEORGIA ; /*--Typo du titre souhaité--*/
font-size: 14px ;  /*--Taille de la typo--*/
text-shadow:1px 1px 2px black;
/*--Note : le contraste vert-rouge était trop fort je me suis permise de rajouter une bordure d'ombre au texte
Ce qui aidera à lire le vert par dessus le rouge normalement. A supprimer si inconvenant.--*/
}






.navig {
position: fixed;
top: 0px;
width: 100%;
background-color: #171310;

}



/*** PROFIL BY BATTY POUR SORROM ***/
.bls_profil {
  width: 220px;
  background-color: #45382F;
  box-shadow: 0px 0px 1px #000;
text-align: center;
border-radius: 100px;
padding-top: 50px;
padding-bottom: 70px;}

.bls_avatar {
  width: 200px;
  height: 320px;
  border: 1px solid white;
  border-radius: 5px;
  overflow:hidden;
  margin: 10px auto;
}

.bls_avatar img{
  width: 200px;
  height: 320px;
}

.bls_pseudo{
  width: 220px;
  text-align:center;
  font-size: 28px;
}

.bls_pseudo a{
  font-family: 'Almendra', serif;
}

.bls_rang{
  width: 90%;
  text-align:center;
  font-family:'Times New Roman';
  font-size: 11px;
  padding: 1px;
  text-transform: uppercase;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  tete-align:center;
  margin: auto;
}

.bls_liens{
  width: 200px;
  height: auto;
  text-align: center;
  margin: 0px auto 10px auto;
}

.bls_infos-profil{
  width: 200px;
  height: auto;
  text-align: justify;
  padding: 4px;
  border: 1px solid white;
  background-color: #705F53;
  font-size: 9px;
  line-height: 11px;
  color: white;
  margin: 0px auto 10px auto;
}

/*-------------------------------------------------------*/



#chatbox_header .catBottom .cattitle {
    color:#F5E09B;
}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Une autre bière, c'est ma tournée! "; }  /* Modifier NOM par le titre que vous désirez */

body.chatbox {
    background-color:#45382Fr;
}

/* QUEEL */
#QEEL {
      background: #45382F;
      margin: auto;
      text-align: justify;
      width: 750px; /* Modifier la valeur pour changer la taille */
      padding: 5px;
  }

.groupes {
      margin: auto;
      text-align: center;
      padding: 2px;
  }

.groupes a {
      /* Marges pour écarter les liens les uns des autres */
      margin-left: 10px;
      margin-right: 10px;
      /* Styles du lien */
      font-family: 'Almendra', serif;
      font-style: bold;
      font-size: 22px;
      color: #705F53;
      font-weight: bolder;
  }



.bodyline
{

padding: 0;
}

.bodyline {
padding-top: 0px;
}



/* CATEGORIES */

.derniermessage {
  font-size: 10px;
  width: 150px;
  margin-top: 5px;
  margin-bottom: 3px;
  padding-bottom: 8px;
  padding-top: 8px;
  padding:5px;
  background-color: #45382F;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
}

.DescForum {
  width: 25%;
  margin: 6px 2px 5px 10px;
  background: #45382F;
  padding:10px;
  text-align:justify;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
 }


/* Forcer le conteneur des flottants à leur taille */
.BlocForum:after {
  display:table;
  content:"";
  clear:both;
}

/* Positionnement de la description des forums */
.FloatDescForum {
  float:left;
  width:59%;
}

/* Positionnement de la liste des sous-forums */
.ListeSousForums {
  float:left;
  width:20%;
}

.ListeSousForums a {
  display:block;
  background: #45382F;
  margin:2px 0;
  -moz-border-radius : 6px;
  -webkit-border-radius : 6px;
  border-radius : 6px;
  font-size: 9px;
  text-align: center;
}




/* LIENS SANS SOULIGNEMENT */
a, a:hover {
    text-decoration: none !important;
}






/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 8px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}

::-webkit-scrollbar-track {
  background-color: #705F53; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #F7FAC0 /*couleur de l'ascenseur*/;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;}

**************


.forumline {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:5px solid #couleur;
}


.forumline {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}



**************



 

 
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}






/*====================================================
                    NAVIGATION
====================================================*/

.batty_navig {
position: absolute;
top: 0px;
width: 20%;
  border-bottom: 1px solid #727477;
  background-color:#d1ebfa;
  position: fixed;
  z-index:10;
}

a.mainmenu {
margin: 5px;
font-family: 'Averia Gruesa Libre', cursive;
font-size: 12px;
  text-transform:uppercase;


}

/*====================================================
                    NAVIGATION-END
====================================================*/
/*====================================================
                    PAGE D'ACCEUIL
====================================================*/



.battypa_bienvenue{
  font-size: 28px;
  width:400px;
  height:130px;
  overflow:hidden;
  padding-top:-20px;
  text-align:center;
font-family: 'Almendra', serif;
  text-transform:uppercase;
  color:#C2AE9F;
  letter-spacing:-5px;
}

.battypa_liens{
width:310px;
  height:120px;
  background-color:#45382F;
  color: #E3D9C1;
  font-size:11px;
overflow:hidden;
padding:5px;
text-align:center;
}

.battypa_tittres{
display: block;
width:auto;
text-align:center;
font-family: 'Architects Daughter', cursive;
color:#E3D9C1;
letter-spacing:-1px;
font-size: 20px;
text-transform:uppercase;
}

.battypa_contexte{
display: inline-block; 
width:450px;
  height:160px;
  background-color:#45382F;
  color: #E3D9C1;
  font-size:11px;
 border-bottom: 2px solid #E3D9C1;
 padding-bottom:2px;
overflow:auto;
padding:5px;
text-align:justify;
}

.battypa_partenaires{
display: inline-block;
width:250px;
height:300px;
border-bottom: 2px solid #E3D9C1;
 padding-bottom:2px;
background-color:#45382F;
overflow:auto;
text-align: center;
}

.battypa_rp{
  width:300px;
  height:140px;
  overflow:hidden;
  font-size:11px;
  border-bottom: 2px solid #E3D9C1;
 padding-bottom:2px;
  background-color: #45382F;
  padding:5px;
  color: #E3D9C1;
}

.battypa_image{
display:inline-block;
width:130px;
  height:130px;
  background-image:url('http://orig05.deviantart.net/84e6/f/2016/220/9/c/dotw___bonjour_by_ixsln_d9dye2d_by_dumdog-dad4n1c.png');
  border-radius: 100px;
  overflow:hidden;
  vertical-align: middle;
  text-align:center;
}

.battypa_new{
  width:390px;
  height:130px;
  overflow:auto;
  font-size:11px;
  padding:5px;
  background-color:#45382F;
}

.contenustaff{
  display: inline-block;
  position:relative;
  width: 136px;
  height: 61px;
  background-color:#45382F;
  color: #E3D9C1;
  overflow: hidden;
  padding: 2px;
  margin:5px 7px;
  text-align:center;
  font-size:11px;
}

.contenustaff img {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 3s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
  }

.contenustaff:hover img {
  transform: translateX(-140px);
  -moz-transform: translateX(-140px);
  -o-transform: translateX(-140px);
  -webkit-transform: translateX(-140px);
}

.pseudo{
  display:block;
  font-family:Swis721 LtEx BT;
  font-variant: small-caps;
  font-size: 16px;
  text-align:center;
  color: #ffffff;
  text-shadow: 1px 1px 5px black;
}

.battypa_textenew{
 display:block;
 width: auto;
 border-bottom: 2px solid #E3D9C1;
 padding-bottom:2px;
 color: #E3D9C1;
}

/*====================================================
                  PAGE D'ACCEUIL-END
====================================================*/
/*====================================================
                      CATÉGORIE
====================================================*/

 
a:hover {text-decoration: none !important}

.secondarytitle h2 {
  display:block;
  width:500px;
  height: auto;
  font-family: 'Rock Salt', cursive;
  font-family: 'Rock Salt', cursive;
  letter-spacing:-1px;
  text-transform:uppercase;
  font-size:16px;
  font-weight:normal;
  text-align:center;
  margin-bottom:-30px;
  color:#fffaed;
  }

a.cattitle {
display:block;
font-size: 18px;
 font-family: Georgia;
  color: #E30E30;
text-align:center;
}
 
.battycat_sousliens {
  width:530px;
  height: 15px;
  text-transform:uppercase;
  padding-top: 10px;
  margin-top: -18px;
  text-align: center;
}

.battycat_sousliens a {
  font-size: 9px;
  color:#755113;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
  font-variant: small-caps;
}
 
.forums-liens {
width:130px;
  height: 15px;
  text-transform:uppercase;
  padding-top: 10px;
  margin-top: -18px;
  text-align: justify;
}

.forums-liens a {
  font-size: 9px;
  color:#755113;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
  font-variant: small-caps;
}


a.forumlink {
font-size: 18px;
margin-top:35px
font-family: 'Almendra', serif;
font-family: 'Almendra', serif;
text-decoration: none!important;
text-align:fixed;
text-decoration: none;
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 3px solid #FFFFFF;
color : #B56B4F;
display: block; }
 
.descrip {background-image: url("adresse de l'image");
}

a.forumlink:hover{
font-size: 19px;

font-family: 'Almendra', serif;
font-family: 'Almendra', serif;
text-align:center;
}

.descriptions-categories {
  bacgkround: #COULEURFOND url('IMAGE-FOND') top center no-repeat;
  border : 2px solid #COULEURBORDURE;
  -moz-border-radius : XXpx;
  -webkit-border-radius : XXpx;
  background-color:#45382F;
  border-radius : XXpx;
}
 
/*====================================================
                  CATÉGORIE - END
====================================================*/

 
 
 
/*Pseudo Profil*/
 
  .name{
font-size : 12px;
font-family: 'Arial', serif;
text-align: center;
letter-spacing: -1px;
text-shadow: 0px 0px 0px #919191
}
 
/*Fin Pseudo Profil*/
 
 
.statistiques{
border:0px;
background-repeat: no-repeat;
background-position: center;
height:hauteur de l'imagepx;}

.groupes{
font-size: 20px;
  letter-spacing:10px;
  font-weight:bold;
  font-family: 'Playball';
  margin:auto;
  text-shadow: 0px 1px 0px #e3d9e8;}
 
 
 
.ListeSousForums {
  font-size:0px;
}

.ListeSousForums a {
  font-size:10px; /* indiquez la taille du texte des liens */
  padding-right:5px; /* on rajoute un espace après le lien */
}

/* pour les navigateurs qui acceptent la pseudo-classe :last-child, on supprime l'espace final qui ne sert à rien */
.ListeSousForums a:last-child {
  padding-right:0px;
}
 

 
 

Merci d'avance!

DXiie

[MlleAlys]

Bonjour,
ça serait mieux de mettre vos codes entre balises code plutôt qu'entre balises spoiler.

Concernant votre problème, comment avez vous installé votre colonne ? Dans un template ? Via un javascript ? La page d'accueil ?

[DXiie]

Bonjour,
ça serait mieux de mettre vos codes entre balises code plutôt qu'entre balises spoiler.

Concernant votre problème, comment avez vous installé votre colonne ? Dans un template ? Via un javascript ? La page d'accueil ?

J'ai mal compris pardon! xD
Non, je l'ai installé sur la page d’accueil!

[MlleAlys]

non je veux dire, votre colonne est actuellement déjà installée, mais par quel moyen ?

[DXiie]

J'ai édité mon premier message, désolé!
Je l'ai installé via la page d'accueil. c:

[MlleAlys]

La page d'accueil ne s'affiche que sur la page d'accueil, donc normal !

On peut appliquer le panneau via un javascript :
- rendez-vous dans modules > gestion des codes javascripts
- vérifiez que la gestion des codes est cochée sur OUI
- créez un nouveau code
- donnez lui un titre, par exemple "barre d'info"
- cochez "sur toutes les pages" pour la voir s'afficher sur toutes les pages du forum
- dans la zone de saisie coller le code suivant :

Code:

$(function()  {
  $("body").eq(0).append('<div class="BOITE1" style="text-align:center; color: #F5E09B;">

  <div class="CADRE1" style="font-family: Almendra; font-size: 18px;">LE HAUT-PARLEUR</div>



  <div style="font-weight:bold;">RUMEURS</div>

  <blockquote style="font-size: 10px; font-style:italic;">" Julius aurait été aperçu en compagnie d\'un loup d\'une autre meute... On dit même que ce serait le chef des Whitefawn. Il y aurait été question de pacte et, surtout, de la promesse d\'aide contre une autre meute... "
    <span style="color:#C2AE9F; font-style:normal;">▬ Source inconnue.</span>
  </blockquote>
  <br />



  <div style="font-weight:bold;">MISTER & MISS SÖRROM</div>                                                   
  <div class="contenant">
    <div class="contenu">
      <br />Meilleur votant
      <br /><strong>ALINA</strong>                                                   
    </div>
    <img src="http://i35.servimg.com/u/f35/19/51/05/60/alina210.png" />
  </div>

  <div class="contenant">
    <div class="contenu">
      <br />Membre le plus actif
      <br /><strong>Maxime</strong>                                               
    </div>
    <img src="http://orig11.deviantart.net/276a/f/2016/220/6/0/90_98_by_dumdog-dad3rag.png" />                                                   
  </div>
  <br/>



  <div style="font-weight:bold;">PARTENAIRES VIP</div>                                                       
  <div class="staggered-partners">

    <a class="partner-link" target="_blank" href="http://endrpg.forumactif.org/">
      <img src="http://i.imgur.com/7wp3j3Q.png" />
    </a>

  </div>



</div>'); });

J'ai simplifié un peu la structure pour la rendre plus facile à modifier, normalement le rendu devrait être le même.

Attention : les guillemets utilisés doivent être des "..." et tous les apostrophes doivent être précédés d'un dash \ comme je l'ai fait pour ceux dans la rumeur. Si vous oubliez de mettre un dash devant un apostrophe, alors le javascript ne sera plus compréhensible et la colonne ne sera pas affichée.

Remarque : votre colonne ne va pas jusqu'en bas sur mon écran, jen e sais pas si c'est fait exprès ou non, mais si non, remplacez dans son css height: 716px; par bottom:0; La colonne prendra alors toute la hauteur de l'écran quelque soit la taille de celui-ci.

[DXiie]

Merci beaucoup! Pour l'affichage sur toutes les pages, cela marche !
Mais votre code me donne cela :

https://i.gyazo.com/46f248a0fd09f610ff299cc42f9ce010.png

:/

[MlleAlys]

Ah oui, quelques réglages à ajouter maintenant que la colonne se trouve dans la page et non plus dans l'accueil.
Pourriez-vous l'afficher sur votre forum le temps de régler ça ?

[DXiie]

Bien sur c: je fais ça de suite!

[MlleAlys]

- Supprimez le code css suivant de votre feuille de style :

Code:

.staggered-partners {
  font-size: 0;
  margin: 25px auto;
  width: 591px;
}

- ajoutez margin:auto; au css de contenant pour centrer automatiquement les blocs, ce qui donne :

Code:

div.contenant {
  -moz-box-shadow: 0 2px 5px #000;
  -webkit-box-shadow: 0 2px 5px #000;
  box-shadow: 0 2px 5px #000;
  height: 65px;
  overflow: hidden;
  text-align: center;
  width: 145px;
  margin: auto;
}

- Ajoutez font-family: Verdana,Arial,Helvetica,sans-serif; et font-size:12px; au css de BOITE1 ce qui donne :

Code:

.BOITE1 {
  -moz-box-shadow: 0 2px 5px #000;
  -webkit-box-shadow: 0 2px 5px #000;
  background-color: #705F53;
  box-shadow: 0 2px 5px #000;
  color: #C2AE9F;
  height: 716px;
  left: 1px;
  padding: 4px 5px 5px;
  position: fixed;
  text-align: justify;
  top: 0;
  width: 230px;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 12px;
}

Puis dans le code javascript, ajoutez des retours à la ligne <br/> là où vous le souhaitez

[DXiie]

Merci encore, ça marche!
Je met ce sujet comme résolu!

PS : Si je veux mettre une autre barre d'infos de l'autre coté, j'aurais juste à faire pareil ?

[MlleAlys]

Pareil, sauf qu'au lieu de coller la BOITE à gauche en mettant left:0; dans le css vous la collerez à droite en mettant right:0;
Cependant, attention, vérifiez l'affichage sur les petits écrans...

[DXiie]

Compris!
Merci encore c:

[MlleAlys]

(Ah et du coup également il faudra lui donner un autre nom que "BOITE1" pour pouvoir les différencier !)