problème info bulle et apparence

[reb912]

Bonjour je re solicite encore votre aide ^^" j'ai un petit problème avec mes infos bulles sur ma page d'accueil la bulle s'affiche dans le tableau.

je vous laisse le code des infos bulles et un lien pour un aperçu:

http://black-rose.forumgratuit.org/

[reb912]

up

[[Nihil]]

Pour le premier problème, dans ton CSS pour .Deroulant, tu as "overflow: hidden". Il faut enlever cette ligne   
La valeur hidden indique de cacher tout le contenu qui dépasse de ton cadre .Deroulant, c'est de là que le problème vient

EDIT :
Pour les titres, dans ton CSS tu as ceci :

Code:

h2 {
    font-family: "Rouge Script",cursive;
    font-size: 70px;
    left: 2.3em;
    margin: -25px;
    position: relative;
    text-shadow: 2px 2px 3px;
    top: -0.4em;
}

C'est ce CSS qui crée le problème . Si tu veux styliser les h2 d'un autre endroit, pense à changer ton sélecteur CSS pour qu'il ne cible que ces h2 là (la phrase totalement incompréhensible).

J'ai vu que dans ton CSS tu avais ceci :

Code:

h2.topic-title {
    display: inline;
    margin: 0;
    padding: 0;
}

Tu peux éventuellement rajouter position: static; qui te permettra de régler ton problème à cet endroit précis

Code:

h2.topic-title {
    display: inline;
    margin: 0;
    padding: 0;
    position: static;
}

EDIT 2 : HS mais... J'aime beaucoup ta "barre" de navigation ♥

[reb912]

merci c'est super ^^ gentil et merci pour ton aide par contre j'ai toujours un problème pour mes sujets ^^".

[[Nihil]]

Pourrais tu copier ton CSS s'il te plait ?

En effet, pour ton titre, dans l'inspecteur d'élément on voit ceci :


Il faut rajouter à h2.topic-title ceci position: static; (voir mon message précédent) ^__^

[reb912]

voilà ^^ bon un peu long

Code:

body{
  margin:auto;
  }

div#banniere{
  background-image:url('http://zupimages.net/up/14/33/4b92.png');
  background-repeat:repeat-x;
  width:100%;
  height:700;
  background-position: top center;
  }


       
       
       

/***** DÉBUT QEEL *******/
    /* Permet de mettre l'image de fond du QEEL, sa grandeur et la couleur d'écriture. */
    #qeel {
      width: 817px;
      height: 679px;
      margin: auto;
      position: relative;
      color: #ffffff;
      background-image: url('http://zupimages.net/up/14/32/cmsn.png');
      border-radius: 25px 25px 0px 0px;
    }

    /* Donne sa couleur au texte */
    #qeel .gensmall {
      color: #ffffff;
    }

    /* Permet de mettre en place les groupes & donner une largeur max + les caler vers la droite */
    #groupes_qeel {
      position: absolute;
      top: 130px;
      left: 300px;
      width: 450px;
      font-weight: bold;
      text-align: right;
    }

    /* Permet de positionner toutes les infos du QEEL & donner une largeur max */
    #infos_qeel {
      position: absolute;
      top: 180px;
      left: 375px;
      width: 350px;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
    #connected .row1 {
      text-align: justify;
      width: 100%;
      background: none;
    }

    /* Permet de positionner les partenaires */
    #position_partenaires_qeel {
      position: absolute;
      top: 506px;
      left: 138px;
      width: 522px;
      height: 180px;
    }

    /* Permet de mettre en place les images de partenaire et faire l'effet. */
    #position_partenaires_qeel img {
      display: inline-block;
      position: static;
      margin: 2px;
      opacity: 0.8;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transition: all ease 1s;
    }

    /*Permet de faire l'effet sur les partenaires*/
    #position_partenaires_qeel img:hover {
      opacity: 1;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: all ease 1s;
    }
    /***** FIN QEEL *******/



#fondavatar{
background-color: #no-repeat;
padding: 10px;
moz-border-radius: 10px;
}
 
