-
.
Ho creato una sidebar e vorrei inserire uno scrollbar per far occupare meno spazio al testo... Qualcuno sa aiutarmi?!
Codici e stiliSPOILER (clicca per visualizzare)CODICE/*tutorial by psiche - tigerdirty.forumfree.net - vietata la copia*/
#corposidebar {position: fixed; top: 30px; left: 20px; height: 610px; width: 200px; background-color: #F8EDCD; padding: 5px; border: 1px dotted #BAC6B0; border-radius: 100px 0 100px 0}
.round
{width: 200px; height: 200px; border-radius: 100%; opacity: 0.7; -webkit-transition: opacity 0.6s linear; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out}
.round:hover {border-radius: 90px 0 0 0; opacity: 1}
.link a {background-color: #D8B19E; width: 200px; height: 15px; text-transform: uppercase; float: left; text-align: center; margin: 0 0 0 0 0; color: #000; font-size: 11px; font-family:calibri, helvetica, sans-serif; font-weight: bold; text-decoration: none; line-height: 15px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out}
#one {opacity: 1}
#two {opacity: 0.8}
#three {opacity: 0.6}
#four {opacity: 0.4}
#five {opacity: 0.2}
#one:hover {opacity: 0.9}
#two:hover {opacity: 0.7}
#three:hover {opacity: 0.5}
#four:hover {opacity: 0.3}
#five:hover {opacity: 0.1}
.scroll {background color: #F8EDCD; width: 200px; height: 120px; text-transform: uppercase; float: left; text-align: center; margin: 0 0 0 0; color: #000; font-size: 11px; font-family:calibri, helvetica, sans-sarif; font-weight: normal; text-decoration: none}
Codici HtmlSPOILER (clicca per visualizzare)CODICE<div id="corposidebar">
<img class="round" src="http://i.imgur.com/oqdxbJN.png">
<div>
<div class="link" id="one"><a href="http://www.facebook.com/pages/Greta-Manuzi/291617920984851?fref=ts">Pagina Ufficiale</a></div>
<div class="link" id="two"><a href="http://www.facebook.com/pages/Greta-Manuzi-Official-Forum/404163482985334?fref=ts">Pagina Forum</a></div>
<div class="link" id="three"><a href="http://www.gretamanuzi.com">Sito Ufficiale</a></div>
<div class="link" id="four"><a href="http://www.youtube.com/user/GretaOfficialVEVO">CANALE VEVO</a></div>
<div class="link" id="five"><a href="http://instagram.com/gretamanuziofficial">INSTAGRAM UFFICIALE</a></div></div>
<div style="color: #bac6b0; font-size: 22px; font-family: georgia; font-style: italic; text-shadow: 2px 1px 1px #96a48b; letter-spacing: -2px;">Greta Manuzi OF</div>
<div class="scroll">
Greta è una cantante di 22 anni, partecipa ad Amici per la dodicesima edizione. Greta si distingue per il suo talento che durante questa edizione va sempre più migliorando. Troviamo tra le sue performance un duetto con i Modà, con Alessandra Amoroso, con Emma, con Gianna Nannini e molti altri artisti durante il serale di Amici 2O12/2013. Inoltre Greta riceve un contratto discografico dalla casa discografica Carosello Records, il suo primo ep uscirà il 21 Maggio intitolato 'SOLO RUMORE': what you waiting for? Greta si classifica seconda nella dodicesima edizione di Amici, affrontando tre sfide consecutive.</div>
</div>
Immagine Sidebar:SPOILER (clicca per visualizzare). -
.
Devi aspettare Marti per indicazioni più dettagliate perchè è lei che si occupa delle sidebar, comunque il codice per la scroll è questo: CODICE<div style="overflow:auto; width: 315px; height:100px"> CONTENUTO </div>
Ovviamente puoi modificare larghezza e altezza come preferisci ^^. -
.
Perfetto,grazie! . -
whatthehell..
User deleted
Ci sei riuscito? Se no ti aiuto domani quando torno da scuola . -
.
Ci sono riuscito! Grazie mille! E' la prima sidebar che sono riuscito a fare! *_*
Se volete,potete chiudere!. -
.
Perfetto, chiudo ^^
Ps: se ne crei altre e ovviamente ti va puoi postarle anche nel forum ^^ nella sezione forum resources <3.