Announcements
Become a partner of Graphic Holdine, use the correct post!

1
Circle menù on Sun Apr 03, 2011 7:59 am
Guest
Guest


Spoiler:
Code:
<style type="text/css">
#icons {padding:0; margin:0 auto; list-style:none; position:relative; width:270px; height:270px;}
#icons ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; width:140px; height:140px; background:url(trans.png);}
#icons li {display:block; width:64px; height:64px; position:absolute; text-decoration:none; color:#000;}
 
#icons li a {display:block; width:64px; height:64px; text-decoration:none; color:#000;}
#icons li a b {position:absolute; left:-9999px; display:block; width:58px; height:25px; text-align:center; font-family:arial, sans-serif; font-size:12px;}
#icons li.icon1 {background:url(http://cdn.iconfinder.net/data/icons/Primo_Icons/PNG/64x64/home.png); left:100px; top:0;}
#icons li.icon2 {background:url(http://cdn.iconfinder.net/data/icons/Basic_set2_Png/64/document_pencil.png); left:170px; top:30px;}
#icons li.icon3 {background:url(http://cdn.iconfinder.net/data/icons/CrystalClear/64x64/apps/ktip.png); left:200px; top:100px;}
#icons li.icon4 {background:url(http://cdn.iconfinder.net/data/icons/basicset/buy_64.png); left:170px; top:170px;}
#icons li.icon5 {background:url(http://cdn.iconfinder.net/data/icons/oxygen/64x64/categories/applications-graphics.png); left:100px; top:200px;}
#icons li.icon6 {background:url(http://cdn.iconfinder.net/data/icons/ginux/Png/Administrative_Tools-64.png); left:30px; top:170px;}
#icons li.icon7 {background:url(http://cdn.iconfinder.net/data/icons/dellipack/64/folder.png); left:0; top:100px;}
#icons li.icon8 {background:url(http://cdn.iconfinder.net/data/icons/basicset/warning_64.png); left:30px; top:30px;}
 
#icons li a:hover {border:0; z-index:500;}

#icons li.icon1 a:hover b, #icons li.home:hover b {left:5px; top:125px; color:#fff;}
#icons li.icon2 a:hover b, #icons li.pencil:hover b {left:-65px; top:95px; color:#fff;}
#icons li.icon3 a:hover b, #icons li.chat:hover b {left:-95px; top:25px; color:#fff;}
#icons li.icon4 a:hover b, #icons li.image:hover b {left:-65px; top:-45px; color:#fff;}
#icons li.icon5 a:hover b, #icons li.shop:hover b {left:5px; top:-75px; color:#fff;}
#icons li.icon6 a:hover b, #icons li.cash:hover b {left:75px; top:-45px; color:#fff;}
#icons li.icon7 a:hover b, #icons li.music:hover b {left:105px; top:25px; color:#fff;}
#icons li.icon8 a:hover b, #icons li.mail:hover b {left:70px; top:95px; color:#fff;}
</style>

<ul id="icons">
  <li class="icon1"><a href="#url"><b>TEXT.1</b></a>
        </li>
        <li class="icon2"><a href="#url"><b>TEXT.2</b></a>
  </li>
  <li class="icon3"><a href="#url"><b>TEXT.3</b></a>
  </li>
  <li class="icon4"><a href="#url"><b>TEXT.4</b></a>
  </li>
  <li class="icon5"><a href="#url"><b>TEXT.5</b></a>
  </li>
  <li class="icon6"><a href="#url"><b>TEXT.6</b></a>
  </li>
  <li class="icon7"><a href="#url"><b>TEXT.7</b></a>
  </li>
  <li class="icon8"><a href="#url"><b>MAIL.8</b></a>
  </li>
</ul>

you must change #url and MAIL.X

bye Smile

2
Re: Circle menù on Mon Apr 04, 2011 4:58 am
avatar
Premium User
Respected Member
picture broken

3
Re: Circle menù on Mon Apr 04, 2011 8:03 am
Guest
Guest
no, it's ok! Very Happy

Sponsored content

Permissions in this forum:
You cannot reply to topics in this forum


Designed by Jaloxin, Coded by Gangstar15 © 2011 All rights reserved.

Free forum | © PunBB | Free forum support | Contact | Report an abuse | Free forum