#fondprofil{
background-color:no-repeat #
padding: 10px;
moz-border-radius: 10px;
}


 .fleche {
            background-image : url("");
            width: 20px;
            height :20px;
            position : relative;
            top :50px;
            left :-19px;  }


 .bulle{
            background-color : #000000;
            border : 1px solid #FF9900;
            -moz-border-radius: 20px ;
            -webkit-border-radius:20px;
            -border-radius:20px;
            -khtml-border-radius:20px;
            padding : 5px;
            }


table.tableau_profil{
  width:280px;
  margin:auto;
  border:0;
  }
  table.tableau_profil td.haut_tab{
  width:500px;
  height:210px;
  background-image:url('http://www.zupimages.net/up/14/31/mm9n.png');
 
  }
table.tableau_profil td.milieu_tab{
  width:220px;
  background-image:url('http://zupimages.net/up/14/31/e8yn.png');
  background-repeat:repeat-y;
  padding-left:-50px;
  padding-right:-50px;
  text-align:center;
  }
  table.tableau_profil td.bas_tab{
  width:280px;
  height:210px;
  background-image:url('http://zupimages.net/up/14/31/uoda.png');
  padding-right:-50px;
  }
table.tableau_profil td.milieu_tab span.pseudo_posteur{
  font-family:Comic Sans Ms;
  font-size:12pt;
  }
 
table.tableau_profil td.milieu_tab span.rang_posteur{
  font-family:Comic Sans Ms;
  font-size:8pt;
  color:black;
  font-style:italic;
  }
 
table.tableau_profil td.milieu_tab div.infos_posteur{
  width:160px;
  margin:auto;
  padding:4px;
  text-align:left;
  font-family:Comic Sans Ms;
  font-size:10pt;
  color:white;
  background-color:#c4b6a8;
  border:1px solid white;
  opacity:0.5; /* Transparence : 0 = transparent // 1 = opaque */
  -moz-opacity : 0.5; /* Transparence pour Firefox */
    -ms-filter: "alpha(opacity=50)"; /* Transparence pour IE 8 */
    filter : alpha(opacity=50); /* Transparence pour les versions IE antérieure à la 8 */
  }
 







/* La Chatbox */
#chatbox_header .catBottom .cattitle {
color: #ffffff;

}

#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options,
#chatbox_header .chatbox-options a {
color: #ffffff;

}

body.chatbox {
background-color: #000000;
    font-size: 18px;
}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {
content: "Viens jouer avec nous !!";
 font-family: 'Sofadi One', serif;}
/* FIN */



/*ecriture du forum*/

 .secondarytitle
{
  font-size:16px;
  text-align : center;
  padding-left: 3px;
}

 
h2
{
  font-size: 70px;
font-family: 'Rouge Script', cursive;
position: relative;
      left: 2.3em;
      top: -0.4em;
margin: -25px
text-shadow: 2px 2px 3px;
}


a {
text-decoration: none!important;
  font-size: 14px;
font-family: 'sofadi one', cursive;}


a:hover {
text-decoration: none !important;
  letter-spacing :0px;
}


