menù #01

menù #01

Tags
menù
topbar
By w a s a b i` il 7 Oct. 2013

2 Comments 51 Views
.

menù top forum #01

live preview - - - here
- - - se prendete, comunicate qui

COSA POTETE MODIFICARE

° logo e gif, ed immagini sottostanti la gif;

° i colori di scritte e link

COSA NON POTETE MODIFICARE

° la disposizioni di link, scritte ed immagini: il menù ha la sua struttura e non è una base per un vostro menù completamente differente;

° rimuovere i credits sotto alla descrizione.

INFO

° la gif è 206*117;

° le immagini rappresentano i siti: twitter, tumblr, 8tracks, livejournal e blogger;

° se superate lo spazio che vedete occupato dalle parole "desc" il menù perderà la sua armonia grafica;

° i link non possono essere più di 9;

° il logo non può superare i 330px di altezza.

CSS

CODICE
/*SIDEBAR BY RADIOACTIVE */

#sidebar {position: fixed; width: 100%; margin-top: -5px; background-color: #4A4747; height: 350px; border-bottom: 30px solid #626161}

#gif {margin-top: 1%; margin-left: -80%; opacity: 0.7}

#gif:hover {opacity: 1}

#imglink1 {margin-left: -93%; margin-top: 5px}
#imglink2 {margin-left: -88%; margin-top: -22px}
#imglink3 {margin-left: -80%; margin-top: -22px}
#imglink4 {margin-left: -73%; margin-top: -20px}
#imglink5 {margin-left: -67%; margin-top: -20px}

#desc {font-family: georgia; font-size: 9px; color: #999; margin-left: 30px; text-align: justify; width: 200px}

#link1 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: -320px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link2 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 10px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link3 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link4 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link5 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link6 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link7 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link8 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link9 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link10 {line-height: 15px; background-color: #530000; width: 180px; height: 20px; margin-left: 260px; margin-top: 13px; font-family: georgia; font-size: 12px; color: #999; text-align:justify; padding-left: 5px; padding-top: 2px}

#link1:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link2:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link3:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link4:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link5:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link6:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link7:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link8:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}
#link9:hover {background: #626161; font-style: italic; border-left: 10px solid #530000}

#logo {margin-top: -305px; margin-left: 470px}

HTML

CODICE

<div id="sidebar">

<div id="gif"> <img src="http://i.imgur.com/JwNkcyx.gif" /></div>

<div id="imglink1" title="twitter"><a href="http://"><img src="http://i.imgur.com/zUxW8Wd.png" /></a></div>
<div id="imglink2" title="tumblr"><a href="http://"><img src="http://i.imgur.com/puB7HZn.png" /></a></div>
<div id="imglink3" title="8tracks"><a href="http://"><img src="http://i.imgur.com/kcPX6cV.png" /></a></div>
<div id="imglink4" title="livejournal"><a href="http://"><img src="http://i.imgur.com/zGeN7sW.png" /></a></div>
<div id="imglink5" title="blogger"><a href="http://"><img src="http://i.imgur.com/TSaqqsB.png" /></a></div>

<div id="desc">desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc<br>

<div align=center> sidebar under copyright; © <a href="http://fairyblood.blogfree.net/?act=Profile&MID=181500" />radiøactive.</a> </div></div>

<div id="link1"><a href="http://">link1</a></div>
<div id="link2"><a href="http://">link2</a></div>
<div id="link3"><a href="http://">link3</a></div>
<div id="link4"><a href="http://">link4</a></div>
<div id="link5"><a href="http://">link5</a></div>
<div id="link6"><a href="http://">link6</a></div>
<div id="link7"><a href="http://">link7</a></div>
<div id="link8"><a href="http://">link8</a></div>
<div id="link9"><a href="http://">link9</a></div>

<div id="logo"><a href="http://"><img src="http://i.imgur.com/bWHjHoB.gif?2931"/></a></div>
</div>

Share

.

2 user(s) online

Last comments

Tags

Statistics

menù #01