Problème avec une celulle de tableau

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

Résolu Problème avec une celulle de tableau

Message par Alexandra59 le Ven 15 Avr 2011 - 11:10

Bonjour,

J'ai un petit problème avec le script d'un tableau qui se trouve ici. Comme vous le voyez mes images sont décalés et ceux depuis que j'y ai ajouté des infobulles ... Pourriez-vous m'aider ?

Merci.

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par Alexandra59 le Ven 15 Avr 2011 - 18:07

Up

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par SoraNoHime le Ven 15 Avr 2011 - 18:19

Bonsoir,

puis avoir voir le code que vous avez installé dans votre message d'accueil ?

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par Alexandra59 le Ven 15 Avr 2011 - 18:25

Le voici :

Code:
<div class="en_tete">

<table>
  <tr>
      <td id="tab1_col1">
          <h1 id="titre_en_tete">Navigation Rapide</h1>
          <p id="en_tete_nav">* <a href="#" id="lien_en_tete">Le Règlement</a></p>
            <p id="en_tete_nav">* <a href="http://elfheim.forumgratuit.org/t7-avant-comment-ca-avant-en-cours" id="lien_en_tete">Le Contexte</a></p>
            <p id="en_tete_nav">* <a href="http://elfheim.forumgratuit.org/t4-qui-sont-ils" id="lien_en_tete">Le Bestiaire</a></p>
            <p id="en_tete_nav">* <a href="http://elfheim.forumgratuit.org/t14-listes-des-pouvoirs" id="lien_en_tete">Les Dons</a></p>
            <p id="en_tete_nav">* <a href="http://elfheim.forumgratuit.org/f35-pour-une-alliance" id="lien_en_tete">Nos Amis</a></p>         
         

            <h1 id="titre_en_tete">Crédit</h1>
            <p id="en_tete_infos_forum">@ Codage de la PA : Ryôfu Itô @ Concept & thème : Crowley & Gabrielle Venus @ Codage & Templates : Ryôfu Itô. Merci de respecter notre travail. Forum optimisé sous FireFox.
        </td>
        <td id="tab1_col2">
          <h1 id="titre_en_tete">Bienvenue sur Elfheim !</h1>
          <p id="contenu_en_tete">Elfheim, un monde fantastique modelé dans l'unique but d'assouvir les caprices des êtres célestes qu'on appelle Dieu. Tous aussi cinglés les uns que les autres, ils créèrent ce monde avec le Nexus dans l'unique but de se divertir, trouvant le ciel bien ennuyeux à leur goût. Mais ils ne s'arrêtèrent pas là, créant également la vie sur cette nouvelle terre, il ne fallut pas longtemps pour qu'un système entre fort et faible s'établisse ...<br><b>FORUM YAOI/YURI/HENTAÏ.</b></p>

<p id="logo_en_tete"><center>___________________<br>

Un petit clic, please !<br>
<img src="http://nsa26.casimages.com/img/2011/04/12/110412045252826409.gif" border="0" alt="" /><img src="http://nsa26.casimages.com/img/2011/04/12/110412045252826409.gif" border="0" alt="" /><img src="http://nsa26.casimages.com/img/2011/04/12/110412045252826409.gif" border="0" alt="" /></center> </p>     
        </td>
        <td id="tab1_col3">
          <h1 id="titre_en_tete">Les News</h1>
            <p id="en_tete_news">*La fiche de présentation est mise en place.</p>
            <p id="en_tete_news">*L'âge minimum est de 16 ans, prenez le en compte.</p>
            <p id="en_tete_news">*Le forum sera finit au complet d'ici ce week end.</p>
     
            <h1 id="titre_en_tete">Partenaires</h1>
          <p id="logo_en_tete">VOUS ? ● LES AUTRES</p>

<p id="logo_en_tete"><img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /><br>
<img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/12/110412051230574498.png" border="0" alt="" /><br></p>

<p id="logo_en_tete"><SELECT onChange=
      "document.location=this.options[this.selectedIndex].value">
      <OPTION VALUE="#" SELECTED>Et plus encore ...</OPTION>
      <OPTION VALUE="#">Elfheim</OPTION>
      <OPTION VALUE="#">Elfheim</OPTION>
  <OPTION VALUE="#">Elfheim</OPTION>
  <OPTION VALUE="#">Elfheim</OPTION>
    </SELECT></p>
        </td>
    </tr>
</table>

<table>
  <tr>
      <td id="tab2_col1">
          <h1 id="titre_en_tete">Personnages Prédéfinis</h1>
          <p id="logo_en_tete"><img src="http://nsa26.casimages.com/img/2011/04/15/110415034648818749.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/15/110415034648818749.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/15/110415034648818749.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/15/110415034648818749.png" border="0" alt="" /> <img src="http://nsa26.casimages.com/img/2011/04/15/110415034648818749.png" border="0" alt="" /><br>Plus ?</p>
        </td>
        <td id="tab2_col2">
          <h1 id="titre_en_tete">Les Dieux</h1>
          <p id="staff_en_tete"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070614709222.png"  class="transparence" /><span>Fondateur<div><img src="http://nsa26.casimages.com/img/2011/03/26/11032603210262621.png" /></div>Crowley<div><a href="#">Mp</a></div>