/*Sous forum */
.ListeSousForums a {
  font-size:12px; /* indiquez la taille du texte des liens */
  padding-right:2px; /* on rajoute un espace après le lien */
font-family: 'Sofadi One', cursive;
 color : #fd89a3 /*Couleur du texte*/;}


/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////





/* ------------------------------- CATEGORIES ------------------------------- */

a {
  text-decoration: none;
  color: #c68d1e !important;
}

a:hover {
  text-decoration: none;
}

.SF {
  width: 120px;
  height: 90px;
  overflow: auto;
  background-color: #3b0303;
  color: #fffff;
  padding: 15px;
  font-size: 12px;
  border: 2px solid #a9770d;
  -webkit-border-radius: 25px 0px 25px 0px;
  khtml-border-radius: 25px 0px 25px 0px;
  -moz-border-radius: 25px 0px 25px 0px;
  border-radius: 25px 0px 25px 0px;
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}

.derniers {
  width: 150px;
  background-color: #230202;
  height: 50px;
  color: #fffff;
  padding: 15px;
  font-size: 12px;
  border: 2px solid #a9770d;
  -webkit-border-radius: 25px 0px 25px 0px;
  khtml-border-radius: 25px 0px 25px 0px;
  -moz-border-radius: 25px 0px 25px 0px;
  border-radius: 25px 0px 25px 0px;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-duration: 0.5s;
  transition-timing-function: linear;
}

.derniers:hover {
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.cate {
  width: 125px;
  height: 125px;
  margin-top: -85px;
  margin-left: 20px;
  overflow: hidden;
  position: absolute;
  background-color: #3b0303;
  -webkit-border-radius: 50px;
 khtml-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}

.cate_img {
  position: relative;
  z-index: 2;
  width: 395px;
  height: 120px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
   
.cate:hover .cate_img {
  margin-left: 465px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
   
.cate_description {
  position: relative;
  z-index: 1;
  width: 125px;
  height: 125px;
  margin-top: -115px;
  text-align: center;
  font-size: 11px;
  color: #270202;
  padding: 2px;
  overflow: auto;
  -webkit-border-radius: 50px;
 khtml-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
    }

a.forumlink:link {
  font-size: 30px;
  margin-left: 200px;
  color: #a9770d!important;
  font-family: 'The Girl Next Door', cursive;
}

a.forumlink:hover {
  font-size: 30px;
  margin-left: 200px;
  color: #a9770d !important;
  font-family: 'The Girl Next Door', cursive;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.secondarytitle h2 {
  display: inline;
  color: #270202;
  position: static;
  font-family: 'Coming Soon', cursive;
  font-size: 36px;
  text-transform: none !important;
}

.description {
  background-color: #270202;
  width: 475px;
  height: 110px;
  color: #ffffff;
  text-align: justify;
  padding: 15px;
  font-size: 12px;
  border: 2px solid #a9770d;
  -webkit-border-radius: 25px 25px 25px 25px;
  khtml-border-radius: 25px 25px 25px 25px;
  -moz-border-radius: 25px 25px 25px 25px;
  border-radius: 25px 25px 25px 25px;
  margin-top: -10px;
}

/* ------------------------------- FIN DES CATEGORIES ------------------------------- */

/***************************** MISE EN FORME PA *****************************/

a {
  text-decoration: none !important;
}

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

.fond_PA {
  background-image: url('http://zupimages.net/up/14/32/unge.png');
  background-repeat:no-repeat;
  width:800px;
  height:850px;
  margin:0px auto;
  padding: 0px;
  border-radius: 25px 25px 0px 0px;
  color: #fbd183;
  font-size: 11px;
}

.titre_PA {
  font-family: 'Condiment', cursive;
  font-size: 45px;
  color: #fbd183;
}

.titre_bloc {
  font-family: 'Vampiro One', cursive;
  font-size: 30px;
  color: #fbd183;
  text-align: center;
}

.bloc_crédits {
  width: 200px;
  padding: 15px;
 -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

/*** STAFF ***/
.staff {
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: #fbd183;
}

.staff_img {
  position: relative;
  z-index: 2;
  height: 80px;
  margin-left: 0px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.staff:hover .staff_img {
  margin-top: -300px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.staff_description {
  position: relative;
  top: 19em;
  z-index: 1;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

/***************************** FIN MISE EN FORME PA *****************************/

/*on desactive la couleur de fond et les bordures du tableau*/
.M14_forumline {background:none !important;border:none;}
/*on desactive la couleur de fond et les bordures du bloc du titre de la P.A*/
.M14_catHead {background:none !important;border:none;}
/*on desactive la couleur de fond et les bordures du contenu du tableau*/
.M14_row1 {background:none !important;border:none;}


 /* --------------------------------- WIDGET --------------------------------- */

/* Positionnement du widget et choix du fond */
.widget {
  position: fixed;
  top: 2.9em;
  left: 3.8em;
  background-image: url('http://www.photos-public-domain.com/wp-content/uploads/2011/02/black-vertical-siding-texture.jpg');
  width: 20em;
  height: 26em;
  padding: 20px;
  z-index: 2;
}

/* Englobe le titre et le texte du widget */
.widget_interne {
  width: 17em;
  height: 21em;
  padding: 20px;
  padding-top: 0px;
  text-align: justify;
  color: #C0C0C0;
  z-index: 4;
  position: fixed;
  top: 5.5em;
  left: 5em;
}

/* --------------------------------- FIN WIDGET --------------------------------- */

.mask a{
  position: relative;
  display: block;
  width:120px;
  height: 19px;
  margin: 0px auto;
 
  background-position: -140px 0;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,.6));
}
.mask a::hover,
.mask a::focus{
  background-position: 10px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
.maska ::after{
  content:'';
  position: absolute;
  pointer-events: none;
  top:0; left:0; right:0; bottom: 0;
  background: -webkit-radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: -moz-radial-gradient(0 0,circle farthest-side, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background: radial-gradient(circle farthest-side at 0 0, rgba(255,255,255,0) 90%,rgba(255,255,255,.8) 98%,rgba(255,255,255,0) 100%) no-repeat;
  background-position: inherit;
  mask: url('#mask-firefox');
}
#menu a { 
    display:block; 
    color: #ffffff; 
    text-decoration:none; 
} 
#menu > li, 
#menu > li li { 
    position: relative; 
    display:inline-block; 
    width: 80px; 
    padding: 6px 15px; 
    background-color:#360707 ;
    background-image: linear-gradient(#000000, #000000 50%, #000000 50%,#000000); 
} 
#menu > li li { background: transparent none; } 
#menu > li li a { color: #000000; } 
#menu > li li:hover { background:#d6a033; } 
#menu > li:first-child { 
    border-right: 1px solid #777; 
    border-radius: 8px 0 0 8px; 
} 
#menu > li + li { 
    border-left: 1px solid #000000; 
    border-right: 1px solid #000000; 
} 
#menu > li:last-child { 
    border-right:0; 
    border-left: 1px solid #000000; 
    border-radius: 0 8px 8px 0 ; 
} 
#menu > li:hover { 
    background-color: #d6a033; 
    background-image: linear-gradient(#000000, #000000 50%, #000000 50%,#000000); 
} 
/* (presque) fin de la partie positionnement/déco */ 
/* dans cette déclaration, on fixe le max-height */ 
#menu ul { 
    position: absolute; 
    top: 2em; left:0; 
    max-height:0em; 
    margin:0; padding:0; 
    background-color:#000000; 
    background-image: linear-gradient(#000000,#000000); 
    overflow:hidden; 
    transition: 2s max-height 0.5s; 
    border-radius: 0 0 8px 8px; 
} 
/* ici on change la valeur de max-height au :hover */ 
#menu > li:hover ul { 
    /* adapation  */ 
    max-height:13em; 
} 



/*NAVIGATION*/

/*Bloc de l'horloge*/
.nav_bloc {
  background-image: url('http://img15.hostingpics.net/pics/909229montre2.png');
  width: 300px;
  height: 300px;
  position: relative;
  display: block;
  margin-top: -500px;
  margin-left: 290px;
}

/*Trucs pour les liens*/
.navv {
  position: absolute;
  display: block;
  z-index: 2;
}

/*Aiguille*/
#nav_aiguille {
  background-image: url('http://img15.hostingpics.net/pics/418642aiguille.png');
  width: 14px;
  height: 244px;
  bottom: 32px;
  left: 140px;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg); /*IE 9*/
  -webkit-transform: rotate(0deg); /*Opera, Chrome, and Safari*/
  transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  z-index: 1;
}

/*Positionnement des liens*/
#accueil {
  width: 100px;
  height: 27px;
  bottom: 260px;
  left: 101px;
  transform:rotate(1deg);
  -ms-transform:rotate(1deg); /* IE 9 */
  -webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */
}
#rechercher {
  width: 131px;
  height: 35px;
  bottom: 200px;
  left: 184px;
  transform:rotate(57deg);
  -ms-transform:rotate(57deg); /* IE 9 */
  -webkit-transform:rotate(57deg); /* Opera, Chrome, and Safari */
}
#membres {
  width: 94px;
  height: 28px;
  bottom: 100px;
  left: 218px;
  transform:rotate(109deg);
  -ms-transform:rotate(109deg); /* IE 9 */
  -webkit-transform:rotate(109deg); /* Opera, Chrome, and Safari */
}
#groupes {
  width: 99px;
  height: 32px;
  bottom: 21px;
  left: 144px;
  transform:rotate(157deg);
  -ms-transform:rotate(157deg); /* IE 9 */
  -webkit-transform:rotate(157deg); /* Opera, Chrome, and Safari */
}
#profil {
  width: 79px;
  height: 28px;
  bottom: 25px;
  left: 55px;
  transform:rotate(205deg);
  -ms-transform:rotate(205deg); /* IE 9 */
  -webkit-transform:rotate(205deg); /* Opera, Chrome, and Safari */
}
#mp {
  width: 115px;
  height: 39px;
  bottom: 120px;
  left: -31px;
  transform:rotate(265deg);
  -ms-transform:rotate(265deg); /* IE 9 */
  -webkit-transform:rotate(265deg); /* Opera, Chrome, and Safari */
}
#off, #on {
  width: 80px;
  height: 31px;
  bottom: 225px;
  left: 26px;
  transform:rotate(315deg);
  -ms-transform:rotate(315deg); /* IE 9 */
  -webkit-transform:rotate(315deg); /* Opera, Chrome, and Safari */
}
#s_inscrire {
  width: 107px;
  height: 37px;
  bottom: 120px;
  left: -27px;
  transform:rotate(263deg);
  -ms-transform:rotate(263deg); /* IE 9 */
  -webkit-transform:rotate(263deg); /* Opera, Chrome, and Safari */
}

