Souci dans un tableau

3 participants

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

Résolu Souci dans un tableau

Message par safranite Ven 21 Déc 2012 - 12:23

Bonjour a tous ,

Voila j'ai besoin sur mon forum d'un tableau que j'ai agrementé d'apres celui de "didier 31 et Milouze" merci a eux

Par contre je rencontre un souci :

j'ai bien les 8 xxxx dans les onglets mais je n'arrive pas a activer les 3 yyyy onglets en cliquant dessus

un petit peu d'aide serait ok pour moi



merci a tous et bonnes fetes de fin d'année



Spoiler:
safranite

safranite
***

Masculin
Messages : 110
Inscrit(e) le : 13/12/2009

http://www.adoption-des-terriers-ecossais.com/
safranite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci dans un tableau

Message par Scoubifitz Sam 22 Déc 2012 - 0:23

bonsoir,

quelques "div" mal fermées ...

le code corrigé:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thèmes F.A, la pub</title>
<style type="text/css">

* { margin:0; padding:0; list-style:none; }

body {
font-family: Times New Roman, Arial, sans-serif;
font-size: 12px;
margin:10px;
border: 10px
}
/*Début de l infobulle*/

a.info
{
position:relative;
z-index:2;
color:#000;
text-decoration:none;

}
a.info img {display:block;margin:auto 0;}
a.info span
{
display: none
}

a.info:hover span
{
display:block;
position:absolute;
top:15px;
left:2px;
width:150px;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align: left;
padding:5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* Fin de l'infobulle */
a{
text-decoration: none;
outline: none;
}

img{
border: none;
outline: none;
}
#fond_principal{
padding:5px;
width:1050px;
position:absolute;
z-index:2;
margin: 5px;
background-color: #EDDDC2;
background-image: url('http://i49.servimg.com/u/f49/15/79/93/27/images10.jpg');
border: 2px dotted #4a4a4a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
background-color: #EDDDC2;
border: 1px solid #7f7f7f;
background: #EDDDC2;
background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDDDC2', endColorstr='#EDDDC2',GradientType=0 );
}

.bouton{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r210.jpg');
background-position: top left;
color:#fff;
cursor:pointer;
font-weight:bold;
font-size: 12px;
padding:5px;
margin : 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.bouton:hover{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;
}

.bouton_actif{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;
}
.bouton_actif:hover{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r110.jpg');
background-position: top left;
}
.bouton_container{
width: 240px;
float: left;
}



.contenu_accordeon{
padding:3px;
background:#fff;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/d14.jpg');
border : 1px dotted #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
background: #EDDDC2;
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );
}

.tout_accordeon{
width: 800px;
float: right;
}

.titre_haut{
color: #000;
text-align: center;
font-family: Century Gothic, Georgia, "sans-serif";
font-size: 14px;
font-style: italic;
text-shadow: 0px 0px 2px #ffffff;
}

.titre_haut:hover {
font-style: normal;
text-shadow: 0px 0px 2px #CC0000;
}

.fond_1{
vertical-align: top;
padding: 5px;
border: 1px solid #7f7f7f;
background-color: #EDDDC2;
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/t110.png');
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
box-shadow: 1px 2px 3px #000;
background: #EDDDC2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 );
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
}
.text_1{
font-size: 10px;
}
.im_bout{
float: left;
}
.im_bout:hover{
margin-left: 3px;
}


