Vertical Accordion Menu

Paulos έγραψε:Κοιταξε πιο σημαντικα πραγματα στη σελιδα σου αυτα ειναι περιττα σαν συμβουλη στο λεω επισης μετα θα σου αρεσουν κι αλλα πραγματα τα οποια παλι δεν θα μπορεις να τα κανεις...οχι οτι ειναι επιστημη απλα καποια θελουν γνωσεις ισα ισα html ναι css ξερει και ενα 5 χρονο...Επισης θα στο εκανα εγω αλλα εκει μεσα θα πρεπει να μπουν λινκ και εικονες της σελιδα σου αυτα δεν γινεται να στα κανουμε εμεις... :D

Paulos έγραψε:Μιση τελεια να κανεις λαθος θα εχεις προβλημα... :D

Κώδικας:



<div id="page1">
      <table class="contenu_page">
         <tr>
            <td style="width: 40px; overflow: hidden;"><span class="page_titre">Η Ιστορία</span></td>
            <td><div class="contenu" style="text-align: justify; padding-left: 10px; padding-right: 10px; color: #000000; font-size: 11px"><center><img src="http://img80.imageshack.us/img80/2056/dokimi1.png" /></center><strong>Πρόλογος</strong><br>Η περιπέτεια διαδραματίζεται σε έναν φανταστικό κόσμο. Η τεχνολογία είναι ανάλογη του δικού μας 19ου αιώνα με ελάχιστες εξαιρέσεις. Όπως είναι ο κόσμος (σφαίρα) απαρτίζεται κυρίως από θάλασσα, κομμάτια ξηράς και πάρα πάρα πολλά νησιά στην κάθε θάλασσα. Αυτήν την σφαίρα την χωρίζει σε δυο ημισφαίρια ένα μεγάλο κομμάτι απροσπέλαστης γης, η Κόκκινη Γραμμή, ενώ τα δυο ημισφαίρια γίνονται 4 όταν λαμβάνεις υπόψην σου ένα θαλάσσιο ρεύμα, την Μεγάλη Γραμμή, όπου δεξιά της και αριστερά της υπάρχει η Ήρεμη Ζώνη όπου για άγνωστο λόγο δεν υπάρχει ίχνος ανέμου εκεί πέρα και η θάλασσα κατοικείται από θαλάσσια τεράστια τέρατα, άρα και τα πλοία, κατά κανόνα, δεν μπορούν να την ταξιδέψουν.