/*Mouvement de l'aiguille selon le lien survolé*/
#accueil:hover ~ #nav_aiguille {
  transform:rotate(2deg);
  -ms-transform:rotate(2deg); /* IE 9 */
  -webkit-transform:rotate(2deg); /* Opera, Chrome, and Safari */
}
#rechercher:hover ~ #nav_aiguille {
  transform:rotate(57deg);
  -ms-transform:rotate(57deg); /* IE 9 */
  -webkit-transform:rotate(57deg); /* Opera, Chrome, and Safari */
}
#membres:hover ~ #nav_aiguille {
  transform:rotate(109deg);
  -ms-transform:rotate(109deg); /* IE 9 */
  -webkit-transform:rotate(109deg); /* Opera, Chrome, and Safari */
}
#groupes:hover ~ #nav_aiguille {
  transform:rotate(157deg);
  -ms-transform:rotate(157deg); /* IE 9 */
  -webkit-transform:rotate(157deg); /* Opera, Chrome, and Safari */
}
#profil:hover ~ #nav_aiguille {
  transform:rotate(205deg);
  -ms-transform:rotate(205deg); /* IE 9 */
  -webkit-transform:rotate(205deg); /* Opera, Chrome, and Safari */
}
#mp:hover ~ #nav_aiguille {
  transform:rotate(265deg);
  -ms-transform:rotate(265deg); /* IE 9 */
  -webkit-transform:rotate(265deg); /* Opera, Chrome, and Safari */
}
#s_inscrire:hover ~ #nav_aiguille {
  transform:rotate(263deg);
  -ms-transform:rotate(263deg); /* IE 9 */
  -webkit-transform:rotate(263deg); /* Opera, Chrome, and Safari */
}
#on:hover ~ #nav_aiguille, #off:hover ~ #nav_aiguille {
  transform: rotate(315deg);
  -ms-transform: rotate(315deg); /* IE 9 */
  -webkit-transform: rotate(315deg); /* Opera, Chrome, and Safari */
}

              /*FIN NAVIGATION*/

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

