.

CSS Hover Table

« Older   Newer »
 
  Share  
.
  1. JackGaunt
    view post Posted on 22/10/2012, 21:38
     
    .

    User deleted
    CZiYG
    Anteprima

    Codice prelevato da:

    - Italia Informatica
    - kaichou wa maid-sama forum



    Amministrazione > Grafica > Colori e Stili:
    SPOILER (clicca per visualizzare)
    CODICE
    /* COLORI E STILI CSS HOVER TABLE - ©JackGaunt */
    .supertitle {
       line-height: 340px;
       width: 89%;
       opacity: 0.5;
       height: 340px;
       position: absolute;
       z-index: 8;
       font-size: 40pt;
       margin-left: -460px;
    }


    .rotationbutton {display:inline; -moz-transform: rotate(90deg); text-transform:uppercase; font-size: 6pt}

    .supermenuwrapper {position:absolute; top: 10px; width: 100%}
    .supermenuwrapper a {color: #AAA}
    .supermenuwrapper a:hover {color: #FFF; border:none}
    .supermenuoptions {position: absolute;
    right: 63px;
    height: 300px;
    top: 23px; background: rgba(0, 0, 0, 0.3);
    text-align: right;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s}

    .supermenuoptions:hover {opacity: 1;
    background: rgba(0, 0, 0, 0.7)}

    .supermenuoptions img {height: 19px; padding: 2px 0}

    .supermenuoptions .picker:hover {background: rgba(0, 0, 0, 0.5); }
    .supermenuoptions .picker {padding: 0 10px 0 10px}
    .supermenuoptions .picker:hover img {-moz-transform:scale(1.2);
    -o-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
    -webkit-transform:scale(1.5); }
    .supermenuoptions .picker:hover div img {-moz-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    -webkit-transform:scale(1)}

    .supermenucontents {position: absolute;
    z-index: 5;
    overflow: hidden;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    opacity: 0;
    top: 0;
    right: 100%;
    width: 815px;
    height: 260px;
    text-align: center;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.7);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 100%;
    padding: 20px 0 20px 0}


    .textcontainer {padding: 10px; width: 80% !important; height: 200px !important; background:rgba(0, 0, 0, 0.7); margin:auto; box-shadow: 0 0 10px #000 inset; border-radius: 5px; border: 1px solid #111; font-size: 10pt}
    .staffcontainer a img {width: 100px}
    .staffcontainer a {font-size: 14pt}
    .supermenucontents img {height:auto; padding: 0}

    .supermenuoptions > .picker:hover > .supermenucontents {opacity: 1; z-index: 9}

    .hoverix {display: none; left: 70px;
    background: url(http://i.imgur.com/oIdrF.png) repeat scroll 0% 0% transparent;
    position: absolute;
    font-size: 9pt;
    width: 100px;
    height: 100px;
    line-height: 100%;
    margin-top: -115px;
    color: rgb(51, 51, 51);
    padding: 5px 0 20px 0}


    .staffer:hover .hoverix {display:inline}
    .tutotitle, .staffer {display: inline-table; line-height: 102%; height: 110px; font-size: 13pt;
    width: 100px; -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -0-transform:scale(0.8);
    transform:scale(0.8); position:relative; z-index: 2; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out}
    .tutotitle:hover, .staffer:hover {-moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1); z-index: 5}

    .tutotitle {background:rgba(0, 0, 0, 0.5); border-radius: 3px}
    /* FINE */




    Amministrazione > Grafica > Codice HTML che sarà mostrato sotto al LOGO del forum:
    SPOILER (clicca per visualizzare)
    HTML
    <!--- CSS HOVER TABLE -->

    <div class="supermenuwrapper"> <a href="/" class="supertitle">&nbsp;</a><div class="supermenuoptions">

    <div class="picker"><img src="http://i.imgur.com/sN6lO.png" alt=""> <div class="supermenucontents" >BENVENUTI! <div class="textcontainer" style=" text-align:justify; line-height:80%; padding:10px"> Il nostro forum nasce nel 2012 e continua con un bel :
    <i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh elit, hendrerit et volutpat quis, tempus eu enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis urna at risus viverra imperdiet. Pellentesque aliquam tellus ut lectus laoreet vehicula. Praesent ac placerat nulla. Integer vestibulum odio ac elit convallis id volutpat sapien convallis. Etiam vel ante rutrum mi imperdiet malesuada et eu mauris. Suspendisse sed lectus nibh. Praesent purus arcu, ultrices sed ultrices sed, blandit ac lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam nisi neque, euismod a iaculis sed, aliquam ut nibh. In tincidunt consequat placerat.

    Praesent at fringilla nunc. In scelerisque erat sollicitudin nisi suscipit a bibendum mi lobortis. Proin lobortis, nisi in sollicitudin luctus, risus ipsum condimentum nibh, eget lobortis diam felis nec tortor. Nullam a ipsum et risus luctus mollis at eu lorem. Donec enim lacus, sagittis sed sagittis nec, fermentum sed neque. Nullam a mattis ante. Nulla leo sem, lacinia nec pretium at, tempus nec est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit, nisl a egestas molestie, velit arcu accumsan urna, in luctus elit mi eget nulla. Aliquam libero massa, semper ac lacinia ac, hendrerit at ante. Sed blandit sollicitudin mollis. Donec urna neque, volutpat sed egestas sit amet, iaculis id justo. Integer vitae diam non leo tristique tempor.</i></div></div></div>

    <div class="picker"><img src="http://i.imgur.com/qiLPd.png"><div class="supermenucontents">NEWS
    <div class="textcontainer" style=" height: 200px; width: 700px; overflow: auto; font-size: 12pt; line-height: 100%; text-align: justify; color: rgba(255, 255, 255, 0.3);">29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br>
    29.09.12 - Il forum apre<br></div></div></div>


    <div class="picker"><img src="http://i.imgur.com/geUSg.png"><div class="supermenucontents">ULTIME DISCUSSIONI
    <table class="textcontainer"><tr>
    <td>< inserite l'iframe qui ></td>
    <td>< inserite l'iframe qui ></td></tr></table> </div></div>


    <div class="picker"><img src="http://i.imgur.com/63PKd.png"><div class="supermenucontents">STAFF <div class="staffcontainer">

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <br>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>

    <div class="staffer"><a href=""><img src="http://i.imgur.com/bIIpb.png"><br>nick</a> <div class="hoverix">descrizione descrizione descrizione descrizione descrizione descrizione descrizione descrizione</div></div>
    </div></div></div>








    <div class="picker"><img src="http://i.imgur.com/2Xx7d.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Graphic</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/MSCxC.png"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/6Ilxy.png"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/XwbQb.png"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/MrUjz.png"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/NlWGU.gif"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/qty1w.png"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Uu1E1.png"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DOSoQ.png"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/wjjXx.png"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/vVgls.png"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/iKZsY.png"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DnYh3.png"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/1AWU1.png"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/nph5w.png" style="height:100px"><br> TITOLO14 </a></div>
    </div> </div></div>

    <div class="picker"><img src="http://i.imgur.com/pyB3V.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Skinning</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866136.jpg"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866137.jpg"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866138.jpg"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866190.jpg"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866191.jpg"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://image.forumfree.it/4/6/0/2/3/2/9/1348866359.jpg"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/KrnFH.jpg"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/gVS1N.jpg"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Zmf0a.jpg"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/E2uHm.jpg"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/APChg.jpg"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Zz9vq.jpg"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/WObUJ.jpg"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/JflRK.jpg"><br> TITOLO14 </a></div>
    </div> </div></div>


    <div class="picker"><img src="http://i.imgur.com/DzTOT.png"><div class="supermenucontents"><div style="font-family:georgia; line-height:7%; font-style:italic; font-size:22pt">Coding</div>Tutorials <div align="center">
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/EImyF.jpg"><br> TITOLO1 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/vi64j.jpg"><br> TITOLO2 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Earc3.jpg"><br> TITOLO3 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/M3Aqb.jpg"><br> TITOLO4 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/M9owp.jpg"><br> TITOLO5 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/TzNaq.jpg"><br> TITOLO6 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/NOqtf.png"><br> TITOLO7 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/OxcQp.png"><br> TITOLO8 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/4XkQo.png"><br> TITOLO9 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/rWpCm.png"><br> TITOLO10 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/DZsJL.png"><br> TITOLO11 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/oeaLJ.jpg"><br> TITOLO12 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/Gfrhy.jpg"><br> TITOLO13 </a></div>
    <div class="tutotitle"><a href=""><img src="http://i.imgur.com/IHsJS.jpg" style="height:100px"><br> TITOLO14 </a></div>
    </div> </div> </div>

    <div class="picker"><img src="http://i.imgur.com/OMgKj.png"><div class="supermenucontents"> SUPPORTO
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
    <td><a href="">richiesta1</a><br><a href="">richiesta2</a><br><a href="">richiesta3</a><br></td>
    <td><a href="">richiesta4</a><br><a href="">richiesta5</a><br><a href="">richiesta6</a><br></td>
    </tr></table></div></div>


    <div class="picker"><img src="http://i.imgur.com/YIPL7.png"><div class="supermenucontents">I NOSTRI FILES<br>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome1.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome2.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome3.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome4.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome5.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome6.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome7.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome8.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome9.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome10.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome11.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome12.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome13.txt</a></div>
    <div class="tutotitle"><img src="http://i.imgur.com/EzKnj.png" width="80px"><br><a href="">nome14.txt</a></div></div></div>

    <div class="picker"><img src="http://i.imgur.com/yhTj8.png"><div class="supermenucontents">IDEE, COSA NE PENSI?
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
    <td><a href="">proposta1</a><br><a href="">proposta2</a><br><a href="">proposta3</a><br></td>
    <td><a href="">proposta4</a><br><a href="">proposta5</a><br><a href="">proposta6</a><br></td>
    </tr></table></div></div>

    <div class="picker"><img src="http://i.imgur.com/M99WY.png"><div class="supermenucontents">OFFTOPIC<br>
    <table class="textcontainer" style="font-size:12pt; width:90%"><tr><td><a href="">immagini</a><br><a href="">video</a></td> <td><a href="">giochino</a><br><a href="">musica</a></td></tr></table> </div></div>


    <div class="picker"><img src="http://i.imgur.com/O7Wm8.png"><div class="supermenucontents">AFFILIATI
    <div style=" height: 80px; overflow: auto; line-height: 1px; text-align: center; letter-spacing: -13px; width:82%"><a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> <a><img src="http://i.imgur.com/qQxW4.png"></a> </div>
    GEMELLATI
    <div style="height:80px; overflow:auto; letter-spacing:-13px; width:82%"><a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> <a><img src="http://i.imgur.com/cIvGN.png"></a> </div></div></div>

    <!--<div class="picker"><img src="http//linkdelliconcina.png"><div class="supermenucontents">contenuto</div></div> -->



    <div class="picker"><img src="http://i.imgur.com/MoiHZ.png"><div class="supermenucontents">SEGUICI SU<br><br>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/DnzkQ.png"></a></div>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/FQiOB.png"></a></div>
    <div class="tutotitle" style="background:none"><a><img src="http://i.imgur.com/eYuGJ.png"></a></div>
    </div></div>



    </div><div style=" z-index:9; position: absolute; right: 60px; top: 323px; font-size: 7pt;"><a href="http://ffmagazine.forumfree.it/?t=63687499">CSS Hover Table</a></div></div>

    <!--- FINE CSS HOVER TABLE --->


    per modificare una voce del menu, sostituite la relativa porzione di codice con:
    HTML
    <div class="picker"><img src="LINKDELL'ICONADELMENU"><div class="supermenucontents">TITOLOSUPERIOREDELMENU
    < CONTENUTO ></div></div>

    al posto di < CONTENUTO > inserite rispettivamente:
    • HTML
      <div class="textcontainer">testo</div>

      per un'area di testo dello stesso stile dell'opzione «Benvenuto»;

    • HTML
      <div align="center">
      <div class="tutotitle"><a href=""><img src="IMMAGINELINK"><br> TITOLO1 </a></div>
      <div class="tutotitle"><a href=""><img src="IMMAGINELINK"><br> TITOLO2 </a></div></div>

      per dei link interattivi dello stesso stile dell'opzione «Graphic Tutorials»;

    • HTML
      <table class="textcontainer" style="font-size:12pt; width:90%"><tr>
      <td><a href="">proposta1</a><br><a href="">proposta2</a><br><a href="">proposta3</a><br></td>
      <td><a href="">proposta4</a><br><a href="">proposta5</a><br><a href="">proposta6</a><br></td>
      </tr></table>

      per dei link disposti in maniera ordinata (in una tabella) dello stesso stile dell'opzione «Supporto».



    Esplicazione CSS
    ✗.supermenuwrapper : contenitore di tutta la tabella;
    ✗.supertitle : link/testo/titolo che appare al posto del menu quando non si passa il mouse sopra le icone;
    ✗.supermenuoptions : contenitore delle icone laterali del menu;
    ✎ .picker : singola icona del menu, al suo interno troviamo, oltre all'immagine:
    ✎ .supermenucontents : conenuto effettivo dell'opzione di menu, che viene mostrato quando si passa il mouse sopra all'icona;
    ✎.tutotitle : riquadro che contiene, oltre che all'immagine del tutorial, anche il titolo;
    ✎ .staffcontainer : contenitori dei riquadri per lo staff;
    ✓.staffer : riquadro che contiene, oltre che all'immagine dello staffer, anche il nick;
    ✓.textcontainer : contenitore di testo che troviamo come contenuto della nostra opzione del menu.
    ✓.hoverix : fumetto che compare al lato dello staffer al passaggio del mouse:


    LEGGENDA
    ✎ è possibile modificarne lo stile ma non la posizione, larghezza, altezza, margine, padding.
    ✓ è possibile personalizzarli a piacimento.
    ✗ è consigliabile non modificare per niente, potrebbe compromettere il funzionamento.




    © É POSSIBILE MODIFICARE LE ICONE, I COLORI, LA DISPOSIZIONE DEI CONTENUTI E GLI EFFETTI.
    CODICE RISERVATO ALL'USO SUI CIRCUITI FF/FC/BF IL LOGO PUÒ ESSERE MODIFICATO COMODAMENTE DAL PANNELLO AMMINISTRATIVO, RIMUOVENDO LA CORNICE E CARICANDO UNA IMMAGINE DI DIMENSIONI 900*320px





    !Importante : Aggiungere nei credits

    CSS Hover Table coded by ©JackGaunt
    for FFMagazine

    CODICE
    <a href="http://jacksnotes.blogfree.net/?t=4288975">CSS Hover Table</a> coded by <a href="http://jacksnotes.blogfree.net/">©JackGaunt</a><br>for <a href="http://ffmagazine.forumfree.it">FFMagazine</a>




    Edited by JackGaunt - 27/10/2012, 20:33
     
    Top
    .
  2. Eluana
    view post Posted on 26/10/2012, 10:57
     
    .

    User deleted
    mmm allura io vorrei usare quetsa tabella slide su un forum, che non tratta di grafica ora mi cheidevo posso modificare la parte dei tutorial inserendoci non so anime e manga e cose del genere? o no?
     
    Top
    .
  3. FilippoCS4
    view post Posted on 26/10/2012, 15:05
     
    .

    User deleted
    Io ho messo il codice in vari posti, ma mi mette la tabella sempre in questo posto, mentre io la vorrei al centro sotto il logo.
    Il forum è questo

    Mi dici la parte di codice da modificare per fare in modo che si metta nella posizione da me voluta?

    Grazie!
     
    Top
    .
  4. JackGaunt
    view post Posted on 26/10/2012, 19:45
     
    .

    User deleted
    ho aggiornato inserendo una guida, se vi servono altre informazioni contattate pure.
    ATTENZIONE A POSIZIONARE IL CODICE NEI PUNTI INDICATI

    garantisco il funzionamento SOLO sul NUOVO LAYOUT
     
    Top
    .
  5. Eluana
    view post Posted on 27/10/2012, 11:32
     
    .

    User deleted
    io ho un problemino Jack ho inserito nel forum di prova la tabella ma... viene una cosa strana XD
    SPOILER (clicca per visualizzare)
    http://provakwmsforum.forumcommunity.net/

    sotto spoiler c'è il link del forum di prova... perchè si vede così? ho provato a togliere il logo ma niente resta lì ci sto impazzendo
    vorrei che fosse posizionato sotto il logo
     
    Top
    .
  6. JackGaunt
    view post Posted on 27/10/2012, 11:33
     
    .

    User deleted
    SCUSAMI! IL CODICE HTML VA INSERITO SOTTO AL LOGO!! Scusatemi, avevo sbagliato!
    comunque mi sa che hai esagerato con i credits.. metti solo CSS Hover Table ^^
     
    Top
    .
  7. Eluana
    view post Posted on 27/10/2012, 11:39
     
    .

    User deleted
    ecco in effetti adesso va meglio XD solo che mi finisce sul logo non è possibile metterlo sotto come una tabella?
     
    Top
    .
  8. FilippoCS4
    view post Posted on 27/10/2012, 12:59
     
    .

    User deleted
    Ho provato ad aggiornare il codice e nonostante abbia il vecchio layout la tabella funziona benissimo ed è anche molto scorrevole.
    Ma si mette sempre in quella maledetta posizione. Mi dici il codice esatto per metterla sotto il logo come una normale tabella?

    Il forum di prova è questo:
    SPOILER (clicca per visualizzare)
    Italia Informatica Skin


    Grazie :)
     
    Top
    .
  9. JackGaunt
    view post Posted on 27/10/2012, 13:08
     
    .

    User deleted
    provate (entrambi) a modificare
    CODICE
    .supermenuwrapper {position:absolute;}
    .supermenuoptions {position: absolute;
    right: 63px;
    height: 300px;
    top: 23px; background: rgba(0, 0, 0, 0.3);
    text-align: right;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s}

    con
    CODICE
    .supermenuwrapper {position:relative; top: 10px; width: 100%; height:320px}
    .supermenuoptions {position: absolute;
    right: 3px;
    height: 300px;
    top: 23px; background: rgba(0, 0, 0, 0.3);
    text-align: right;
    -moz-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s}
     
    Top
    .
  10. Eluana
    view post Posted on 27/10/2012, 13:16
     
    .

    User deleted
    ok adesso è sotto il logo ma finisce sul mback XD
     
    Top
    .
  11. JackGaunt
    view post Posted on 27/10/2012, 13:23
     
    .

    User deleted
    ti avevo detto di rimuovere tutti quei credits e di lasciare solo "CSS Hover Table"
     
    Top
    .
  12. FilippoCS4
    view post Posted on 27/10/2012, 13:29
     
    .

    User deleted
    Grazie! Adesso la tabella è nel posto che desideravo, ma come puoi vedere anche lasciando solo "CSS Hover Table" va a finire sulla barra della tagboard.
     
    Top
    .
  13. JackGaunt
    view post Posted on 27/10/2012, 13:34
     
    .

    User deleted
    e aumentate l'altezza, mettete
    CODICE
    .supermenuwrapper {position:relative; top: 10px; width: 100%; height:350px}


    poi incollate di nuovo il codice html che ho appena modificato
     
    Top
    .
  14. FilippoCS4
    view post Posted on 27/10/2012, 14:29
     
    .

    User deleted
    Ok, ho modificato l'altezza, ma ho dovuto usare il vecchio codice, perché quello che hai messo ora da diversi problemi.
     
    Top
    .
  15. Eluana
    view post Posted on 27/10/2012, 15:04
     
    .

    User deleted
    mmm mi da un problema non si vede più niente ç_ç solo la barretta


    Edited by Eluana - 27/10/2012, 16:53
     
    Top
    .
42 replies since 22/10/2012, 21:38   1510 views
  Share  
.
 
.
W
hy don't you take a ride on the flying spoon?
Top
Create your blog! · Create your forum! · Top Blog · Categories · Help · Status · Contacts · Powered by BlogFree