Красивый User-panel
Красивая User-panel от killerok09 с условными операторами. Она фиксируеться и ездит по экрану при прокрутке .
Установка:
В конец вашего CSS:
Code:Получить код
.topPanel {
width: 100%;
height: 48px;
background: #000000;
}
#topPanel {
position: fixed;
opacity: 0.7;
}
.topconntent {
margin-top: 10px;
margin-left: 180px;
}
#navtop {
margin-top: -11px;
}
.navtop1 {
margin-top: -11px;
margin-left: 457px;
}
.navtop2 {
margin-top: -11px;
margin-left: 600px;
}
.logotype {
background: url('http://testkillerok.3dn.ru/images/logotype.png');
width: 150px;
height: 48px;
margin-top: -52px;
margin-left: 5px;
}
width: 100%;
height: 48px;
background: #000000;
}
#topPanel {
position: fixed;
opacity: 0.7;
}
.topconntent {
margin-top: 10px;
margin-left: 180px;
}
#navtop {
margin-top: -11px;
}
.navtop1 {
margin-top: -11px;
margin-left: 457px;
}
.navtop2 {
margin-top: -11px;
margin-left: 600px;
}
.logotype {
background: url('http://testkillerok.3dn.ru/images/logotype.png');
width: 150px;
height: 48px;
margin-top: -52px;
margin-left: 5px;
}
Заходим в верхнюю часть сайта,
и в самый вверх ставим:
Code:Получить код
<div id="topPanel" class="topPanel">
<div class="topconntent">
<a
href="$HOME_PAGE_LINK$index/14"><img
src="http://testkillerok.3dn.ru/images/message.png" id="navtop"
width="62" height="48"></a>
<a href="javascript://"
rel="nofollow" onclick="new _uWnd('TdUsrLst','
',250,200,{autosize:0},{url:'/index/62-2'});return false;"
class="fUsrList"><img
src="http://testkillerok.3dn.ru/images/peoples.png" id="navtop"
width="62" height="48"></a>
<a href="/?ссылка на
чат-комнату"><img
src="http://testkillerok.3dn.ru/images/chat-room.png" id="navtop"
class="navtopactiv" width="62" height="48"></a>
<a
href="$HOME_PAGE_LINK$index/8"><img
src="http://testkillerok.3dn.ru/images/profile.png" id="navtop"
width="62" height="48"></a>
<a
href="$LOGOUT_LINK$"><img
src="http://testkillerok.3dn.ru/images/profile-end.png" class="navtop1"
id="navtop" width="62" height="48"></a>
</div>
<div class="logotype"></div>
</div>
<br>
<div class="topconntent">
<a
href="$HOME_PAGE_LINK$index/14"><img
src="http://testkillerok.3dn.ru/images/message.png" id="navtop"
width="62" height="48"></a>
<a href="javascript://"
rel="nofollow" onclick="new _uWnd('TdUsrLst','
',250,200,{autosize:0},{url:'/index/62-2'});return false;"
class="fUsrList"><img
src="http://testkillerok.3dn.ru/images/peoples.png" id="navtop"
width="62" height="48"></a>
<a href="/?ссылка на
чат-комнату"><img
src="http://testkillerok.3dn.ru/images/chat-room.png" id="navtop"
class="navtopactiv" width="62" height="48"></a>
<a
href="$HOME_PAGE_LINK$index/8"><img
src="http://testkillerok.3dn.ru/images/profile.png" id="navtop"
width="62" height="48"></a>
<a
href="$LOGOUT_LINK$"><img
src="http://testkillerok.3dn.ru/images/profile-end.png" class="navtop1"
id="navtop" width="62" height="48"></a>
</div>
<div class="logotype"></div>
</div>
<br>
- отступ страницы от панели .
http://testkillerok.3dn.ru/images/logotype.png - логотип замените на свой(размер 150х48).
opacity: 0.7; - прозрачность панели .
background: #000000; - цвет панели(менять не желательно) .
Источник: webo4ka.ru
Коментарии 0