problème info bulle et apparence

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

Résolu problème info bulle et apparence

Message par reb912 le Mar 19 Aoû 2014 - 23:52

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/



Dernière édition par reb912 le Mer 27 Aoû 2014 - 20:09, édité 1 fois

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par reb912 le Mer 20 Aoû 2014 - 22:02

up

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par [Nihil] le Mer 20 Aoû 2014 - 22:51

Pour le premier problème, dans ton CSS pour .Deroulant, tu as "overflow: hidden". Il faut enlever cette ligne  Mr. Green 
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 Very Happy

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 Smile. 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à Very Happy (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 Smile
Code:
h2.topic-title {
    display: inline;
    margin: 0;
    padding: 0;
    position: static;
}

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par reb912 le Sam 23 Aoû 2014 - 20:07

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

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par [Nihil] le Sam 23 Aoû 2014 - 20:15

Pourrais tu copier ton CSS s'il te plait Smile ?

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) ^__^

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par reb912 le Sam 23 Aoû 2014 - 22:25

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;
}

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par [Nihil] le Sam 23 Aoû 2014 - 23:16

Si tu rajoutes dans ton CSS ceci, est ce mieux ? :
Code:
h2.topic-title { position: static;}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par reb912 le Sam 23 Aoû 2014 - 23:30

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 ?

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par [Nihil] le Sam 23 Aoû 2014 - 23:49

Normalement c'est 1 sujet = 1 problème  Mr. Green .
Je pense que tu devrais mettre ce sujet en résolu et en ouvrir un nouveau en détaillant tout bien Very Happy 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.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par reb912 le Dim 24 Aoû 2014 - 0:08

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

reb912
**

Messages : 72
Inscrit(e) le : 21/07/2012

http://black-rose.forumgratuit.org/
reb912 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème info bulle et apparence

Message par Self le Dim 24 Aoû 2014 - 1:12

..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 résolu
  • 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 Smile

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self 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