border-radius:10px; /*--Arrondi des QUATRES angles--*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
/*-----------------------------------------------Note :----------------------------------------
  Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
  et éditer celui ou ceux voulus.
---------------------------------------------------------------------------------------------*/
 
position:absolute; /*--Position de la boite : Fixe--*/
TOP : 780px; /*--Position à partir du haut--*/
Right: 365px;
Background-color:; /*--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: ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
}

.CADRE1{
height:26px;
margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
box-shadow:0px 2px 5px black;
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

text-align:center;
padding:5px;
background-color: #000000 ;
color: #ffffff ; /*--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.--*/
}




boîte

/* Info-bulles staff */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 200px;
  height: 500px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Info-bulles prédef */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -7.3em;
 left: -0.2em;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Images Prédef */
.imgPA {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* Images Staff */
.imgwidget {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}



.haut{
        position:fixed;
        bottom:500px;
        left:10px;}
       
.bas{
        position:fixed;
        bottom:500px;
        right:10px;}



noi

 /*FIN NAVIGATION*/

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

border-radius:10px; /*--Arrondi des QUATRES angles--*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
/*-----------------------------------------------Note :----------------------------------------
  Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
  et éditer celui ou ceux voulus.
---------------------------------------------------------------------------------------------*/
 
position:absolute; /*--Position de la boite : Fixe--*/
TOP : 780px; /*--Position à partir du haut--*/
Right: 365px;
Background-color:; /*--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: ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
}

.CADRE1{
height:26px;
margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
box-shadow:0px 2px 5px black;
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

text-align:center;
padding:5px;
background-color: # ;
color: #ffffff ; /*--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.--*/
}




