оно же

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » оно же » Новый форум » Test


Test

Сообщений 21 страница 30 из 127

21

Всплывание картинки при наведении на текст в объявлении (администрация)

Код:
<style type="text/css">
a.hover{
 display:inline-block;
}
a.hover img{
 display:none;
 position:absolute;
}
a.hover:hover img{
 display:inline-block;
 margin:-120px 0 0 -60px;
}
</style>
<a class="hover" href="http://breatheoflife.rusff.ru/profile.php?id=XXX"><b>Рикерт Крайзер</b><img src="http://fabletown.rolka.su/img/avatars/0014/77/eb/3-1408432234.jpg"/></a>,
<a class="hover" href="http://breatheoflife.rusff.ru/profile.php?id=XXX"><b>Аденеус</b><img src="http://fabletown.rolka.su/img/avatars/0014/77/eb/4-1408431463.png"/></a>,

0

22

Таблица в объявлении ( не закончено)

Код:
<!--Контент слайдера-->
<div class="content-container">
<ul class="tabs">
    <li class="active"><a href="#tab1">Основное</a></li>
    <li><a href="#tab2">Навигация</a></li>
    <li><a href="#tab3">Игра</a></li>
    <li><a href="#tab4">Разное</a></li>
</ul>

<div class="tab_container">
    <div class="tab_content" id="tab1" style="display: block;">
        <div style="float: left; width: 50%">
            <h3>Администрация</h3>
            
               <style type="text/css">
a.hover{
 display:inline-block;
}
a.hover img{
 display:none;
 position:absolute;
}
a.hover:hover img{
 display:inline-block;
 margin:-120px 0 0 -60px;
}
</style>
<a class="hover" href="http://breatheoflife.rusff.ru/profile.php?id=XXX"><b>Рикерт Крайзер</b><img src="http://fabletown.rolka.su/img/avatars/0014/77/eb/3-1408432234.jpg"/></a>,
<a class="hover" href="http://breatheoflife.rusff.ru/profile.php?id=XXX"><b>Аденеус</b><img src="http://fabletown.rolka.su/img/avatars/0014/77/eb/4-1408431463.png"/></a>,
            
        </div>
        <div style="float: right; width: 50%">
            <h3>Новости</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab2" style="display: none;">
        <div style="float: left; width: 33%">
            <h3>Гостям</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: left; width: 33%">
            <h3>До принятия</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: left; width: 33%">
            <h3>После принятия</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab3" style="display: none;">
        <div style="float: left; width: 49%">
            <h3>Погода и время в игре</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: right; width: 49%">
            <h3>Квесты</h3>
            <div class="entry_content border">
                Текст, текст, текст
            </div>
        </div>
    </div>
    <div class="tab_content" id="tab4" style="display: none;">
        <div style="float: left; width: 49%">
            <h3>Любой заголовок</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
        <div style="float: right; width: 49%">
            <h3>Любой заголовок</h3>
            <div class="entry_content scroll">
                Текст, текст, текст
            </div>
        </div>
    </div>
</div>
</div>
<!--/Контент слайдера-->
<!--Стили слайдера-->
<style type="text/css">
.content-container {
    background: transparent;
    width: 780px;
    height: 280px;
}
ul.tabs {
    float: left;
    list-style: none outside none;
    margin: 10px 0 0 9px;
    padding: 0;
    width: 100%;
}
ul.tabs li {
     float: left;
     width: 170px;
     height: 36px;
     border: 1px solid #26261d;
     text-align: center;
     margin-left: 15px;
     border-radius: 40px 10px;
     background: #562145;
     color: #26261d;
     font: 22px/1.5 "Century Gothic";
}
ul.tabs li.active {
    background: #441A36;
}
ul.tabs li a {
     outline: medium none;
     padding: 0px 10px;
     text-decoration: none;
}
ul.tabs li a:hover, ul.tabs li a:focus, ul.tabs li a:active, ul.tabs li a:visited {
     color: #26261d;
}
.tab_container {
    overflow: hidden;
    clear: both;
    width: 780px;
}
.tab_content {
     overflow: hidden;
     padding: 5px 25px;
}
.tab_content h3 {
     margin: 0;
     text-align: center;
     color: #111111;
     font: 22px/1.5 "Century Gothic";
}
.entry_content {
     padding: 7px;
     color: #26261d;
     font: 20px/1.5 "Century Gothic";
     text-align: center;
}
.entry_content.border {
     background: #CEAD60;
     border: 3px solid #26261d dashed;
     border-radius: 10px;
     height: 170px;
     overflow-y: scroll;
}
.entry_content.scroll {
     height: 160px;
     overflow-y: scroll;
}
</style>
<!--/Стили слайдера-->
<!--Do magic :)-->
<script type="text/javascript">
$(document).ready(function() {
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();

	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});
});
</script>

