Problème Tableau

4 participants

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

Résolu Problème Tableau

Message par Bella♥ Mer 31 Aoû 2011 - 18:04

Coucou.

J'ai deux problèmes dans mon tableau.

Au niveau des liens :
J'aimerais que les liens ce colle. Et qu'au passage de la souris dessus. Le fond devienne blanc.

Au niveau de l'infobulle :
Quand on est dans la case : Staff. N'importe , où je mets la souris. L'infobulle s'ouvre. Je voudrais que ce soit que quand on à la souris dessus.

Voici le code de mon tableau :

Code:
<center> <div class="en_tete">

<table>
  <tr>
      <td id="tab1_col1">
         
          <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Navigation Importante
</p><p><p style="text-align: center; color:white;    background-color:#94D65E;font-size: 13px;"><a href="http://mad-graph.forumgratuit.org/t1-le-reglement">Règlement♥</a>
</p>
<p style="text-align: center; color:white;    background-color:#94D65E;font-size: 13px;"><a href="http://mad-graph.forumgratuit.org/f3-presentation">Présentation♥</a>
</p>
<p style="text-align: center; color:white;    background-color:#94D65E;font-size: 13px;"><a href="http://mad-graph.forumgratuit.org/f4-eval-de-depart">Éval de départ♥</a>
</p>
</p></div></center>     
            <br>

          <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Nos Partenaires
</p>Aucun.<br>
Pas le temps pour le moment xD</p></div></center> 
         
        </td>
        <td id="tab1_col2">
         
          <center> <p><div class="tableaux"><p><p style="text-align: center; color:#94D65E; width: 335px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Bienvenue {USER&amp;#8288;NAME}
</p><strong>Bienvenue dans notre forum {USER&amp;#8288;NAME} dans ce forum, tu pourra progresser dans le Graphisme, tu pourra aussi y t'amusez, bavardez, jouez etc... Enfin bref tout le confort xD Allez passe un bon moment ;D </strong> </p></div>
</center>

          <center> <p><div class="tableaux"><p><p style="text-align: center; color:#94D65E; width: 335px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Le Staff du Fofo'
</p><strong><div class="infobulle"><img src="http://img11.hostingpics.net/pics/546088fgfgfd.png">
<span><strong>Bella♥<br>
Créatrice du forum</strong>
<img src="http://img11.hostingpics.net/pics/901129004.png"/></span></div></div></p></div>
</center>

     
        </td>
        <td id="tab1_col3">
         
              <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Les Nouveautés
</p><strong>News<br>
News<br>
News<br>
News<br>
News<br></strong></p></div></center>   
         
        <br>
           
              <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Crédits
</p><br>
Design par : Bella♥<br>
Page d’Accueil par : Bella♥<br>
Forum Optimiser pour : Firefox, Chrome et IE9<br>
<br></p></div></center>   
        </td>
    </tr>
</table>



</div>
</center>

Et mon CSS :
Code:
/*--- Bordure du Forum ---*/

.bodyline{  border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
}

.forumline{  border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
}

/*--- Barre de Navigation ---*/

.mainmenu {
background-color: #94D65E;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
padding: 2px;
text-color: white;
text-decoration: none !important;
font-weight:bold;

}

.mainmenu:hover {
background-color: white;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
padding: 2px;
text-decoration: none !important;
font-weight:bold;

}


/*--- Profil du Posteur ---*/


table.tableau_profil{
  width:200px;
  margin:auto;
  border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;

  }
 
table.tableau_profil td.haut_tab{
  width:200px;
  height:20px;
  background-color: white;
  background-repeat:no-repeat;
  }
 
table.tableau_profil td.milieu_tab{
  width:200px;
  background-color: wite;
  background-repeat:repeat-y;
  padding-left:14px;
  padding-right:14px;
  text-align:center;
  }
 
table.tableau_profil td.bas_tab{
  width:200px;
  height:20px;
  background-color: white;
  background-repeat:no-repeat;
  }
 
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:black;
  background-color:#94d65f;
  border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
moz-border-radius:15px;
    -webkit-border-radius:15px;
  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 */
  }











/*--- Fiche de Présentation ---*/

.presentation {
border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
width: 500px;
}






/*--- Tableau ---*/

 .en_tete{
 
 
  height:auto;
  background-color:white;
 
 
  margin:auto;

  }

/****** Mise en page des colonnes ******/

table tr{
  vertical-align:top;
  }

#tab1_col1{
  width: 200px;
  padding:12px;
  }

#tab1_col2{
  width: 350px;
  padding:12px;
  }

#tab1_col3{
  width: 150px;
  padding:12px;
  }

#tab2_col1{
  width: 450px;
  padding:12px;
  }

#tab2_col2{
  width: 250px;
  padding:12px;
  }
 
/****** Mise en page des titres ******/

#titre_en_tete{
  background-color:#68a4a9;
  border:1px dashed #ffffff;
  height: 24px;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  color:#ffffff;
  text-align:center;
  padding: 4px;
  }
 
/****** Mise en page du texte ******/

#en_tete_nav{
  font-family:Tahoma;
  font-size:16px;
  color:#0d1128;
  margin-left:35px;
  margin-bottom:-4px;
  }
 
#contenu_en_tete{
  font-family:Tahoma;
  font-size:14px;
  color:#0d1128;
  text-align:justify;
  text-indent:12px;
  padding-left:8px;
  padding-right:8px;
  margin-bottom:-4px;
  }

#en_tete_infos_forum{
  font-family:Tahoma;
  font-size:12px;
  color:#0d1128;
  text-align:justify;
  text-indent:12px;
  padding-left:8px;
  padding-right:8px;
  margin-bottom:-4px;
  }
 