Αυτά τα 4 ημισφαίρια έχουν ονομαστεί ως οι 4 θάλασσες του κόσμου. Ο λόγος γίνεται για την East Blue, West Blue, South Blue, North Blue. Και οι 4 αυτές θάλασσες έχουν πρόσβαση στην Κόκκινη Γραμμή. Συγκεκριμένα όμως, το ένα από τα δυο κοινά τους σημεία, το Reverse Mt.(το άλλο είναι το Mariejois), μπορούν να το χρησιμοποιήσουν ως την είσοδο τους για την Μεγάλη Γραμμή.
Το Reverse Mt. είναι ένα απότομο βουνό όπου από την κορυφή του κυλάνε 5 ρεύματα. Το περίεργο σε αυτό είναι ότι μόνο το 1 κυλάει προς τα κάτω! Τα υπόλοιπα 4 σε τραβάνε προς την κορυφή του βουνού. Έτσι οι επίδοξοι που θέλουν να πάνε στην Μεγάλη Γραμμή, σκαρφαλώνουν ένα από τα 4 ρεύματα (το κάθε ρεύμα αντιστοιχεί σε μια θάλασσα) και μετά κατεβαίνουν το μοναδικό ρεύμα και καταλήγουν στην Μεγάλη Γραμμή. <a href="http://www.onepiecegr-rpg.com/t1964-topic">Η συνέχεια εδώ</a></div></td>
         </tr>
      </table>
   </div>
   
   <div id="page2">
      <table class="contenu_page">
         <tr>
            <td style="width: 40px; overflow: hidden;"><span class="page_titre">Οι Καλυτεροι</span></td>
            <td><div class="contenu">
            <table>
               <tr>
                  <td valign=top align=center><strong>Wanted Posters</strong><br><br>
                     <img src="http://img542.imageshack.us/img542/5512/messid.png" height=150 />
                     <img src="http://img862.imageshack.us/img862/3797/sakurat.png" height=150 />
                           <img src="http://img266.imageshack.us/img266/8844/kurankanameposter.png" height=150 />
                                                       
                                                                                                                                               

                   
                                                                                                                                                                                                                                                                                 
                  </td>
                  
                  
               </tr>
               <tr>
                  <td valign=bottom align=center colspan=2><strong>Famed Posters</strong><br><br>
                     <img src="http://img849.imageshack.us/img849/5921/rikkidometaruposter.png" height=150 />
                                                        <img src="http://img99.imageshack.us/img99/5872/hannahjintoposter.png" height=150 />
                                                        <img src="http://img210.imageshack.us/img210/8660/minatod.png" height=150 />
                  </td>
               </tr>
            </table>
            </div></td>
         </tr>
      </table>
   </div>
   
   <div id="page3">
      <table class="contenu_page">
         <tr>
            <td style="width: 40px; overflow: hidden;"><span class="page_titre">Membres du Staff</span></td>
            <td><div class="contenu">
            <table align=center>
               <tr align=center valign=top>
                  <td width=180 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="http://op-new-genesis-v2.forumgratuit.org/u3" target="_blank" rel="nofollow"><img src="http://img73.xooimage.com/files/9/2/6/1-30687fa.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Pain, Fondateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 100px; overflow: auto; text-align: justify"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;">Pain effectue son travail de Fondateur a temps plein : gerant les topsites, s'occupant du design et du codage, il est des fois surmene par les taches et la paresse s'empare de lui. Il lui arrive d'etre desespere quand le staff ou meme les membres ne font rien pour le forum et dans ces cas la a un sale caractere pouvant se reveler persecutif. Souvent present sur la ChatBox, c'est le meilleur moyen de le contacter.</font></div>
                  </td>
                  
                  <td width=180 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="http://op-new-genesis-v2.forumgratuit.org/u4" target="_blank" rel="nofollow"><img src="http://img66.xooimage.com/files/9/d/f/taku-3069a55.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Takumi, Adminisrateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 100px; overflow: auto; text-align: justify"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;">Takumi est le bras droit de Pain. Il est le responsable de la video introduisant le forum, et a contribue a l'etablissement de la V2. Il a un caractere passif, il ne reflechit pas, ou pas trop, et est un troll en puissance. Son manque de serieux est meme problematique la plupart du temps. On le voit souvent trainer tel un fantome sur la ChatBox, il sera surement le plus accueillant de tous, alors n'ayez pas peur de lui.</font></div>
                  </td>
                  
                  <td width=180 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="http://op-new-genesis-v2.forumgratuit.org/u9" target="_blank" rel="nofollow"><img src="http://img72.xooimage.com/files/7/0/2/dae-3069bed.png" /></a><font style="text-transform: uppercase; font-weight: bold;">D?mon, Administrateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 100px; overflow: auto; text-align: justify"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;">D?mon est le second administrateur, mais au contraire de Takumi il est rare que Pain lui donne directement des taches a accomplir (sauf si Takumi est absent). Il a aussi aide a l'etablissement de la V2. Il est responsable et passif, accueillant mais imprevisible, au contraire de Takumi il demeurre paresseux dans n'importe quelle circonstance. Pour le contacter mieux vaut utiliser les Messages Prives.</font></div>
                  </td>
               </tr>
            </table>
            <table align=center>
               <tr align=center valign=top>
                  <td width=150 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="http://op-new-genesis-v2.forumgratuit.org/u22" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/3/c/a/hakan-306a1f2.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Hakan, Moderateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 90px; overflow: auto; text-align: justify; width: 150px"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;">Hakan est un moderateur tres implique dans son travail. Il peut souvent se reveler lourd du fait de ses remarques abondantes et se charge parfois d'etre le bouc emissaire du staff (notamment de Pain), mais il est la pour aider et ce sont les intentions qui comptent. Regulierement present, il est possible de le contacter sur la ChatBox comme par Messages Prives. Il peut etre un bon guide pour ceux qui se sont perdu.</font></div>
                  </td>
                  
                  <td width=150 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/1/a/9/you--306a4dd.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Libre, Moderateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 90px; overflow: auto; text-align: justify; width: 150px"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;"></font></div>
                  </td>
                  
                  <td width=150 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/1/a/9/you--306a4dd.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Libre, Animateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 90px; overflow: auto; text-align: justify; width: 150px"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;"></font></div>
                  </td>   
                  
                  <td width=150 style="background-color: #000000 ;border: 2px solid black; -moz-border-radius: 10px 10px 00px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                     <div style="text-align: center;"><a href="" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/1/a/9/you--306a4dd.png" /></a><font style="text-transform: uppercase; font-weight: bold;">Libre, Animateur.</font><br></div>
                     <div style="padding-left: 2px; padding-right: 2px; height: 90px; overflow: auto; text-align: justify; width: 150px"><font size=1 color="#912b2b" style="text-shadow: 0px 0px 0px #FFFFFF;"></font></div>
                  </td>
               </tr>
            </table></div></td>
         </tr>
      </table>
   </div>
   
   <div id="page4">
      <table class="contenu_page">
         <tr>
            <td style="width: 40px; overflow: hidden;"><span class="page_titre">Amis et Topsites</span></td>
            <td><div class="contenu">
            <table align=center>
               <tr align=center valign=top>
                  <td width=320 style="background-color: #000000;border: 2px solid #000000; -moz-border-radius: 10px 10px 10px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                  <div style="text-align: center;"><font style="text-transform: uppercase; font-weight: bold;">News</font><br><br></div>
                  <div style="padding-left: 2px; padding-right: 2px; text-align: justify; height: 150px; overflow: auto"><font size=1 color="#b2096c" style="text-shadow: 0px 0px 0px #FFFFFF; text-transform: uppercase; font-weight: bold;">
                  - 1er Recensement des membres : <a href="http://op-new-genesis-v2.forumgratuit.org/t92-1er-recensement-des-membres" target="_blank" rel="nofollow">ici</a><br><br>
                  - Recompenses des Votes (Hebdo): <a href="http://op-new-genesis-v2.forumgratuit.org/t78-recompenses-du-top-votant-de-la-semaine" target="_blank" rel="nofollow">ici</a><br><br>
                  - Recensement des FDD : <a href="http://op-new-genesis-v2.forumgratuit.org/t31-recensement-des-fdd" target="_blank" rel="nofollow">ici</a><br><br>
                  - Recensement des Armes : <a href="http://op-new-genesis-v2.forumgratuit.org/t30-recensement-des-armes" target="_blank" rel="nofollow">ici</a><br><br>
                  - Recensement des Avatars : <a href="http://op-new-genesis-v2.forumgratuit.org/t32-registre-des-avatars" target="_blank" rel="nofollow">ici</a><br><br>
                  - Descriptions Post-Presentations : <a href="http://op-new-genesis-v2.forumgratuit.org/t29-description-post-presentations" target="_blank" rel="nofollow">ici</a><br><br>
                  - Remise a Zero des Topsites : <a href="http://op-new-genesis-v2.forumgratuit.org/t77-remise-a-zero-des-topsites" target="_blank" rel="nofollow">ici</a><br></font></div>
                  </td>
                  <td style="background-color: #000000; border: 2px solid black; -moz-border-radius: 10px 10px 10px 10px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                  <div style="text-align: center;"><font style="text-transform: uppercase; font-weight: bold;">Topsites</font><br></div>
                  <a href="http://en.root-top.com/toplist/gilgamesh/in.php?IDmark=5626" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/4/a/9/topsite-30737fd.png" /></a>
                  <a href="http://www.root-top.com/topsite/azzare34/in.php?IDmark=7258" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/4/a/9/topsite-30737fd.png" /></a>
                  <a href="http://www.root-top.com/topsite/virtu4ldreaiviz/in.php?IDmark=2979" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/4/a/9/topsite-30737fd.png" /></a>
                  </td>
               </tr>
               <tr align=center valign=top>
                  <td colspan=2 style="background-color: #000000; border: 2px solid black; -moz-border-radius: 10px 10px 0px 0px; padding: 0px; -moz-box-shadow: 0px 0px 3px #000000; margin: 10px">
                  <div style="text-align: center;"><font style="text-transform: uppercase; font-weight: bold;">Partenaires</font><br><br></div>
                  <a href="http://bleach-lt.forumactif.com/" target="_blank" rel="nofollow"><img src="http://img70.xooimage.com/files/d/c/d/1-300b968.jpg" /></a>
                  <a href="http://bleach-techniques-rp.1fr1.net/" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/7/a/4/2-300b988.jpg" /></a>
                  <a href="http://b-exorcist-rpg.forumgratuit.org/" target="_blank" rel="nofollow"><img src="http://img68.xooimage.com/files/3/1/9/3-300b9b0.jpg" /></a>
                  <a href="http://shinobinohanashi.forumsrpg.com/" target="_blank" rel="nofollow"><img src="http://img75.xooimage.com/files/f/3/0/4-300b9b7.jpg" /></a>
                  <a href="http://saintseiyamemories.forumactif.com/" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/7/d/e/5-300b9c1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  <a href="http://op-new-genesis-v2.forumgratuit.org/f197-demarches-de-partenariat" target="_blank" rel="nofollow"><img src="http://img69.xooimage.com/files/f/e/7/partenariat-copie-30738b1.jpg" /></a>
                  </td>
               </tr>
            </table>
            </div></td>
         </tr>
      </table>
   </div>
   
   <div id="page5">
      <table class="contenu_page">
         <tr>
            <td style="width: 40px; overflow: hidden;"><span class="page_titre">La ChatBox</span></td>
            <td><div class="contenu">
               <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                     <td class="row1">
                     <div id="chatbox_top" align="center" style="overflow: none; height: 380px"></div>
                     <script type="text/javascript">insertChatBox('chatbox_top', '/chatbox/index.forum?page=front&');</script>
                     </td>
                  </tr>
               </table>
            </td></div>
         </tr>
      </table>
   </div>
