Problème avec une celulle de tableau

3 participants

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

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 Ven 15 Avr 2011 - 18:07

Up
Alexandra59

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 Ven 15 Avr 2011 - 18:19

Bonsoir,

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

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

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

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Alexandra59 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://illiweb.com/fa/pbucket.gif');
  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

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

SoraNoHime
Membre actif

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

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Alexandra59 Ven 15 Avr 2011 - 19:11

Merci ! Mais comment puis-je centrer les images ?
Alexandra59

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

SoraNoHime
Membre actif

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

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Alexandra59 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

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

SoraNoHime
Membre actif

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

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

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

Message par Anzu Jeu 21 Avr 2011 - 23:07

Problème avec une celulle de tableau Check10Bonjour,

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 Problème avec une celulle de tableau Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Problème avec une celulle de tableau 50378

A bientôt sur ForumActif Smile
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.

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