Bonjour,
voici ma demande, j'ai donner le plus d'info possible, mais si vous avez des question n’hésiter pas. demander le moi ^^
merci d’avance.
voici ma demande, j'ai donner le plus d'info possible, mais si vous avez des question n’hésiter pas. demander le moi ^^
merci d’avance.
Commande
Adresse du forum :[ url=http://stargate-multiverse.forums-actifs.net/forum]http://stargate-multiverse.forums-actifs.net/forum[/url]
Description des éléments : j'ai mit des image dans Autre précisions.
Couleurs ou tons : #C49A81 pour les fonds, #000000 pour les bordures et le texte
Images :
motifs de fond
Autres précisions :
en se qui concernent les avatar du staf il leur faudra des infobulle.
Ancienne PA
PA en cours
Feuille CSS
en gros c'est la PA de SPARROW-STYLE qu'il faut modifié ^^
https://www.never-utopia.com/t34852-pa-qeel-en-accordeon-horizonal-en-css-seulement
Adresse du forum :[ url=http://stargate-multiverse.forums-actifs.net/forum]http://stargate-multiverse.forums-actifs.net/forum[/url]
Description des éléments : j'ai mit des image dans Autre précisions.
Couleurs ou tons : #C49A81 pour les fonds, #000000 pour les bordures et le texte
Images :
motifs de fond
Autres précisions :
en se qui concernent les avatar du staf il leur faudra des infobulle.
Ancienne PA
- Code:
<style type="text/css" media="screen">
/* ======================================================================================
===== Message d'accueil =====
script by James1920 de Themes-fa et LBTPROD - Novembre 13, 2010
http://www.themes-fa.com - BY-NC (http://creativecommons.org/licenses/by-nc/2.0/fr/)
====================================================================================== */
/*----------------- Ma general ----------------- */
/* Pour les dÃ
filement */
#scroller_container
{
padding-top: 15px;
overflow: hidden;
}
/* CSS Hack Safari */
#dummy
{
;#
}
#scroller_container
{
overflow: auto;
}
/*le tableau invisible */
.table25
{
border: none ;
}
/* Liens */
.a2
{
display: block;
width: 130px;
color: black;
text-align:center;
border: 1px solid black;
-moz-border-radius: 5px;
height: 30px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
.a2:hover
{
background-color: black;
color: white;
}
#table22 /* fond du ma */
{
width: 770px;
background-color: #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
/*-----------------Titre----------------- */
/* Le titre special pour le texte de bienvenu */
.h2_themebienvenu
{
font-size: 14px;
background-color: #454545;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 367px;
}
/* le titre special pour les credits */
.h2_themecredit
{
font-size: 14px;
background-color: #454545;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
/max-width: 160px;
}
/* le titre pour les autres boites */
.h2_theme
{
font-size: 14px;
background-color: #454545;
padding: 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
color: white;
text-align: center;
margin: 10px;
}
/* effet de transparance FF */
.transparence {
background-color: transparent;
border: none;
opacity: 0.5;
}
.transparence:hover{
background-color: transparent;
border: none;
opacity: 2;
}
/*-----------------Les boites contenant les textes----------------- */
/* Navigation */
.navi_ma
{
background-color:#CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 16px;
height: 300px;
margin: 10px;
width: 130px;
padding: 5px;
line-height:34px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
padding-top: 20px;
}
/* News */
.news
{
background-color: #CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
width: 160px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
}
/* Partenaires */
.partenaire_test
{
background-color: #CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
padding-top: 20px;
}
/* message de bienvenu */
#bienvenu_ma
{
background-color: #CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 120px;
margin: 10px;
overflow-y: auto;
overflow-x: visible;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
width: 370px;
}
/* membres staffs */
.staff
{
background-color: #CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 10px;
height: 105px;
width: 180px;
margin: 10px;
padding: 5px;
font-size: 14px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
padding-top: 20px;
}
/*crÃdits */
.credits
{
background-color: #CCCCFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
color: black;
font-size: 14px;
height: 105px;
width: 160px;
margin: 10px;
padding: 5px;
-webkit-box-shadow: 4px 4px 0 #454545;
-moz-box-shadow: 4px 4px 0 #454545;
-khtml-box-shadow: 4px 4px 0 #454545;
padding-top: 20px;
}
/*-----------------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: #afaeae;
color: black;
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;
}
</style>
</head><body><div id="table22">
<table class="table25">
<tbody><tr>
<td rowspan="2"><h2 class="h2_theme">Navigation</h2><div class="navi_ma">
<a href="http://smallville-universe.superforum.fr/t9-le-contexte-de-smallville-universe" class="a2">Background</a>
<a href="http://smallville-universe.superforum.fr/t2-reglement-du-forum" class="a2">Règlement </a>
<a href="http://smallville-universe.superforum.fr/t11-recensement-des-avatars#11" class="a2">Avatars pris</a>
<a href="http://smallville-universe.superforum.fr/f4-postes-vacants" class="a2">Les vacants</a>
<a href="http://smallville-universe.superforum.fr/t1-modele-de-fiche-de-presentation" class="a2">Présentation</a>
<a href="http://smallville-universe.superforum.fr/f2-news-annonces" class="a2">News</a>
</div>
</td>
<td align="left">
<h2 class="h2_theme">Informations</h2><div class="news">
<p>
• <u>1er Septembre 2011 :</u> Nous recherchons des personnages de la Série, comme <font color="red">Jimmy Olsen</font> ou encore <font color="red">Milton Fine</font>. N'hésitez pas!<br>
• <u>24 Juin 2011 :</u> Nous recherchons des personnages de la Série, n'hésitez pas à les prendre!<br>
• <u>11-12 Juin 2011 :</u> Smallville Universe vient d'ouvrir ses portes. Il reste quelques petits éléments à peaufiner mais l'essentiel est là!<br>
• <u>8 Juin 2011 :</u> Smallville Universe vient d'être créé.<br>
</p>
</div>
</td>
<td colspan="3" align="left">
<h2 class="h2_themebienvenu">Contexte</h2><div id="bienvenu_ma"><div align="center"><p align="justify">Tout commence dans une petite ville du Kansas, nommée Smallville. Rien ne laisser présager ce qui allait se passer en Octobre 1989. Une pluie de météorites s’abattit sur cette ville en causant la mort et la destruction. En effet, des enfants comme Lana Lang virent leurs parents mourir sous cette pluie. Mais entre ces morts et les diverses destructions matérielles, il reste tout de même un peu de bonheur. En effet, un jeune garçon a été recueilli par la famille Kent, étant un rescapé, visiblement orphelin de la pluie de météorite.
Quelques années plus tard, cet enfant du nom de Clark va faire connaissance avec beaucoup de personnes comme Chloé Sullivan, Lana Lang ou encore Lex Luthor qui deviendra son ami grâce au sauvetage de Clark. Tout va pour le mieux dans Smallville mais beaucoup d’évènements vont s’y produire. Entre la conspiration des Luthor pour en comprendre d’aventure sur ces Kryptomonstre, ainsi que des alliances pour faire régner la justice, il ne reste plus beaucoup de temps pour la tranquillité.
Il y a eu un évènement majeur il y a peu. Il s’agit de la fracture du barrage de Smallville. Clark a défié Bizarro dans un combat titanesque qu’il a perdu d’ailleurs. Beaucoup de personnes on faillit mourir dont Lex Luthor, qui venait d’être accusé du meurtre de Lana Lang. Cependant, il a été sauvé par une mystérieuse personne, décrite comme un ange. Cette mystérieuse personne est en fait, une femme venant de Krypton et se révélant être la cousine de Clark. Ce dernier l’héberge donc à la ferme pour qu’elle s’habitue à la vie sur Terre. De plus, Lana Lang fait son retour, après avoir avoué qu’elle avait falsifié sa mort. Elle se retrouve donc avec Clark.
Nous nous situons un peu avant le milieu de la saison 7. En effet, un mot fait son apparition... Véritas. Lionel Luthor semble lier à cette organisation plus qu’il semble le prétendre. Son fils, venant de racheter le Daily Planet compte bien en découvrir le fin mot de cette histoire.
Rejoignez l’aventure de Smallville Uniserve. Combattez du côté du bien ou alors rangez-vous du côté du mal pour semer la terreur et la destruction sur la Terre. Nous n’attendons plus que vous !</p>
<p align="center"><font color="#9d88ce"><i>C'est à vous de jouer!</i></font></p></div></td></tr><br>
</div>
</td>
</tr>
<tr>
<td align="left">
<h2 class="h2_theme">Partenaires</h2><div class="partenaire_test" id="scroller_container">
<div class="jscroller2_left jscroller2_speed-60 jscroller2_mousemove" style="font-size: 14px; line-height: 50px; white-space: nowrap; margin: 0pt;"><a href="http://swheritage.forumgratuit.org/"><img src="http://img202.imageshack.us/img202/7890/swhbanner100x35.png" class="transparence" border="0"></a><a href="http://stargate-rpg.max2forum.com/"><img src="http://i37.servimg.com/u/f37/11/27/57/13/bouton10.jpg" class="transparence" border="0"></a><a href="http://stargatelegacy.forumgratuit.org/"><img src="http://i21.servimg.com/u/f21/11/21/35/63/bouton10.png" class="transparence" border="0"></a><a href="http://roommates.forum-free.org/"><img src="http://i592.photobucket.com/albums/tt10/Kathou86/BoutonPartenariat.gif" class="transparence" border="0"></a><a href="http://piratesofcaribbean.superforum.fr/"><img src="http://img81.imageshack.us/img81/3986/partenaire1eh6.png" class="transparence" border="0"></a><a href="http://deliregate.forumgratuit.org/forum"><img src="http://img62.imageshack.us/img62/5098/logo8831.jpg" class="transparence" border="0"></a> <a href="http://smallville-universe.superforum.fr/t15-nos-partenaires#18">[Plus ?]</a> <a href="http://smallville-universe.superforum.fr/t4-pour-nous-lier#4">[Vous ?]</a></div></div>
</td>
<td colspan="2" align="left">
<h2 class="h2_theme">Le Staff</h2><div class="staff"><div class="infobulle"><img src="http://i21.servimg.com/u/f21/11/21/35/63/eve10.png" class="transparence"><span>EVE<div><img src="http://i21.servimg.com/u/f21/11/21/35/63/eve1010.png"><br> Co-Fondatrice</div><div><a href="http://smallville-universe.superforum.fr/u1">Profil</a></div><div><a href="http://smallville-universe.superforum.fr/privmsg?mode=post&u=1">MP</a></div>
</span></div><div class="infobulle"><img src="http://i21.servimg.com/u/f21/11/21/35/63/clark_10.png" class="transparence"><span>Clark Kent<div><img src="http://i21.servimg.com/u/f21/11/21/35/63/tomwav10.png"><br>Co-Fondateur</div><div><a href="http://smallville-universe.superforum.fr/u2">Profil</a></div><div><a href="http://smallville-universe.superforum.fr/privmsg?mode=post&u=2">MP</a></div>
</span></div>
</div>
</td>
<td align="left">
<h2 class="h2_themecredit">Crédits</h2><div class="credits"> 2010 - 2011 Smallville Universe.<br>Toute reproduction est strictement interdite.</div>
</td>
</tr>
</tbody></table>
</div>
<script type="text/javascript" src="ma_1_fichiers/jscroller2-161.js"></script>
PA en cours
- Code:
<div id="accueil"><div id="page1"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Le Staff & Crédits</span></td><td><div class="contenu">Tout commence dans une petite ville du Kansas, nommée Smallville. Rien ne laisser présager ce qui allait se passer en Octobre 1989. Une pluie de météorites s’abattit sur cette ville en causant la mort et la destruction. En effet, des enfants comme Lana Lang virent leurs parents mourir sous cette pluie. Mais entre ces morts et les diverses destructions matérielles, il reste tout de même un peu de bonheur. En effet, un jeune garçon a été recueilli par la famille Kent, étant un rescapé, visiblement orphelin de la pluie de météorite. Quelques années plus tard, cet enfant du nom de Clark va faire connaissance avec beaucoup de personnes comme Chloé Sullivan, Lana Lang ou encore Lex Luthor qui deviendra son ami grâce au sauvetage de Clark. Tout va pour le mieux dans Smallville mais beaucoup d’évènements vont s’y produire. Entre la conspiration des Luthor pour en comprendre d’aventure sur ces Kryptomonstre, ainsi que des alliances pour faire régner la justice, il ne reste plus beaucoup de temps pour la tranquillité. Il y a eu un évènement majeur il y a peu. Il s’agit de la fracture du barrage de Smallville. Clark a défié Bizarro dans un combat titanesque qu’il a perdu d’ailleurs. Beaucoup de personnes on faillit mourir dont Lex Luthor, qui venait d’être accusé du meurtre de Lana Lang. Cependant, il a été sauvé par une mystérieuse personne, décrite comme un ange. Cette mystérieuse personne est en fait, une femme venant de Krypton et se révélant être la cousine de Clark. Ce dernier l’héberge donc à la ferme pour qu’elle s’habitue à la vie sur Terre. De plus, Lana Lang fait son retour, après avoir avoué qu’elle avait falsifié sa mort. Elle se retrouve donc avec Clark. Nous nous situons un peu avant le milieu de la saison 7. En effet, un mot fait son apparition... Véritas. Lionel Luthor semble lier à cette organisation plus qu’il semble le prétendre. Son fils, venant de racheter le Daily Planet compte bien en découvrir le fin mot de cette histoire. Rejoignez l’aventure de Smallville Uniserve. Combattez du côté du bien ou alors rangez-vous du côté du mal pour semer la terreur et la destruction sur la Terre. Nous n’attendons plus que vous !
C'est à vous de jouer!</div></td></tr></table></div><div id="page2"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Partenaires</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page3"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Contexte</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page4"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Informations</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page5"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Navigation</span></td><td><div class="contenu">--</div></td></tr></table></div>
</div>
<!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
<span class="credit"><a href="http://www.never-utopia.com">(c)
Feuille CSS
- Code:
a.forumlink:link, a.forumlink:visited {
font-family: Georgia;
font-weight: bold;
Font-style: italic;
text-align: left;
font-size: 21px;
letter-spacing: -2px;
display: block;
margin-left: 30px;
}
span a.forumlink:hover {
text-align: left;
text-transform : lowercase;
letter-spacing: 1px;
display: block;
text-decoration:none;
font-weight: bold;
}
body {
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top center;
}
a.mainmenu{
font-family: Georgia;
text-transform : lowercase;
font-weight: bold;
letter-spacing:0px;
text-align: center;
text-decoration:none;
text-shadow:1px 1px 1px #000000;
font-size: 20px;
color:#E3AF3D;
}
a.mainmenu:hover {
text-decoration:none;
color:#BF1B1B;
text-shadow: none;
border:dashed 0px #e5a462;
text-shadow:1px 1px 1px #000000;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}
a.forumlink:hover {text-transform:uppercase;}
a:hover{text-transform:lowercase;}
a { text-decoration: none; }
/* TITRE CAT INDEX*/
.secondarytitle, .secondarytitle h2{
color: #E3AF3D;
font-size: 40px;
font-variant: small-caps;
text-align: center;
font-family: Georgia;
Font-style: italic;
text-shadow:1px 1px 3px #000000;
}
.forumline{
background-image: url(http://data.imagup.com/11/1136126227.gif);
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
border-bottom: 6px #1c1102 solid;
border-top: 1px #000000 dotted;
border-right: 2px #000000 solid;
border-left: 2px #000000 solid;
text-align: center;
background-color: #000000;
padding-left: 8px; /*espace entre les bloc et le cadre de l'index*/
padding-right: 8px; /*espace entre les bloc et le cadre de l'index*/
padding-bottom: 8px; /*espace entre les bloc et le cadre de l'index*/
padding-top: -200px;
}
.row3Right{
border: none !important;
}
.thHead{
border: none !important;
}
.thCornerL, .thCornerR, .thTop{
border: none !important;
}
.thLeft, .thRight{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight{
border: none! important;
}
.catHead{
border: none !important;
}
.catBottom{
border: none !important;
}
.introduction
{
font-family: Georgia;
text-transform : lowercase;
font-weight: bold;
letter-spacing:1px;
text-align: center;
text-decoration:none;
text-shadow:1px 0px 1px #000000;
font-size: 20px;
color:#E3AF3D;
}
#accueil
{
width: 900px;
height: 400px;
overflow: hidden;
background: url(http://data.imagup.com/11/1136125964.jpg) center no-repeat;
border: 3px solid #272727;
}
#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page1:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #777777;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #9b9b9b;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #bababa;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #dcdcdc;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
.contenu_page
{
width: 100%;
height: 400px;
}
.page_titre
{
display: inline-block;
height: 40px;
width: 400px;
color: #E3AF3D;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: Georgia;
letter-spacing: 0px;
text-shadow: 1px 1px 1px #000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
text-transform : lowercase;
font-weight: bold;
text-decoration:none;
}
.contenu
{
width: 0px;
height: 0px;
background-color: white;
overflow: hidden;
padding: 6px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
{
width: 650px;
height: 380px;
margin-left: -180px;
background-color: white;
overflow: none;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}
en gros c'est la PA de SPARROW-STYLE qu'il faut modifié ^^
https://www.never-utopia.com/t34852-pa-qeel-en-accordeon-horizonal-en-css-seulement
!