#en_tete_news{
  font-family:Tahoma;
  font-size:16px;
  color:#0d1128;
  margin-left:12px;
  margin-bottom:-4px;
  }

#logo_en_tete, #staff_en_tete{
  text-align:center;
  }

#logo_en_tete a, #staff_en_tete{
  text-decoration:none;
  }

#logo_en_tete img{
  padding-bottom:4px;
  }

#staff_en_tete img{
  padding-left:6px;
  }
     
/****** Mise en page des liens ******/

#lien_en_tete{
  color:#0d1128;
  text-decoration:none;
  }

#lien_en_tete:hover{
  border-bottom:dotted 1px #0d1128;
  font-weight:bold;
  }

#vers_profil{
  color:#0d1128;
  text-decoration:none;
  font-style:italic;
  }
 
#vers_profil:hover{
  border-bottom:dotted 1px #0d1128;
  }

/*--- Tableau 2ème partie ---*/

.tableau {
 border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
width: 200px;
}

.tableaux {
 border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
width: 350px;
}

.lien

/*--- Infobulle ---*/

.infobulle{
position: relative;
z-index: 0;}
 
.infobulle:hover{
background-color: transparent;
z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 2px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#94d65f;
border-left: 5px solid #94d65f;
border-right: 5px solid #94d65f;
border-top: 2px solid #94d65f;
border-bottom: 2px solid #94d65f;
text-align: center;
width: 125px;}

Merci d'avance.

Bisous.


Dernière édition par Bella♥ le Mar 6 Sep 2011 - 18:32, édité 1 fois
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Bella♥ Ven 2 Sep 2011 - 10:43

Up --'
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Bella♥ Sam 3 Sep 2011 - 13:23

UP ;D
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Roxy. Sam 3 Sep 2011 - 13:43

Bonjour,

Que voulez-vous mettre sous forme de lien ou que voulez-vous qui est un fond blanc ?
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Bella♥ Dim 4 Sep 2011 - 10:16

Je voudrait que les liens ce collent, la ils sont séparée. Et que on passage de la souris, le fond vert des liens devient blanc ;D
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Bella♥ Lun 5 Sep 2011 - 15:20

Up ^^
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par kheino Lun 5 Sep 2011 - 15:49

Bonjour,

Aurais-tu un lien ? Je ne comprends pas tout à fait ta demande...


EDIT : Pourrais-tu aussi épurer le CSS, ne mettre que les paramètres qui concernent ton tableau ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

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

Résolu Re: Problème Tableau

Message par Anzu Lun 5 Sep 2011 - 16:14

Bonjour,

Remplacez le code de votre page d'accueil par celui ci:

Code:
        <center> <div class="en_tete">
       
        <table>
          <tr>
              <td id="tab1_col1">
               
                  <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Navigation Importante
        </p><p><div class="lienpa"><a href="http://mad-graph.forumgratuit.org/t1-le-reglement">Règlement♥</a>
        </div>
        <div class="lienpa"><a href="http://mad-graph.forumgratuit.org/f3-presentation">Présentation♥</a>
        </div>
        <div class="lienpa"><a href="http://mad-graph.forumgratuit.org/f4-eval-de-depart">Éval de départ♥</a>
        </div>
        </p></div></center>   
                    <br>
       
                  <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Nos Partenaires
        </p>Aucun.<br>
        Pas le temps pour le moment xD</p></div></center>
               
                </td>
                <td id="tab1_col2">
               
                  <center> <p><div class="tableaux"><p><p style="text-align: center; color:#94D65E; width: 335px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Bienvenue {USER&amp;#8288;NAME}
        </p><strong>Bienvenue dans notre forum {USER&amp;#8288;NAME} dans ce forum, tu pourra progresser dans le Graphisme, tu pourra aussi y t'amusez, bavardez, jouez etc... Enfin bref tout le confort xD Allez passe un bon moment ;D </strong> </p></div>
        </center>
       
                  <center> <p><div class="tableaux"><p><p style="text-align: center; color:#94D65E; width: 335px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Le Staff du Fofo'
        </p><strong><div class="infobulle" style="width: 50px;"><img src="http://img11.hostingpics.net/pics/546088fgfgfd.png">
        <span><strong>Bella♥<br>
        Créatrice du forum</strong>
        <img src="http://img11.hostingpics.net/pics/901129004.png"/></span></div></div></p></div>
        </center>
       
           
                </td>
                <td id="tab1_col3">
               
                      <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Les Nouveautés
        </p><strong>News<br>
        News<br>
        News<br>
        News<br>
        News<br></strong></p></div></center> 
               
                <br>
                 
                      <center><div class="tableau"><p><p style="text-align: center; color:#94D65E; width: 185px;  border-bottom: #94D65E 2px solid;  background-color:none;text-shadow: #94D65E 0px 0px 10px;font-size: 15px;">Crédits
        </p><br>
        Design par : Bella♥<br>
        Page d’Accueil par : Bella♥<br>
        Forum Optimiser pour : Firefox, Chrome et IE9<br>
        <br></p></div></center> 
                </td>
            </tr>
        </table>
       
       
       
        </div>
        </center>

Et rajoutez ces codes dans votre css:

Code:
a.lienpa {
text-align: center;
 color:white;   
font-size: 13px;
}

.lienpa:hover { 
background-color:#ffffff;
}

.lienpa{
background-color:#94D65E;
}

• Donc au niveau de l'infobulle, j'ai délimité la taille du div à la taille de l'image: l'infobulle apparait uniquement au passage de la souris sur l'image.

• Pour les liens, vous aviez mis des <p> autour des liens, j'ai remplacé par des div.

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème Tableau

Message par Bella♥ Mar 6 Sep 2011 - 18:31

Merci ,ses parfaits ;D
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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