Problème PA à onglet.

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

Résolu Problème PA à onglet.

Message par Oz-Chan Ven 13 Juil 2012 - 17:53

Bonsoir,
J'ai un problème avec ma PA à onglet. J'aimerai avoir une image différente quand on passe dessus et une image différente quand elle est fermée. J'aimerai enlevé l'écriture aussi dessus. Voici mon forum : http://d-gray-man-eternity.forumactif.org/
Les images que j'aimerai mettre sur les onglets :
1er onglet ouvert : https://i.servimg.com/u/f43/16/13/48/98/1o10.png
1er onglet fermé : https://i.servimg.com/u/f43/16/13/48/98/1f10.png
2eme onglet ouvert : https://i.servimg.com/u/f43/16/13/48/98/o2o10.png
2eme onflet fermé : https://i.servimg.com/u/f43/16/13/48/98/o2f10.png
3eme onglet ouvert : https://i.servimg.com/u/f43/16/13/48/98/o3o10.png
3eme onflet fermé : https://i.servimg.com/u/f43/16/13/48/98/o3f10.png

et mon CSS

Code:
/* Les propriétés étranges de Lyloox, DEBUT */

.staff {
  display: inline-block;
}
.staff ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; background:#eee; list-style:none; } 
.staff li { width:100px; height:100px; position:relative;z-index:5; vertical-align:middle; -moz-border-radius:5px; padding:0px; overflow:hidden; float:left; } 
.staff li:hover { position:relative; z-index:10; box-shadow: 0px 0px 2px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
.staff li:hover p { margin-top:-85px; } 
.staff strong { display:block; letter:spacing:2px; color:#EE6E6E; }
.staff a {color:#EE6E6E; font-weight:500; }

.staff div {
  display: inline-block;
}


/* Onglet 3 */

#onglet3 .admins img { -moz-border-radius:5%; border: 2px solid orange; margin:3px; }
#onglet3 h1, #onglet3 h2{ font-size:15px;font-family:Time News Roman,serif; font-style:italic; color:white; text-shadow: 0px 0px 3px #A40000;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
#onglet3 h1:hover, #onglet3 h2:hover { color:#A40000; text-shadow: -5px -3px 2px #676767, 16px 8px #FFA6A6;
-htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
#onglet3 { margin:auto;}
#onglet3 .admins {display:block; text-align:center; }

#onglet3 .admins img {margin-top: 0px; margin-left: 0px;}

#onglet3 .coupsdecoeur
{ margin-left:170px; text-align:center; width:220px; padding:15px; border: 2px dotted #676767; border-radius:30px; 
  border-top: 3px solid #676767; border-right: 1px solid #676767; border-bottom: 3px solid #676767;
  border-left: 1px solid #676767;}
#onglet3 .credits {
clear: none;
margin: -292px 0 0 430px;
text-align: center;
width: 300px;
height: 256px;
background-color: whiteSmoke;
padding: 15px;
border: 3px solid #D2D2D2;
font-size: 11px;
}
#onglet3 .modos {text-align:center; display:block;}


/* Autres machins */

.onglet3 img { padding:2px; border: 1px solid; border-radius:7px; text-align:center; background-color:#EEEEEE; opacity:0.8; }
.onglet3 img {margin:6px; border: 1px solid; border-radius:7px; }
.onglet3:hover {opacity:1;}

.infobulle {position:relative;text-decoration:none; display:inline;}
.infobulle span {display:none; text-align:justify}
.infobulle:hover{background:none;cursor:help;z-index:999}
.infobulle:hover span{-moz-border-radius:5px;background-color:#EEEEEE; border-left: 3px solid #EC5E61; border-right: 3px solid #EC5E61;
  display:inline;left:50px;margin-right:5px;padding:8px;position:absolute;top:5px;white-space:normal;width:200px}

.onglets { text-align:center; margin:auto; display:block;cursor:pointer;}

.onglet { display:inline-block; border:1px solid black; height: 30px; width: 150px; }   

.onglet_0 { background-image: url(http://i40.servimg.com/u/f40/12/80/18/70/cho10.jpg); padding:8px; margin:3px; font-size:16px; }
.onglet_1 { background-image:url(http://i43.servimg.com/u/f43/16/13/48/98/essais10.jpg); padding:8px; margin:3px; font-size:16px; box-shadow: 0 0 12px black; }

.contenu_onglet { padding:5px; display:none; height:434px}

.imageetcontexte { text-align:center; border-left: 3px solid #676767; border-right: 3px solid #676767; padding:10px; }

.blabladesnews { text-align:center; margin:20px; width:530px; max-width:550px; overflow:auto; padding:15px; border: 2px dotted #676767; -moz-border-radius:30px; 
  border-top: 3px solid #676767; border-right: 1px solid #676767; border-bottom: 3px solid #676767;
  border-left: 1px solid #676767;border-radius: 10px 10px 0px 0px;  }
.blabladesnews span { float:right;font-size:23px; margin-top:-30px; font-family:Verdana,Arial,Helvetica,sans-serif; color:white; text-shadow: 0px 0px 5px black;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; }
.blabladesnews span:hover {  margin-right:90px; color:white; text-shadow: -16px -9px #FFA6A6, 2px 3px 1px #A40000;
-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;}
.blabladesnews h1 { color:#910000; text-decoration:blink; display:inline; }
.blabladesnews h2 { color:#910000; display:inline; }

/* Animations des prédéfinis, onglet 1 de la PA */
#predef {margin-left:21px; }
#predef ul { font:.75em "lucida grande", arial, sans-serif; overflow:auto; width:495px; background:#eee; list-style:none; } 
#predef li {  border-radius: 16px; width:163px; height:85px; position:relative;z-index:5; margin:5px 0px 5px -60px; vertical-align:middle; -moz-border-radius:5px; padding:0px; border: 3px solid #676767; overflow:hidden; float:left; } 
#predef li:hover { position:relative; z-index:10; margin-left:-40px; border-color:#EE6E6E; box-shadow: 2px 2px 4px #000; -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;}
#predef p { font-size:10px; height:85px; padding:0 10px; opacity:.8; background:#EEE; -webkit-transition: margin-top 1.5s ease-out; -moz-transition: margin-top 1.5s ease-out; transition: margin-top 1.5s ease-out; } 
#predef li:hover p { margin-top:-88px; } 
#predef strong { padding-top:3px; display:block; }
#predef a {color:#EE6E6E; font-weight:500; }

/* Mise en page des liens de navigation, onglet 1 de la PA */
#navi {float:left; display:block;}
#navi .entete { width:450px; position:relative; margin-top:-20px; -htm-transform:all;-htm-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s;-moz-transform:all;-moz-transition:1s; text-align:center; color:white; text-shadow: 0px 0px 5px black; font-family:Time News Roman, serif; margin:auto; display:block; z-index:150; font-size:18px; font-style:italic;}
#navi .entete:hover { -htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; color:#910000; letter-spacing:3px; text-shadow: 0px 0px 5px #FF8A8A; }
#liens { background-image: url(http://i43.servimg.com/u/f43/16/13/48/98/sprout11.png); background-repeat: no-repeat; background-position : center ;  border-radius: 30px; display:table-cell; vertical-align:middle; height:120px; width:500px; max-width:540px; margin:auto; border: 2px solid #676767; border-radius:30px; font-family:Verdana,Arial,Helvetica,sans-serif; text-align:center; background-color: #EEEEEE; }
.colonne1 { float:left;width:255px; }
.colonne2 { margin-left:260px; display:block;}
.colonne1 a, .colonne2 a {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; padding-left:10px;padding-left:}
.colonne2 .pique a:before { content: "♠"; padding-right:5px; }
.colonne2 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne2 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne2 .trefle a:before { content: "♣"; padding-right:5px; }

.colonne1 .pique a:before { content: "♠"; padding-right:5px; }
.colonne1 .carreau a:before { content: "♦"; padding-right:5px; }
.colonne1 .coeur a:before { content: "♥"; padding-right:5px; }
.colonne1 .trefle a:before{ content: "♣"; padding-right:5px; }

.colonne1 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#DB2626; letter-spacing:3px;padding-left:60px !important;}
.colonne2 a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none; text-decoration:none !important; color:#DB2626; letter-spacing:3px;padding-right:60px !important;}


/* Les propriétés étranges de Lyloox, FIN */

/* Le bazar ajouté de Foocha' */

.onglets span {
margin-right: 75px;
}

#onglet_abc {
margin-left: 72px;
}

#onglet3 {
  border-spacing:0px;
}

/* contexte onglet 1 */

.contexte {
height: 180px;
overflow: auto;
max-width: 355px;
display: block;
margin: auto;
margin-top: 3px;
background-color: whiteSmoke;
padding: 15px;
border: 3px solid #D2D2D2;
font-size: 11px;
border-radius: 16px;
overflow: auto;
}

/* navigation predefs onglet 1 */

#lienspredef {
display: table-cell;
vertical-align: middle;
height: 55px;
width: 500px;
max-width: 540px;
margin: auto;
border: 2px solid #676767;
border-radius: 30px;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-align: center;
background-color: #EEE;
}

#lienspredef a {
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
padding-left: 10px;
}

#lienspredef .pique a:before { content: "♠"; padding-right:5px; }
#lienspredef .carreau a:before { content: "♦"; padding-right:5px; }
#lienspredef .trefle a:before { content: "♣"; padding-right:5px; }

#lienspredef a:hover {-htm-transform:all;-htm-transition:1s;-moz-transform:all;-moz-transition:1s;-o-transform:all;
  -o-transition:1s;-webkit-transform:all;-webkit-transition:1s; text-transform:none;
text-decoration:none !important; color:#DB2626; letter-spacing:3px;}
/* staff */

.fonda {
        height:62px;
  display: inline-block;
}
.fonda ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#eee;
  list-style:none; } 

.fonda li {
  width:230px;
  height:80px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #EFFF94;
  padding:2px;
  margin-bottom: -8px;


.fonda p {
font-size: 10px;
height: 82px;
opacity: .8;
background: #EEE;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.fonda li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #ffe400;
  padding:2px;
}
.fonda li:hover p { margin-top:-85px; } 

.admin {
      height:89px;
  display: inline-block;
}
.admin ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#eee;
  list-style:none; } 

.admin li {
  width:145px;
  height:100px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #EF8D4D;
  padding:2px;
  margin-bottom: -8px;


.admin p {
font-size: 10px;
height: 97px;
opacity: .8;
background: #EEE;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
}

.admin li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #EE6E6E;
  padding:2px;
}
.admin li:hover p { margin-top:-105px; }

.modo {
        height:65px;
  display: inline-block;
}
.modo ul {
  font:.75em "lucida grande", arial, sans-serif;
  overflow:auto;
  background:#eee;
  list-style:none; } 

.modo li {
  width:85px;
  height:65px;
  position:relative;
  z-index:5;
  vertical-align:middle;
  border-radius:5px;
  adding:0px;
  overflow:hidden;
  float:left;
  margin-right: 8px;
  border: 2px solid #FDCDFF;
  padding:2px;


.modo p {
font-size: 10px;
height: 62px;
opacity: .8;
background: #EEE;
-webkit-transition: margin-top 1.5s ease-out;
-moz-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
  padding:6px;
  padding-top: 21px;
}

.modo li:hover {
  position:relative;
  z-index:10;
  -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #CE75FF;
  padding:2px;
}
.modo li:hover p { margin-top:-85px; }

/* Credits */

.creditstd {
  height:115px;
background-repeat: no-repeat;
padding-left: 43px;
background-position-x: 38px;
}

#blacredits {
width: 480px;
  background-color: #E8E8E8;
text-align: justify;
height: 77px;
overflow: auto;
margin-bottom: 8px;
  border: 1px solid #B0B5AF;
border-radius: 5px;
padding: 2px;
}
 
/* coup de coeur */

.coupcoeur img {
margin-right: 6px;
margin-bottom: 8px;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  border: 2px solid #EFFF94;
  border-radius: 5px;
  padding:2px;
}

.coupcoeur img:hover {
border: 2px solid #F07F05;
    -htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  padding:2px;
}


.coupcoeur div {
  height:19px;
font-size: 23px;
margin-top: 2px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: white;
text-shadow: 0px 0px 5px black;
-htm-transform: all;
-htm-transition: 1s;
-moz-transform: all;
-moz-transition: 1s;
-o-transform: all;
-o-transition: 1s;
-webkit-transform: all;
-webkit-transition: 1s;
margin-bottom: -6px;
}

.coupcoeur div:hover { 
  color:white;
  text-shadow: -16px -9px #FFA6A6, 2px 3px 1px #A40000;
-htm-transform:all;
  -htm-transition:1s;
  -moz-transform:all;
  -moz-transition:1s;
  -o-transform:all;
  -o-transition:1s;
  -webkit-transform:all;
  -webkit-transition:1s;
}

et le code de la PA

Code:
<!-- javascript permettant l'attribution des onglets -->
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
-->//
</script>
<table width="950px" height="434px" style="background-image:url(http://i40.servimg.com/u/f40/14/10/85/71/50627810.jpg); border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px;"><tr><td><div class="contenu_onglet" id="contenu_onglet_abc"><div class="imageetcontexte" style="float:right;">

<img src="http://i43.servimg.com/u/f43/16/13/48/98/contex10.jpg" /><p class="contexte">C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. C'est un texte simple où sera placé le contexte. <br> <a href="LIEN_DU_CONTEXTE">Lire la suite ?</a></p>

</div><div style="max-width:600px; width:540px;">
<ul id="predef">
<!-- Première ligne des prédefs (1 à 4) -->
<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" /> <!-- Pour que les 4 tiennent, les images sont "coupées" à 163*85px : les plus grandes auront un bout coupé et les plus petites un vide entre l'image et le bord. On peut modifier cette taille dans le CSS au niveau de l'id " #predef " associée à la classe " .li " -->
<p>
<strong>Allen Walker -</strong>
Exorciste.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<!-- Deuxième ligne des prédefs (5 à 8) -->

<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>
<li>
<img src="http://i43.servimg.com/u/f43/16/13/48/98/pradaf10.jpg" alt="" />
<p>
<strong>Nom DUPERSONNAGE -</strong>
son groupe.<br/>Une phrase qui le décrit, son caractère, ses capacités. <a href="LIEN">Jouez moi !</a>
</p>
</li>

</ul>

<!-- Liens par rapport aux predefs --><div id="navi"><div id="lienspredef"><span class="pique"><a href="#">Prédéfinis mangas</a></span> <span class="trefle"><a href="#">Prédéfinis forum</a></span>  <span class="carreau"><a href="#">Postes vacants</a></span></div></div>

</div>

<!--  Liste des liens de navigation --><div id="navi"><div class="entete">Bienvenue, {USER&amp;#8288;NAME} !</div><div id="liens"><div class="colonne1">
<span class="pique"><a href="/t92-reglement">Règlement</a></span><br />
<span class="coeur"><a href="f4-questions-sugestions-probleme">Questions</a></span><br />
<span class="trefle"><a href="/f11-relations">Relationship</a></span><br />
<span class="carreau"><a href="LIEN">Bottin Chain & Pouvoir</a></span><br />
</div><div class="colonne2">
<span class="carreau"><a href="/t93-modele-de-presentation">Présentation</a><br />
<span class="trefle"><a href="/f12-bottin-des-avatars">Bottin Avatars</a><br />
<span class="coeur"><a href="Lien du blabla">Blablabla</a><br />
<span class="pique"><a href="LIEN">Autre lien?</a> </div>
</div>      </div>
</div>

<!--  Fin du premier onglet,
début du deuxième --><div class="contenu_onglet" id="contenu_onglet_ledeuxieme">

<table> <!-- j'ai choisi de faire le placement des différents trucs par tableau --> <tr>

<!-- Events -->
<td rowspan="2" class="imageetcontexte">
<img src="http://i43.servimg.com/u/f43/16/13/48/98/event_10.jpg"><br /> <p style="  height:200px;  overflow:auto;  width:300px;  display: block;  margin: auto;  margin-top:15px;  background-color:#F5F5F5;  padding:15px;  border: 3px solid #D2D2D2;  max-width:325px;  border-radius: 16px;">C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. C'est un texte simple où sera expliqué le ou les évents. <br />
<a href="LIEN">Lire la suite</a> ou <a href="LIEN">Participer</a></p>
</td>

<!-- News -->
<td class="blabladesnews">
<span> Wazzup on Eternity ?</span><br><div style="height:250px; overflow:auto;">

<p><h1> 28.01.2012 -</h1> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.</p>
<p><h2> 21.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 14.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 07.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>
<p><h2> 00.01.2012 -</h2> Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news. Blabla des news.  </p>

</div>
</td>
</tr>
<tr>
<td>

<!-- Hors-News  -->

<table cellpadding="20" style="table-layout:fixed;border-bottom: 3px solid #676767;border-right: 3px solid #676767; border-left: 1px solid #676767;
"><tr><td>Petite phrase hors news Petite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors news </td><td style="border-left:4px dotted #676767; ">Petite phrase hors newsPetite phrase hors newsPetite phrase hors newsPetite phrase hors news</td></tr></table>

</td>
</tr>
</table>
</div>

<!-- Fin du deuxième onglet,
début du troisième --><div class="contenu_onglet" id="contenu_onglet_ghi"><div id="onglet3">
 <table id="onglet3">
  <tr>
  <!-- IMAGE POUR FAIRE JOULI -->
   <td rowspan="2" style="border-left: 2px solid gray;padding-left: 34px;border-right: 2px solid gray;padding-right: 20px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/jouli_10.jpg"/></td>
  <!-- STAFF FONDA -->
   <td style="border-right: 2px solid gray;padding-right: 23px;"><ul class="fonda">
  <li><img src="http://i43.servimg.com/u/f43/16/13/48/98/admin10.jpg"/><p><strong>Timcanpy</strong><br/><a href="http://d-gray-man-eternity.forumactif.org/privmsg?mode=post&u=1">MP</a> - <a href="http://d-gray-man-eternity.forumactif.org/u1">Profil</a></p></li>
  <li><img src="http://i43.servimg.com/u/f43/16/13/48/98/admin10.jpg"/><p><strong>Fonda 2</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
</ul></td>
</tr>
<tr><!-- STAFF ADMIN -->
   <td style="border-right: 2px solid gray;padding-right: 23px;"><ul class="admin"><li style="margin-right:16px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/fonda10.jpg"/><p><strong>Admin</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
  <li style="margin-right:16px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/fonda10.jpg"/><p><strong>Admin 2</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
  <li><img src="http://i43.servimg.com/u/f43/16/13/48/98/fonda10.jpg"/><p><strong>Admin 3</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
</ul></td>
</tr>
<tr>
  <!-- COUP DE COEUR -->
   <td class="coupcoeur" style="border-left: 2px solid gray;padding-left: 34px;border-right: 2px solid gray;padding-right: 20px;" rowspan="2"><div> Coup de ♥ du staff</div><br/><br/>
 <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" /><br/>
 <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" />  <img src="http://i43.servimg.com/u/f43/16/13/48/98/coup_d10.jpg" /><br/></td>
  <!-- STAFF MODO -->
   <td style="border-right: 2px solid gray;padding-right: 23px;"><ul class="modo">
  <li style="margin-right:42px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/modo10.jpg"/><p><strong>Modo</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
  <li style="margin-right:42px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/modo10.jpg"/><p><strong>Modo 2</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></li>
  <li style="margin-right:43px;"><img src="http://i43.servimg.com/u/f43/16/13/48/98/modo10.jpg"/><p><strong>Modo 3</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
  <li><img src="http://i43.servimg.com/u/f43/16/13/48/98/modo10.jpg"/><p><strong>Modo 4</strong><br/><a href="#">MP</a> - <a href="#">Profil</a></p></li>
</ul></td>
</tr>
<tr>
  <!-- CREDITS -->
   <td class="creditstd" style="border-right: 2px solid gray;">
    <div id="blacredits"><img height="64px" width="64px" style="float:left;margin-left:5px;" src="http://img100.imageshack.us/img100/1514/firefoxbaggsicon.png"/>Forum optimisé pour <b>Mozilla </b> Firefox. Tout autre navigateur pourrait mal afficher certaines choses ou vous ralentir.
Le manga Pandora Hearts appartient à <b>Jun Mochizuki</b>. Codage de la V.11 par <b>Ayumi Hasegawa</b> avec l'aide d'<b>Alice</b> pour la structure, <b><a href="http://www.elegance-temptation.com/u1138">Lyloox</a></b> & <b><a href="http://www.elegance-temptation.com/u1184">Foocha'</a></b> pour la PA. Thème par <b>Ayumi Hasegawa.</b> Toute copie  est strictement interdite. Suite crédit ici</div></div></td>
</tr>
</table>
<!-- Fin du troisième onglet -->
</td></tr>
<!-- Placement en tableau des onglets, en bas, avec changement en javascript -->
<tr><td><div class="onglets">
<span class="onglet_0 onglet" id="onglet_abc" onclick="javascript:change_onglet('abc');">Onglet 1</span>
<span class="onglet_0 onglet" id="onglet_ledeuxieme" onclick="javascript:change_onglet('ledeuxieme');">Onglet 2</span>
<span class="onglet_0 onglet" id="onglet_ghi" onclick="javascript:change_onglet('ghi');">Onglet 3</span>
</div>
</td></tr></table>

<!--  Fin de la PA -->

<!-- javascript permettant de choisir l'onglet affiché au chargement de la page -->
<script type="text/javascript">
//<!--
var anc_onglet = 'abc';
change_onglet(anc_onglet);
//-->
</script>
Est-ce que vous pourriez me mettre le code comme il faut avec mes images? Car je crois que ça va être trop compliqué pour moi avec tous les liens onglets qu'il y a partout. X.X
Je vous remercie de votre future aide !


Dernière édition par Oz-Chan le Ven 13 Juil 2012 - 22:30, édité 1 fois
Oz-Chan

Oz-Chan
****

Messages : 388
Inscrit(e) le : 01/01/2010

http://newfofo.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA à onglet.

Message par Invité Ven 13 Juil 2012 - 19:55

Bonjour,

Essayez ceci:
Dans votre CSS, remplacez:
Code:
.onglet_0 { background-image: url(http://i40.servimg.com/u/f40/12/80/18/70/cho10.jpg); padding:8px; margin:3px; font-size:16px; }
.onglet_1 { background-image:url(http://i43.servimg.com/u/f43/16/13/48/98/essais10.jpg); padding:8px; margin:3px; font-size:16px; box-shadow: 0 0 12px black; }
par :
Code:
.onglet_0 { padding:8px; margin:3px; font-size:16px; }
.onglet_1 { padding:8px; margin:3px; font-size:16px; box-shadow: 0 0 12px black; }

#onglet_abc.onglet_1{
background: url('http://i43.servimg.com/u/f43/16/13/48/98/1o10.png');}
#onglet_ledeuxieme.onglet_1{
background: url(' http://i43.servimg.com/u/f43/16/13/48/98/o2o10.png');}
#onglet_ghi.onglet_1 {
background: url(' http://i43.servimg.com/u/f43/16/13/48/98/o3o10.png');}

#onglet_abc.onglet_0{
background: url(' http://i43.servimg.com/u/f43/16/13/48/98/1f10.png');}
#onglet_ledeuxieme.onglet_0{
background: url('  http://i43.servimg.com/u/f43/16/13/48/98/o2f10.png');}
#onglet_ghi.onglet_0 {
background: url('  http://i43.servimg.com/u/f43/16/13/48/98/o3f10.png');}

Et dans votre code HTML, remplacez:
Code:
<span class="onglet_0 onglet" id="onglet_abc" onclick="javascript:change_onglet('abc');">Onglet 1</span>
<span class="onglet_0 onglet" id="onglet_ledeuxieme" onclick="javascript:change_onglet('ledeuxieme');">Onglet 2</span>
<span class="onglet_0 onglet" id="onglet_ghi" onclick="javascript:change_onglet('ghi');">Onglet 3</span>
par :
Code:
<span class="onglet_0 onglet" id="onglet_abc" onclick="javascript:change_onglet('abc');"></span>
<span class="onglet_0 onglet" id="onglet_ledeuxieme" onclick="javascript:change_onglet('ledeuxieme');"></span>
<span class="onglet_0 onglet" id="onglet_ghi" onclick="javascript:change_onglet('ghi');"></span>
Bien sincèrement.
Anonymous

Invité
Invité


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

Résolu Re: Problème PA à onglet.

Message par Oz-Chan Ven 13 Juil 2012 - 20:02

Bonsoir,
merci de votre aide !
Il faudrait encore m'enlever l'espèce de cadre noir ( rectangle ) autour des lettres et ça sera bon normalement !
Merci de votre aide. ^^
Oz-Chan

Oz-Chan
****

Messages : 388
Inscrit(e) le : 01/01/2010

http://newfofo.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA à onglet.

Message par Invité Ven 13 Juil 2012 - 20:09

Pour les bordures, elles sont là:
.onglet { display:inline-block; border:1px solid black; height: 30px; width: 150px; }
en retirant la partie en rouge, le cadre disparait.

Pour l'ombre, elle est là:
.onglet_1 { padding:8px; margin:3px; font-size:16px; box-shadow: 0 0 12px black; }
en retirant la partie en rouge, l'ombre disparait.

Bien sincèrement.
Anonymous

Invité
Invité


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

Résolu Re: Problème PA à onglet.

Message par Oz-Chan Ven 13 Juil 2012 - 20:19

C'est bon merci !
En passant, j'ai un autre petit problème de codage sur ce topic https://forum.forumactif.com/t334543-quelques-problemes-de-codage assez urgent. Pourrais-tu m'aider? ><
Je met déjà merci sur celui-ci et je le clore une fois que tu m'as répondu. ^^
Oz-Chan

Oz-Chan
****

Messages : 388
Inscrit(e) le : 01/01/2010

http://newfofo.com/index.htm
Oz-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème PA à onglet.

Message par Invité Ven 13 Juil 2012 - 22:29

En général, si je ne répond pas dans un topic, c'est que je n'ai pas la solution Razz. J'ai effectivement déjà lu l'autre sujet, mais je ne sais pas trop comment aider. Si je trouve un début de réponse , je ne manquerai pas de la partager Wink.

Bien sincèrement.
Anonymous

Invité
Invité


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

Résolu Re: Problème PA à onglet.

Message par Oz-Chan Ven 13 Juil 2012 - 22:29

Oh dommage.. éè Merci de ton aide en tout cas !>w<
Bon weekend !
Oz-Chan

Oz-Chan
****

Messages : 388
Inscrit(e) le : 01/01/2010

http://newfofo.com/index.htm
Oz-Chan 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