درود

ایتدا شات :

best-user.JPG

کد های Html که به شما بستگی داره تو کدوم بخش میخواهید قرارش بدید. البته هدر بهترین گزینه برای این کادر هستش:

کد:
<div class="topuser">
<a class="vtext">کــاربــر بــرتــر</a>
<div style="background:url(http://www.gamemake.ir/up/uploads/up875121415175966_user.gif) -20px 0px no-repeat;width: 110px;height: 120px;position: absolute;left: 10px;top: 10px;border: 3px solid #BEBEBE;"></div>
<a class="tubutton" style="font-family: Arial;font-size: 16px;Cursor:default;">sadegh.1373</a>
<a class="tubutton" style="margin-top: 20px;Cursor:default;">کاربر سایت</a>
<a class="tubutton" style="margin-top: 55px;" href="http://www.gamemake.ir/blogs/sadegh-1373/">لینک وبلاگ</a>
<a class="tubutton" style="margin-top: 90px;" href="http://www.gamemake.ir/members/sadegh-1373.html">لینک پروفایل</a>
</div>
کد های css : (به ته Additional.css اضافه کنید)

کد:
.topuser{width:360px;height:150px;border-right:30px solid rgb(216,216,216);background:#E0E0E0;left:20px;border-radius:4px;float:left;margin-top:22px;box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;padding:20px;line-height:1;position:relative}.tubutton{font:15px BYekan,Myriad Pro,Calibri;background:#E9E9E9;border-left:6px solid rgb(208,208,208);border-right:6px solid rgb(208,208,208);color:#404040;width:150px;height;50px;position:absolute;margin-left:100px;padding:2px;text-align:center;margin-top:-9px}.tubutton:hover{color:#404040;background:rgb(228,228,228);border-left:6px solid rgb(203,203,203);border-right:6px solid rgb(203,203,203)}.vtext{-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);position:absolute;font:15px BYekan;left:308px;top:64px;display:table;color:rgb(26,26,26);cursor:default}.vtext:hover{color:rgb(26,26,26);cursor:default;}
برای مشاهده دمو به این لینک مراجعه کنید.

تمام