boîte

/* Info-bulles staff */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
  right: -2em;
  width: 200px;
  height: 500px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Info-bulles prédef */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -7.3em;
  right: -0.2em;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Images Prédef */
.imgPA {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* Images Staff */
.imgwidget {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}


#newbottom
{
clear: both;
background-image: url(http://zupimages.net/up/14/34/cid9.png);
background-repeat: no-repeat;
background-position: center;
height: 600px;
}




.Deroulant
{
  position: absolute;
  top: 780px;
  left: 365px;
 margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
box-shadow:0px 2px 5px black;
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

text-align:center;
padding:5px;
background-color: # ;
color: #ffffff ; /*--Couleur du texte :
  border: 2px solid #000000; /* Bordure grisée de 2px sur chaque cotés */
  height: 420px;
  width: 65px;
  text-align: center; /* Alignement du texte au centre */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  transition: 1s all;
  }



#navig
{
  width: 950px;
  margin: auto;
  text-align: center;
}
#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: #cecece;
  border-bottom: 2px solid #828282;
  margin-top: -10px;
  margin-left: -10px;
  padding: 5px;
}


[[Nihil]]

Si tu rajoutes dans ton CSS ceci, est ce mieux ? :

Code:

h2.topic-title { position: static;}

[reb912]

merci *-* ça fonctionne !!!

j'aurais un autre petit problème désolé du dérangement ^^". C'est une histoire d'image. j'ai installé des images en javascript à côté de ma barre de navigation j'en ai installé dans les sujets sur la page d'accueil mais le hic, je me suis aperçu que je ne pouvais pas en installer sur la page quand je me connecte ou me déconnecter ou bien sur la page de la messagerie. je me demandais comment je pouvais faire pour y remédier ?

[[Nihil]]

Normalement c'est 1 sujet = 1 problème   .
Je pense que tu devrais mettre ce sujet en résolu et en ouvrir un nouveau en détaillant tout bien et en mettant ton code.
Enfin bon, une petite piste si tu veux chercher par toi même avant, je pense il faut regarder ce sujet là : Exécuter un code javascript sous certaines conditions, plus précisément la partie expliquant comment mettre un code seulement sur certaines pages :p.

[reb912]

oki merci ^^ en tous cas merci pour ton aide ça ma beaucoup aidé.

[Self]

..	Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif