Problème positionnement et forme info bulle

Résolu/Fermé
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 - 25 juin 2015 à 23:52
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 - 26 juin 2015 à 03:14
Bonjour,

J'envisage d'avoir une info bulle sur mon onglet "invitations" ronde et petite mais j'ai ceci : http://www.noelshack.com/2015-26-1435269081-capture.jpg

voici mon css :
.ibi_invitations
{
  background-color:#FF0000;
  color:#FF0000;
  color:#FFF;
}


mon menu.php :
<?php
// Fichier menu.php
 $nombre_membre = nombre_membre();
 $nb_membre = ($nombre_membre > 1) ? $nombre_membre ." membres" : $nombre_membre ." membre";
 
?>
<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <?php if(!function_exists('afficher_ibi_invitations')){
                  echo "<br> Erreur : La fonction afficher_ibi_invitations() n'existe pas !";
                }else{
                 $ibi = afficher_ibi_invitations();
                 if($ibi !== '0') {
                 //echo "<div class='ibi_invitations'>
                      echo "<p class='ibi_invitations'>".$ibi."</p>";
                  //   </div>";
                 }  
                 }?>
        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                <?php
                if(!function_exists('afficher_ibi_messages')){
                echo "<br> Erreur : La fonction afficher_ibi_messages() n'existe pas !";
                }else{
                $ibi = afficher_ibi_messages();
                if($ibi != '0') {
                //echo "<div class='ibi_messages'>".$ibi."</div>";
                 echo $ibi;
                 }  
                 }
                  ?>
        </li>
 
<li class="nbr"><?php echo $nb_membre;?></li>
   </ul>
</div>


et ma function :
la function qui va nous permettre d'afficher l'info-bulle des messages
*/
function afficher_ibi_messages(){
 global $bdd;
 $result=0;
 //Variables
 $pseudo_session = isset($_SESSION['pseudo'])?$_SESSION['pseudo']:NULL;

 if($pseudo_session){
  $sql = "SELECT COUNT(id_conversation) as NB
         FROM conversations
         WHERE pseudo_dest=:pseudo_session
      OR (pseudo_exp=:pseudo_session > date_vue) ";

   // je place les  params dans une variable avant de l'utiliser :
  $params = array(':pseudo_session' => $pseudo_session);
  try{
    $query = $bdd->prepare($sql);
    $query ->execute($params);  
    $req= $query->fetchall();
   
   $result= count($req)>0 ? $req[0]['NB']:0;
   
   }catch(Exception $e) {
     echo "<br>ERREUR ! ".$e->getMessage()."<br>";
     echo "<br>params : <br>";
     print_r($params);
   }
 } // Fin du  if($pseudo_session)
 // le return
 return $result;
}


Merci d'avance ;)
A voir également:

3 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
26 juin 2015 à 00:22
Hello

avoir une info bulle sur mon onglet "invitations" ronde et petite

Tu n'as pas du suivre le tuto complètement ... car là.. ton CSS actuel ne suffira jamais à faire ça !

En gros.. .pour faire un BADGE .... il faut un truc du genre :
.ibi_invitations {
    border-radius: 50%;

    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff000;
    border: 2px solid #666;
    color: #fff;
    text-align: center;

    font: 32px Arial, sans-serif;
}

0
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
26 juin 2015 à 00:25
j'ai ça : http://www.noelshack.com/2015-26-1435271079-capture.jpg :(
or le tuto me donnait ce code (qui me faisait disparaitre mon "1") :
{ 
  background-color:#FF0000;
  border:1px solid #000;
  color:#FFF;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  width:20px;
  position:relative;
  left:670px;
  top:10px;
}
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020
26 juin 2015 à 00:29
Tu as essayé mon code ?? C'est ça le gros 1 jaune ?
Bien sûr... il te faut l'adapter à tes besoins.... mais tu vois.. cette fois tu as bien ton rond avec ton "1" dedans...

Et puis .. je ne pense pas que le code du tuto fasse disparaitre le 1 ... peut-être est-il juste mal positionné (derrière autre chose....) ... mais pour le savoir..il faut le code source (généré) de ta page HTML.
0
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
Modifié par Zakarya93 le 26/06/2015 à 00:31
 
<!DOCTYPE html>
<html>
    <head>
      <link rel='stylesheet' href='css/style.css'>
    </head>
    <meta charset="UTF-8" >
    <body>
          <div id='content'>
          ?<div class='header'>
Bienvenue xzak47<p><a href="index.php?page=logout">Se déconnecter</a></p>
</div>?<div class='menu'>
    <ul>
     <li><a href="index.php?page=membre">Accueil</a></li>
     <li><a href="index.php?page=update">Changer vos informations</a></li>
     <li><a href="index.php?page=liste_membre">les membres</a></li>
     <li><a href="index.php?page=amis">Vos amis</a></li>
     <li>
        <a href="index.php?page=invitations">Invitations</a>
               <p class='ibi_invitations'>1</p>        </li>
        <li>
                <a href="index.php?page=conversations">Messages</a>
                        </li>
 
<li class="nbr">2 membres</li>
   </ul>
</div><h3>Vos invitations</h3>
<img src='avatar/defaut.jpg' height='100' width='100' alt='avatar'></img><div class='error'> jean a voulu vous ajouter comme ami(e)<br /> <a href='index.php?page=accepter&pseudo=jean'>Accepter</a>|<a href='index.php?page=refuser&pseudo=jean'> Refuser</a></div>    </div>
    </body>


chaque titre de mes onglets est aussi décalé :/
0
Zakarya93 Messages postés 984 Date d'inscription lundi 27 avril 2015 Statut Membre Dernière intervention 18 décembre 2020 10
26 juin 2015 à 03:14
J'ai résolu le soucis :)
0