</style>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
</head>
<body onload="new Accordian('fond_principal',1,'bouton_actif');">
  <div id="fond_principal" >
    <div class="bouton_container">
      <div id="ouvrir1-selection" class="bouton bouton_actif">
        <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> x </div>
      <div id="ouvrir2-selection" class="bouton" >
        <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xx </div>
      <div id="ouvrir3-selection" class="bouton" >
        <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xxx </div>
      <div id="ouvrir4-selection" class="bouton" >
        <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xxxx</div>
      <div id="ouvrir5-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xxxxx</div>
      <div id="ouvrir6-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xxxxxx</div><div id="ouvrir7-selection" class="bouton" >
      <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
      </div> xxxxxxx</div>
      <div id="ouvrir8-selection" class="bouton" >
        <div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" />
        </div> xxxxxxxx</div>
    </div>
    <div class="tout_accordeon">
      <div id="ouvrir1-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>x</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://i14.servimg.com/u/f14/16/09/14/28/mario_10.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>y</div>
                </div>
                Neque porro quisquamnterons pariatur
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="ouvrir2-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>xx</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>yy</div>
                </div>
                ♦ nihil molestiae consequatur, vel illum fugiat

                ♦ aspernatur aut odit aut fugit, quia . aperiam,

                ♦ Neque porro quisquamnterons pariatur?
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="ouvrir3-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>xxx</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://i14.servimg.com/u/f14/16/09/14/28/mario_10.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>yyy</div>
                </div>
                Neque porro quisquamnterons pariatur
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="ouvrir4-content">
        <div class="contenu_accordeon">
          <div class="fond_1">
            <table width="100%">
              <tr>
                <td width="33%" class="fond_1">
                  <div class="titre_haut" style="border-bottom: 1px solid #000;">
                    <div align=center>xxxx</div>
                  </div>
                  <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://i14.servimg.com/u/f14/16/09/14/28/dscf6411.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
                </td>
                <td width="33%" class="fond_1">
                  <div class="titre_haut" style="border-bottom: 1px solid #000;">
                    <div align=center>yyyy</div>
                  </div>
                  Neque porro quisquamnterons pariatur
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div id="ouvrir5-content">
        <div class="contenu_accordeon">
          <div class="fond_1">
            <table width="100%">
              <tr>
                <td width="33%" class="fond_1">
                  <div class="titre_haut" style="border-bottom: 1px solid #000;">
                    <div align=center>xxxxx</div>
                  </div>
                  <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://i14.servimg.com/u/f14/16/09/14/28/rekuso10.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
                </td>
                <td width="33%" class="fond_1">
                  <div class="titre_haut" style="border-bottom: 1px solid #000;">
                    <div align=center>yyyyy</div>
                  </div>
                  Bonjour à Tous et à Toutes,

                  Neque porro quisquamnterons pariatur
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div id="ouvrir6-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>xxxxxx</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://i14.servimg.com/u/f14/16/09/14/28/rekuso10.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>yyyyyy</div>
                </div>
                Bonjour à Tous et à Toutes,

                Neque porro quisquamnterons pariatur
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="ouvrir7-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>xxxxxxx</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>yyyyyyy</div>
                </div>
                ♦ nihil molestiae consequatur, vel illum fugiat

                ♦ aspernatur aut odit aut fugit, quia . aperiam,

                ♦ Neque porro quisquamnterons pariatur?
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="ouvrir8-content">
        <div class="contenu_accordeon">
          <table width="100%">
            <tr>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>xxxxxxxx</div>
                </div>
                <a class="info" href="http://www.adoption-des-terriers-ecossais.com/t490-presentation-des-membres-de-l-equipe-benevole"target="_parent"><img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg"><span>Le texte de l'infobulle du membre 1</span></a>
              </td>
              <td width="33%" class="fond_1">
                <div class="titre_haut" style="border-bottom: 1px solid #000;">
                  <div align=center>yyyyyyyy</div>
                </div>
                ♦ nihil molestiae consequatur, vel illum fugiat

                ♦ aspernatur aut odit aut fugit, quia . aperiam,

                ♦ Neque porro quisquamnterons pariatur?
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci dans un tableau

Message par safranite Mar 25 Déc 2012 - 11:17

Merci bien impeccable
bonne fete de fin d'année
safranite

safranite
***

Masculin
Messages : 110
Inscrit(e) le : 13/12/2009

http://www.adoption-des-terriers-ecossais.com/
safranite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Souci dans un tableau

Message par Anzu Dim 30 Déc 2012 - 0:58

Souci dans un 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 Souci dans un tableau Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Souci dans un 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