0

23

Появление таблички с картинкой и текстом при наведении на картинку в объявлении

//эту часть туда, где вы хотите видеть ники
//дублировать столько раз, сколько надо ников

Код:
<a class="prof-ava" href="http://sadhaka.rusff.ru/" title="ЛС админу">
          sadhaka
          <span>
                   <img src="http://qssupport.ru/img/avatars/0003/ac/ce/2697-1348414111.jpg" alt="sadhaka" /> 
                   <br /> some text
          </span>
</a>

P.S. все переносы строк можно убрать, чтобы было компактнее, они исключительно для наглядности.
ссылка - может вести куда угодно, хоть на профиль, хоть на ЛС, если не нужна поставьте #
всплывающая подсказка - чтобы люди знали, что будет, когда они кликнут.
текст ссылки, который будет отображаться
само изображение, плюс рядом alt-текст, который отобразиться, если картинка не будет доступна.
текст, который отобразиться вместе с картинкой (<br /> переход на новую строку)
//это кусок один раз либо в свой стиль (убрать теги <style>), либо в хтмл-верх

<style>
.prof-ava {position: relative;}
.prof-ava span {display: none;}
.prof-ava:hover span {display: block; position: absolute; z-index: 999;  top: 15px; left: 0;  text-align: center; background: #fff;}
</style>

часть, выделенную черным, можете настраивать под себя как хотите, остальное, если не знаете - не трогайте.

0

24

наш код:

хтмл-верх

Код:
<!--uvelichenie-->
<style>
.prof-ava {position: relative;}
.prof-ava span {display: none;}
.prof-ava:hover span {display: inline-block; position: absolute; z-index: 999;  top: -120px; left: 0;  text-align: center; background: #CEAD60; width:200px; height: 150px; overflow-y: auto;}
.punbb a.prof-ava {
    color: #000;
    position: relative;
}
</style>

объявление:

<a class="prof-ava" href="#" title="ЛС админу">
         <img src="http://sd.uploads.ru/t/WN4dL.png">
          <span>
                   <img src="http://sd.uploads.ru/t/GXHOu.png" alt="/" />
                   <br />  <b>Аллерия Риверсонг</b><br>
                   Умница, активистка и просто красавица. Человек, создавший игре отличный <b>баннер</b>, ведущий основную игру и флешбеки, и просто хороший человек. 
          </span>
</a>

<a class="prof-ava" href="#" title="ЛС админу">
         <img src="http://sd.uploads.ru/t/XVZ9G.png">
          <span>
                   <img src="http://sd.uploads.ru/t/pjKU8.png" alt="/" />
                   <br />  <b>Джейк Маттео Маскерони</b><br>
                   Рыжий кошак, подаривший Академии аж два замечательных <b>баннера</b>, также ведущий активную игру по всем фронтам.   
          </span>
</a>


Внимание, вопрос. Как задать вылезающему окну определенную высоту, чтобы появлялась прокрутка в том случае, если текст в эту высоту не помещается?

Туда, где описан стиль для этого селектора:
.prof-ava:hover span
Добавьте это:
width: 200px; /* ширина */
height: 200px; /* высота */
overflow-y: auto; /* вертикальная прокрутка появляется, если содержимое контейнера выходит за его пределы */

0

25

http://s45.radikal.ru/i107/1409/1d/32584f28c8a2.png

0

26

хтмл верх

Код:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
     <allow-access-from domain="resources.neolao.com" secure="false" />
</cross-domain-policy>

объявление

Код:
<!--pleer--> 
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="70">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#E1C47D" />
    <param name="FlashVars" value="mp3=http%3A//dl.zaycev.net/51051/557636/icecreamoff_-_legion_%28zaycev.net%29.mp3%7Chttp%3A//dl.zaycev.net/51051/557624/icecreamoff_-_staya_%28zaycev.net%29.mp3&amp;height=70&amp;shuffle=2" />
</object>
<!--pleer-->

мелодии записываются через вертикальную черту

0

27

Код:
<!--Ставим рамки для Аватара -->
    <style type="text/css">
    li.pa-avatar .Wrp-ava img[alt]{
      display:block;
      padding:0;
      border-width:0;
      margin:2px; 
    }
    </style>
    <script>
      $(document).ready(function(){
        var imgWrp = "http://forumstatic.ru/files/0014/7c/0e/77813.png"; // Ccылка на картинку;

        imgWrp = '<img src="'+imgWrp+'" width=100% height=100% style="position:absolute;z-index:100;"/>'
        $("div.post-author ul li.pa-avatar img[alt]").each(function () {
        $(this).wrap('<div class="Wrp-ava" style="display:inline-block;text-align:left;position:relative;"></div>');
        $(this).parent().prepend(imgWrp)
    });});
    </script><!--Конец//Рамки для Аватара-->

0

28

Новые сообщения

хтмл-низ

Код:
<script type="text/javascript">
if(GroupID != 3) { $('#pun-ulinks .container').prepend('<li class="item1"><a href="/search.php?action=show_new">Новые сообщения</a></li>'); }
</script>

0

29

http://www.nizckod.ru/_ld/35/72900021.gif
css

Код:
* {   
   margin: 0;   
   padding: 0;   
   border: none;   
   }   
   #article {   
   height: 360px;   
   width: 586px;   
   font-family: "TeXGyreReg",sans-serif;   
   font-size: 17px;   
   }   
   #article dl {   
   position: relative;   
   top: 15px;   
   left: 50%;   
   margin-left: -75px;   
   width: 150px;   
   height: 155px;   
   color: #324040;   
   text-align: center;   
   background: #04b3d2;   
   background: -moz-linear-gradient(top,#04b3d2,#48dfff);   
   background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));   
   -webkit-border-radius: 4px;   
   -moz-border-radius: 4px;   
   border-radius: 4px;   
   -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   -webkit-transform-origin: 50% 120px;   
   -moz-transform-origin: 50% 120px;   
   -o-transform-origin: 50% 120px;   
   -moz-transition: -moz-transform 0.7s ease-in-out;   
   -o-transition: -o-transform 0.7s ease-in-out;   
   -webkit-animation: bounceOut 0.7s ease-in-out;   
   }   
   #article dt {   
   position: absolute;   
   bottom: 0px;   
   width: 100%;   
   height: 27px;   
   padding-top: 5px;   
   }   
   #article dd {   
   -webkit-transform: rotate(180deg);   
   -moz-transform: rotate(180deg);   
   -o-transform: rotate(180deg);   
   }   
   #article dd a {   
   display: block;   
   height: 22px;   
   padding: 3px 0px;   
   color: #324040;   
   text-decoration: none;   
   }   
   #article dd a:hover {   
   background: rgba(255,255,255,0.1);   
   }   
   #article dl:hover {   
   -webkit-transform: rotate(-180deg);   
   -moz-transform: rotate(-180deg);   
   -o-transform: rotate(-180deg);   
   -moz-transition: -moz-transform 0.5s ease-in-out;   
   -o-transition: -o-transform 0.5s ease-in-out;   
   -webkit-animation: bounceIn 0.7s ease-in-out;   
   }   
   @-webkit-keyframes bounceIn {   
   from {-webkit-transform: rotate(0deg);}   
   75%{-webkit-transform: rotate(-200deg);}   
   90%{-webkit-transform: rotate(-175deg);}   
   to {-webkit-transform: rotate(-180deg);}   
   }   
   @-webkit-keyframes bounceOut {   
   from {-webkit-transform: rotate(-360deg);}   
   0% {-webkit-transform: rotate(-180deg);}   
   10%{-webkit-transform: rotate(-160deg);}   
   to {-webkit-transform: rotate(-360deg);}   
   }   
   #article .masque {   
   position: absolute;   
   z-index: 50;   
   width: 585px;   
   height: 135px;   
   top: 0;   
   left: 0;   
   background: #fff;   
   }   
   #article .ombre {   
   position: absolute;   
   z-index: 40;   
   width: 300px;   
   height: 6px;   
   top: 133px;   
   margin-top: -103px;   
   left: 142px;   
   -webkit-box-shadow: 0px 100px 3px black;   
   -moz-box-shadow: 0px 100px 3px black;   
   box-shadow: 0px 100px 3px black;   
   -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   }

ссылки

Код:
<section id="article">   
   <dl class="menu">   
   <dt class="btnRot">Закладки</dt>   
   <dd><a href="http://www.nizckod.ru">Шаблоны для uCoz</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №3</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №2</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №1</a></dd>   
   </dl>   
   <div class="masque"></div>   
   <div class="ombre"></div>   
  </section>

http://futura.rusff.ru/viewtopic.php?id=131#p13288

0

30

убрать слова "отредоактировано..."

хтмл-верх

Код:
Убрать надпись "отредактировано"

или в свой стиль

Код:
.lastedit{display:none;}

0


Вы здесь » оно же » Новый форум » Test


Рейтинг форумов | Создать форум бесплатно © 2007–2019 «QuadroSystems» LLC