Miss Sherlock
{ Membre }
Messages : 51
| J'ai un gros gros gros gros soucis de HTML et CSS... J'ai bien suivi votre tutoriel pour faire des onglets et tout ça, j'ai tout bien installé, la page d'accueil marche très bien quand elle est sur une page HTML seule et tout ça mais le problème est le suivant : quand j'installe le code une fois complet sur la PA tout disparaît ! Et quand je retire le code tout est normal... voyez plutôt : https://imgur.com/TKBOS.png voilà le lien de mon forum si vous voulez constater de vous même : http://followmedown.1fr1.net et le lien de ma page HTML : http://followmedown.1fr1.net/PAGE-ACCEUIL-FINALE-h8.htm Pouvez-vous m'aider ???? Voici mon CSS : - Spoiler:
- Code:
-
a.mainmenu { background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; } a.mainmenu:hover{ background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; }
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; background-color: #E8DBBA; border-bottom: 5px double #5d040a; color:#5d040a; font-family: sans-serif; font-size: 12px; font-weight: lighter; letter-spacing: 1px; display:block; text-align: center; text-decoration: none !important; }
a.forumlink:hover{ color:#5d040a; font-family: georgia; font-size: 12px; font-weight: lighter; letter-spacing: 1px; text-align: center; text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE AFFICHAGE DES CATÉGORIES - - - - - - - - - - - -
a:hover { text-decoration: none !important; } a:link { text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE DES SOULIGNEMENTS DE LIENS - - - - - - - - - - - -
a { font-variant: small-caps; text-decoration: none !important; } a:hover { font-variant: small-caps; text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE AFFICHAGE DES LIENS - - - - - - - - - - - -
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; cursor:pointer; font-family: Times New Roman; background-color : #e8dbba; color : #e6763a; } .onglet_0 { font-family: Times New Roman; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; background-color : #e8dbba; color : #e6763a; } .onglet_1 { padding-bottom:4px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; font-family: Times New Roman; background-color : #e8dbba; color : #e6763a; } .contenu_onglet { margin-left:3px; margin-right:3px; padding:3px; display:none; -moz-border-radius: 15px; width: 900px; font-family: Times New Roman; background-color : #f3ecda; color : #5b2103; } - - - - - - - - - - - - FIN CODAGE ONGLETS - - - - - - - - - - - -
.bodyline{ -moz-border-radius: 6px;}
textarea, .textarea.post, input.post { -moz-border-radius:4px; }
body { background-repeat: no-repeat; } a { text-decoration: none; }
.bodyline { -moz-border-radius:4px; }
.forumline{ background-color: #ff6057; -moz-border-radius: 6px ; border: 3px double #E8DBBA; }
.postbody { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; }
td.row1 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; } td.row2 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; } td.row3 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; }
td.row3Right { background:url(‘http://imgur.com/2qkt3.jpg'); border-style: none }
td.row3{ background-image: url("http://imgur.com/2qkt3.jpg"); }
a.mainmenu { background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; } a.mainmenu:hover{ background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; }
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; background-color: #E8DBBA; border-bottom: 5px double #5d040a; color:#5d040a; font-family: sans-serif; font-size: 12px; font-weight: lighter; letter-spacing: 1px; display:block; text-align: center; text-decoration: none !important; }
a.forumlink:hover{ color:#5d040a; font-family: georgia; font-size: 12px; font-weight: lighter; letter-spacing: 1px; text-align: center; text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE BARRE DE NAVIGATION + CATÉGORIES - - - - - - - - - - -
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; cursor:pointer; font-family: Times New Roman; background-color : #e8dbba; color : #e6763a; } .onglet_0 { font-family: Times New Roman; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; background-color : #e8dbba; color : #e6763a; } .onglet_1 { padding-bottom:4px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; font-family: Times New Roman; background-color : #e8dbba; color : #e6763a; } .contenu_onglet { margin-left:3px; margin-right:3px; padding:3px; display:none; -moz-border-radius: 15px; width: 900px; font-family: Times New Roman; background-color : #f3ecda; color : #5b2103; } - - - - - - - - - - - - FIN CODAGE ONGLETS - - - - - - - - - - - -
a { color:#BE814A; }
table#qeel-st td.row2 td.row1 { background-color:transparent; }
.groupe:before { content:" ♣ " }
- - - - - - - - - - - FIN CODAGE AFFICHAGE QEEL - - - - - - - - - - - -
.bodyline{ -moz-border-radius: 6px;}
textarea, .textarea.post, input.post { -moz-border-radius:4px; }
body { background-repeat: no-repeat; } a { text-decoration: none; }
.bodyline { -moz-border-radius:4px; }
.forumline{ background-color: #ff6057; -moz-border-radius: 6px ; border: 3px double #E8DBBA; }
.postbody { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; }
td.row1 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; } td.row2 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; } td.row3 { background-repeat: repeat; background-image: url(‘http://imgur.com/2qkt3.jpg); background-position: center; }
td.row3Right { background:url(‘http://imgur.com/2qkt3.jpg'); border-style: none }
td.row3{ background-image: url("http://imgur.com/2qkt3.jpg"); }
a.mainmenu { background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; } a.mainmenu:hover{ background-color: #E8DBBA; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; text-decoration: none !important; color : #ffffff; font-size: 10px; }
a.forumlink{ -moz-border-radius: 7px 7px 7px 7px; background-color: #E8DBBA; border-bottom: 5px double #5d040a; color:#5d040a; font-family: sans-serif; font-size: 12px; font-weight: lighter; letter-spacing: 1px; display:block; text-align: center; text-decoration: none !important; }
a.forumlink:hover{ color:#5d040a; font-family: georgia; font-size: 12px; font-weight: lighter; letter-spacing: 1px; text-align: center; text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE BARRE DE NAVIGATION + CATÉGORIES - - - - - - - - - - -
a:hover { text-decoration: none !important; } a:link { text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE DES SOULIGNEMENTS DE LIENS - - - - - - - - - - - -
a { font-variant: small-caps; text-decoration: none !important; } a:hover { font-variant: small-caps; text-decoration: none !important; }
- - - - - - - - - - - - FIN CODAGE AFFICHAGE DES LIENS - - - - - - - - - - - -
.vignette_pa { background-color: #c1b594; border: 1px solid #7b7052; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #574001; padding: 5px; }
.cellule { background-color: #f7f2af; border: 1px solid #83825e; width: 170px; height: 150px; }
.cellule2 { background-color: #f7f2af; border: 1px solid #33362d; color: #333b00; width: 350px; height: 150px; font-size: 12px; font-family: georgia, serif; text-align: center; font-style: italic; font-variant: small-caps; overflow: auto; }
.credit { font-size: 11px; font-family: georgia, serif; text-align: center; font-style: italic; font-variant: small-caps; }
.cellule3 { background-color: #f7f2af; border: 1px solid #83825e; width: 180px; height: 50px; }
- - - - - - - - - - - - FIN CODAGE AFFICHAGE DE LA PAGE D'ACCUEIL - - - - - - - - - - - -
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; cursor:pointer; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .onglet_0 { font-family: Casual, sans-serif; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; background-color : #ffa3cc; color : #000000; } .onglet_1 { padding-bottom:4px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .contenu_onglet { margin-left:3px; margin-right:3px; padding:3px; display:none; -moz-border-radius: 15px; width: 900px; font-family: Casual, sans-serif; background-color : #f5dce7; color : #000000; } - - - - - - - - - - - - FIN CODAGE ONGLETS - - - - - - - - - - - -
Voilà le code HTML que j'utilise : - Spoiler:
- Code:
-
<center><div class="onglets"> <span class="onglet_0 onglet" id="onglet_1" onmouseover="javascript:change_onglet('1');">Everything is new</span> ♣ <span class="onglet_0 onglet" id="onglet_2" onmouseover="javascript:change_onglet('2');">Your lovely Staff</span> ♣ <span class="onglet_0 onglet" id="onglet_3" onmouseover="javascript:change_onglet('3');">Keys of the World</span> ♣ <span class="onglet_0 onglet" id="onglet_4" onmouseover="javascript:change_onglet('4');">We told you about them</span> </div></center>
<div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_1"> <center> <table width="80%"> <td width="45%"><center> <div class="h1" align="center"><br> <img src="http://imgur.com/MYf1X.png"></div></center> <br> <div align="justify"> <font color="#5b2103"><font size="2">2010, une année placée sous la réussite et la luxure ! Des stars se côtoient dans les plus grandes villes de la planète ! Cependant, réussiront-elles à remonter la pente de la décadence qui les entraîne encore plus profondément dans le luxe, la richesse, la célébrité et la réussite ? Ou, au contraire, la remonteront-elle pour n'être plus qu'un vague souvenir de ce qu'elles étaient ?
Ici vous aurez le choix de votre avenir : célébrité et luxe ou ignorance et confort modeste. À vous de choisir mais n'oubliez pas, ici tout se sait, tout à un prix et il n'y a qu'une seule route qui s'offre à vous : la Pente de la Décadence... La descendrez-vous ou la remonterez-vous ?
6 villes de rêves, 6 métiers de rêve, des stars à rencontrer, une vie à mener, quels choix ferrez-vous ?<br><a href="LIEN">more.</a></font><br><br></font></div>
</td> <td width="5%"></td> <td width="40%"> <center> <div class="h1" align="center"><br><img src="http://imgur.com/0Ucvc.png"></div></center> <br><font size="2"><table align="center"><tbody><tr><td> <div class="lienpa"><img src="http://followmedown.1fr1.net/reglement-et-histoire-f1/concept-t1.htm">contexte</a> </div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="http://followmedown.1fr1.net/reglement-et-histoire-f1/reglement-t2.htm">règlement</a></div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="RPG">rp eng/fr</a></div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="INVITÉS">invités</a></font><br><br></div></td>
<td><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="SCÉNARIOS">scénarios</a> </div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="AVATARS">botin des avatars</a></div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="http://followmedown.1fr1.net/nouveaux-arrivants-f3/">présentations </a></div><div class="lienpa"><img src="http://i39.tinypic.com/nyzl7p.png" alt="" border="0"> <a href="http://followmedown.1fr1.net/partenaires-f12/we-told-you-about-them-nos-partenaires-t54.htm#420">publicité</a><br><br></div></td></tr></tbody></table> <center> <div class="h1" align="center"><img src="http://imgur.com/qDGq2.png"></div></center> <br> <font size="2">Le forum est l'entière propriété de L.H.K.K. le plagiat est interdit en quoi que ce soit (sans permission)<br><i>© L.H.K.K.</i><br>Création du forum - codage - design : <i>Vanille W.</i><br><i>Idée originale : Emily W. & Ian S.</i></font><br><br></td>
</table></center></div>
<div class="contenu_onglet" id="contenu_onglet_2"><ul><IFRAME src=" http://desessais.1fr1.net/Javascript-h8.htm" width="95%x" height="450px" frameborder=0 > </IFRAME></ul></div>
<div class="contenu_onglet" id="contenu_onglet_3"><center><table width="80%"> <td width="45%"> <center> <div class="h1" align="center"><br><img src="http://imgur.com/xKclm.png"><br></div></center> <br> <div align="justify"><font size="2"><i>OMG</i>. En plus clair. Oh mon dieu. Ce sont les premiers mots qui sortiront à coup sûr de votre bouche si vous vous laissez entraîner dans cette fabuleuse aventure. C’est de l’inédit, du nouveau, du tout frais, du <i>‘in’</i>. Imaginez vous, vous pavanant sur un somptueux bateau de croisière, imaginez le champagne qui coule à flot, la musique qui bat son plein, et les gens qui se pavanent. Des filles séduisantes pour ces <i>gentlemen</i>, des hommes charmants pour nos <i>ladys</i>. La fête de la musique, des groupes mythique qui pour la première fois, viennent faire un concert au beau milieu de la Manche. C’est ce qu’a imaginé un des plus grands jet setteur, et voilà, l’idée a été trouvée <i>so amazing</i> et pour la première fois se voit réalisée... Qui aurait pu imaginer que vous auriez pu côtoyer vos stars fétiches et les plus célèbres ?<br><br></font></td>
<td width="2%"></td> <td width="50%"><center> <center> <div class="h1" align="center"><img src="http://imgur.com/skN3h.png"></div></center> <br>
<font size="2"><b><i>ouverture du forum</i></b> ....... 28.06.2010 ; le staff vous souhaite la bienvenue sur <i>Love me, hate me, kiss me, kill me.</i><br></font>
<br><center> <div class="h1" align="center"><img src="http://imgur.com/nljdN.png"><br></div></center> <table><td width="60px"> <img src="http://france.meteofrance.com/meteo/pictos/web/SITE/50/0_a.gif" /> <br><font size="2"> 26°C - 34°C</font></td><td><font size="2"> Nous sommes au mois de <b> Juillet</b> 2010. Il fait beau, et terriblement chaud. Les gens se ruent dans les piscines municipales, voir les fontaines. Y'a comme un goût de vacances qui traîne.</font> </td></table> </td></table></center></div>
<div class="contenu_onglet" id="contenu_onglet_4"><table width="80%"><td width="40%" style="font-size: 12px;" > <center> <div class="h1" align="center"><br><img src="http://imgur.com/xFzW8.png"><br><br></div></center> <div width="80%" style="border-left: 3px solid gainsboro; border-right: 3px solid gainsboro;" align="center"><a href="http://chronicles-narnia.1fr1.net/">Chronicles of Narnia</a></div> <div width="80%" style="border-left: 3px solid gainsboro; border-right: 3px solid gainsboro;" align="center"><a href="http://niennaancalime.skyrock.com/">The Black Pearl</a> </div> <div width="80%" style="border-left: 3px solid gainsboro; border-right: 3px solid gainsboro;" align="center"><a href="http://marauders-map.1fr1.net/">Hogwart's School</a></div><div width="80%" style="border-left: 3px solid gainsboro; border-right: 3px solid gainsboro;" align="center"><a href="http://the-vampire-diaries.forum-actif.net/forum.htm">Vampire Diaries</a> </div>
<br> <center><a href="LIEN"> nous lier </a> • <a href="http://followmedown.1fr1.net/partenaires-f12/we-told-you-about-them-nos-partenaires-t54.htm#420"> nos partenaires </a></center> <br> </td> <td width="5%"></td> <td width="50%"> <center> <div class="h1" align="center"><br><img src="http://imgur.com/Wz4Iu.png"><br></div></center>
<br><center> <img src="http://imgur.com/RK304.png" border="0"> - <img src="http://imgur.com/FhfpU.png" border="0"><br> <br> <div class="h1" align="center"><br><img src="http://imgur.com/2CywP.png"></div></center><br> <table width="75%"><div width="50%" style="border-left: 3px solid gainsboro; border-right: 3px solid gainsboro;" align="center"><img src="http://imgur.com/Xt8am.jpg"><font size="1"><br>©Orange<br><br>Bravo à Vanille WARELL qui remporte le concours !<br>Nombre de votes : 1<br><br>Galerie : <a href="http://followmedown.1fr1.net/graphisme-f11/icone-du-mois-concours-t11.htm#57">ICI</a> <br>Voter : <a href="http://followmedown.1fr1.net/graphisme-f11/icone-du-mois-votes-t19.htm#174">ICI</a></font></table></div> </div> </div> </div> <script type="text/javascript"> //<!-- var anc_onglet = '1'; change_onglet(anc_onglet); //--> </script>
|
Dernière édition par Miss Sherlock le Jeu 29 Juil 2010, 13:44, édité 1 fois | |
|
Miss Sherlock
{ Membre }
Messages : 51
| Finalement c'est bon, j'ai trouvé ma solution, excusez-moi du dérangement | | |
|
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Parfait ;P Je classe | | |
|