</div>


Κώδικας:



#accueil{
width: 900px;
height: 400px;
background-image: url('http://img71.xooimage.com/files/c/8/a/pa-3-3091298.jpg');
background-repeat: no-repeat;
background-position:right top;
border-radius: 25px;
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;
}

#page1{
background-color: #333324;
color: #FFF93D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FFF93D;
border-radius:10px 0px 0px 10px;
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{
background: url('http://img69.xooimage.com/files/c/9/3/yellow-3032b39.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84.6%;
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{
background-color: #332C24;
color: #FF813D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-top: 1px solid #FF813D;
border-left: 1px dashed #FF813D;
border-bottom: 1px solid #FF813D;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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 {
background: url('http://img72.xooimage.com/files/7/1/c/orange-3032b3d.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background-color: #332424;
color: #FF3D3D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FF3D3D;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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{
background: url('http://img71.xooimage.com/files/e/7/a/red-3032b3e.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background-color: #33242B;
color: #FF3D94;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FF3D94;
border-right: 1px dashed #FF3D94;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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{
background: url('http://img70.xooimage.com/files/9/6/1/pink-3032b43.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
-moz-border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background: url('http://img74.xooimage.com/files/7/4/d/purple-3032b4b.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
margin-left:0px;
width: 755px;
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;
color: #AB3DFF;
border-radius:0px 10px 10px 0px;
}

.contenu_page{
width: 100%;
height: 400px;
}

.page_titre{
display: inline-block;
text-shadow: 1px 1px 0px #000000;
height: 40px;
width: 400px;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: Verdana, Arial;
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

.contenu{
width: 0px;
height: 0px;
background: url('http://img9.xooimage.com/files/c/5/f/f-2b76663.png') repeat;
overflow: hidden;
padding: 5px;
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 {
width: 650px;
height: 380px;
margin-left: -180px;
background: url('http://img9.xooimage.com/files/c/5/f/f-2b76663.png') repeat;
overflow: none;
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;
border-radius:10px;
}

#page5 .contenu {
width: 650px;
height: 380px;
margin-left: -180px;
background: url('http://img66.xooimage.com/files/a/a/d/pbody-3014495.png') repeat;
overflow: none;
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;
border-radius:10px;
}


Paulos έγραψε:χαχαχα θα το δω τωρα...

Κώδικας:

#accueil{
width: 900px;
height: 400px;
background-image: url('http://img71.xooimage.com/files/c/8/a/pa-3-3091298.jpg');
background-repeat: no-repeat;
background-position:right top;
border-radius: 25px;
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;
}

#page1{
background-color: #333324;
color: #FFF93D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FFF93D;
border-radius:10px 0px 0px 10px;
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{
background: url('http://img69.xooimage.com/files/c/9/3/yellow-3032b39.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84.6%;
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{
background-color: #332C24;
color: #FF813D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-top: 1px solid #FF813D;
border-left: 1px dashed #FF813D;
border-bottom: 1px solid #FF813D;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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 {
background: url('http://img72.xooimage.com/files/7/1/c/orange-3032b3d.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background-color: #332424;
color: #FF3D3D;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FF3D3D;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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{
background: url('http://img71.xooimage.com/files/e/7/a/red-3032b3e.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background-color: #33242B;
color: #FF3D94;
width: 39px;
height: 400px;
float: left;
overflow: hidden;
border-left: 1px dashed #FF3D94;
border-right: 1px dashed #FF3D94;
border-radius:10px 0px 0px 10px;
margin-left:-6px;
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{
background: url('http://img70.xooimage.com/files/9/6/1/pink-3032b43.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
-moz-border-radius:0px 0px 0px 0px;
margin-left:0px;
width: 84%;
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{
background: url('http://img74.xooimage.com/files/7/4/d/purple-3032b4b.png') repeat;
text-shadow: 1px 1px 0px #FFFFFF;
margin-left:0px;
width: 39px;
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;
color: #AB3DFF;
border-radius:0px 10px 10px 0px;
}



.page_titre{
display: inline-block;
text-shadow: 1px 1px 0px #000000;
height: 40px;
width: 400px;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: Verdana, Arial;
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}



#page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu {
width: 84px;
height: 400px;
margin-left: -180px;
background: url('http://img9.xooimage.com/files/c/5/f/f-2b76663.png') repeat;
overflow: none;
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;
border-radius:10px;
}

#page5 .contenu {
width: 89px;
height: 400px;
margin-left: -180px;
background: url('http://img66.xooimage.com/files/a/a/d/pbody-3014495.png') repeat;
overflow: none;
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;
border-radius:10px;
}

.contenu_page{
width: 100%;
height: 400px;
}

.contenu{
width: 0px;
height: 0px;
background: url('http://img9.xooimage.com/files/c/5/f/f-2b76663.png') repeat;
overflow: hidden;
padding: 5px;
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;
}

Paulos έγραψε:Μπορεσες και εκανες αντιγραφη τον κωδικα που σου εδωσα?Γιατι εχω απενεργοποιηση το δεξι κλικ..

stroymfita έγραψε:δηλαδη τον κωδικα τον πηρες?

stroymfita έγραψε:δεν σου βγηκε οπως εβαλε ο Παυλος την εικονα επανω?γιατι στον εφτιαξε τον κωδικα και λογικα ετσι θα βγαινει.

Paulos έγραψε:έχεις ενεργοποιημενο το chat?

Paulos έγραψε:To εκανα αυτο και φτιαχνει...Αν και σε εμενα οπως ειδες στην εικονα δουλευε... τον κωδικα τον εκλεψες πες μου ειλικρινα...?