</span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070654129298.png"  class="transparence" /><span>Codeuse<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031732978263.png" /></div>Ryôfu Itô<div><a href="#">Mp</a></div>
</span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa26.casimages.com/img/2011/04/12/110412070720475430.png"  class="transparence" /><span>Grapheuse<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032746127532.png" /></div>Gabrielle Venus<div><a href="#">Mp</a></div>
</span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070750618934.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031053270704.png" /></div>Eikyuu Hakumei<div><a href="#">Mp</a></div>
</span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070822462389.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032355108475.png" /></div>Setsuna<div><a href="#">Mp</a></div></p>   
     
        </td>
    </tr>
</table>

</div>

Voici le CSS :

Code:
/*-----------------inffobulles----------------- */

 
div.infobulle
{
 position: relative;
 float: left;
color: black;
}

div.infobulle span
{
 display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  color: black;
}


/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
top: 10px; /* on positionne notre infobulle */
background-color: #68a4a9;
color: #175FA3;
 padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
 white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
}

/*-----------------PA----------------- */

 .en_tete{
  width:700px;
  min-height:400px;
  height:auto;
  background-color:#FFFFFF;
  background-image:url('http://i226.photobucket.com/albums/dd220/MissMiet/tutos/fd_tab.png');
  background-repeat:no-repeat;
  margin:auto;
  border:solid 1px #CCCCCC; 
  }

/****** 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:12px;
  color:#0d1128;
  text-align:justify;
  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;
  }

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par SoraNoHime le Ven 15 Avr 2011 - 18:47

La css est bonne, vous avez juste des cellules de tableau en trop.

Remplacez ceci :à la fin de votre code :



Code:
              <p id="staff_en_tete"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070614709222.png"  class="transparence" /><span>Fondateur<div><img src="http://nsa26.casimages.com/img/2011/03/26/11032603210262621.png" /></div>Crowley<div><a href="#">Mp</a></div>
    </span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070654129298.png"  class="transparence" /><span>Codeuse<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031732978263.png" /></div>Ryôfu Itô<div><a href="#">Mp</a></div>
    </span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa26.casimages.com/img/2011/04/12/110412070720475430.png"  class="transparence" /><span>Grapheuse<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032746127532.png" /></div>Gabrielle Venus<div><a href="#">Mp</a></div>
    </span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070750618934.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031053270704.png" /></div>Eikyuu Hakumei<div><a href="#">Mp</a></div>
    </span></div></td><td style="text-align: center;"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070822462389.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032355108475.png" /></div>Setsuna<div><a href="#">Mp</a></div></p> 
       
            </td>
        </tr>
    </table>

par ceci :

Code:
              <p id="staff_en_tete"><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070614709222.png"  class="transparence" /><span>Fondateur<div><img src="http://nsa26.casimages.com/img/2011/03/26/11032603210262621.png" /></div>Crowley<div><a href="#">Mp</a></div>
    </span></div><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070654129298.png"  class="transparence" /><span>Codeuse<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031732978263.png" /></div>Ryôfu Itô<div><a href="#">Mp</a></div>
    </span></div><div class="infobulle"><img src="http://nsa26.casimages.com/img/2011/04/12/110412070720475430.png"  class="transparence" /><span>Grapheuse<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032746127532.png" /></div>Gabrielle Venus<div><a href="#">Mp</a></div>
    </span></div><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070750618934.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa26.casimages.com/img/2011/03/26/110326031053270704.png" /></div>Eikyuu Hakumei<div><a href="#">Mp</a></div>
    </span></div><div class="infobulle"><img src="http://nsa25.casimages.com/img/2011/04/12/110412070822462389.png"  class="transparence" /><span>Modératrice<div><img src="http://nsa25.casimages.com/img/2011/03/26/110326032355108475.png" /></div>Setsuna<div><a href="#">Mp</a></div></p> 
 
            </td>
        </tr>
    </table>

Cordialement

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par Alexandra59 le Ven 15 Avr 2011 - 19:11

Merci ! Mais comment puis-je centrer les images ?

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par SoraNoHime le Ven 15 Avr 2011 - 19:55

Essayez ceci , remplacez

Code:
<p id="staff_en_tete">

par
Code:

<p id="staff_en_tete" align="center">

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par Alexandra59 le Ven 15 Avr 2011 - 20:08

Vraiment merci de votre aide !

Ça ne marche hélas :/ pour le centrage, pourtant dans le CSS il est bien mit "center"

Alexandra59
****

Féminin
Messages : 230
Inscrit(e) le : 25/03/2011

http://forumtestcss.forumgratuit.org/
Alexandra59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par SoraNoHime le Ven 15 Avr 2011 - 20:12

Essayez en partant de la cellule précédente alors :

Code:
        <td id="tab2_col2">
          <h1 id="titre_en_tete">Les Dieux</h1>

par

Code:
        <td id="tab2_col2" align="center">
          <h1 id="titre_en_tete">Les Dieux</h1>

Après je ne voit pas d'autre solution

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec une celulle de tableau

Message par Anzu le Jeu 21 Avr 2011 - 23:07

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

Anzu
+ Hyperactif +

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

http://forum.forumactif.com/forum
Anzu 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