Сказание о кошках

sweet dreams

Объявление

Я хочу спросить про ...

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

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


Вы здесь » sweet dreams » Гостевая » Удивительная история


Удивительная история

Сообщений 1 страница 3 из 3

1

0

2

<div id="tabs">

<!-- блок подменю -->
<div id="submenu">

<!-- под кнопкой игра -->
<div id="game" class="submenutext">

    <!-- блок новости -->
   <div id="news1">
           <div id="zag">
           Неигровые новости:
           </div>
      <div id="text">
       ⁃ добавлены разделы для любителей дегустации пива. Ознакомьтесь с ними в данном разделе, может быть вы сможете обрести новое хобби! <br>
       ⁃ Сменилась погода и было выбрано название сезона: Зима Чавкающего Снега
      </div>
   </div>
   <div id="news2">
           <div id="zag">
           Игровые новости:
           </div>
      <div id="text">
       ⁃ в клан Солнцекошек пришлый одиночка принёс блох. Львы до сих пор борются с их нашествием <br>
       ⁃ Тигры и горные кошки поймали огромного яка: чтобы он не сгнил, ели его два клана сразу. <br>
       ⁃ Землетрясение прогремело в тропических горах. Вольные кошки могут исследовать местность по правилам ивента. <br>
       ⁃ Пестрокошки плохо молились духам и были наказаны: молния сожгла лес колючих деревьев <br>
     </div>
   </div>
   <!-- конец  блока новости -->

   <!-- блок объявление и ссылки -->
   <div id="ad_link">

        <!-- блок объявление -->
        <div id="ad">
              <div id="zag">
              Объявления:
              </div>
              <div id="text">
              ⁃ в акциях появилось несколько новых предложений от амс. Нам нужна ваша помощь! <br>
              ⁃ погода на этот месяц определена, а какая будет в следующем? Пишите в этой теме свои пожелания <br>
              ⁃ Проходит ивент. Подробнее читайте тут <br>
              ⁃ Проголосуйте за награды!<br>
              </div>
        </div>
        <!-- конец блока объявление-->

        <!-- блок ссылки -->
        <div id="link">
              <div id="zag">
              Полезные ссылки:
              </div>
              <div id="link_text">
              <a href="#"><span>⁃ Самая важная ссылка для каждого игрока - это ссылка на Правила. Не забывайте регулярно освежать память. </span></a><br>
              <a href="#"><span> ⁃ Новичкам стоит ознакомиться с Лором и навигацией по сайту, чтобы быстро влиться в поток. </span></a><br>
              <a href="#"> <span>⁃ Часто задаваемые вопросы тут. Прочитайте тему, это может помочь Вам быстро разобраться с проблемой. </span></a><br>
              </div>
        </div>
        <!-- конец блок ссылки -->

  </div>
  <!-- конец блока объявления и ссылки -->

</div>
<!-- конец под кнопкой игра -->

<!-- блок помощь -->
<div id="help" class="submenutext">
        <div id="help_pic">
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про гепардов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про пум/ирбисов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про тигров</span></a>
        <br>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про ягуаров</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про львов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про леопардов</span></a>
        </div>
</div>
<!-- конец блока помощь -->

</div>
<!-- конец блока подменю -->

        <!-- колонка меню -->
        <div id="menu">
        <span alt="#game" style="cursor: pointer;">Игра</span><br>
        <span alt="#help" style="cursor: pointer;">Помощь</span>
        </div>
        <!-- конец колонки меню -->
</div>

<style>
#tabs {
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/39055.png);
  border-image-slice: 35 190 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  width: 100%;
  max-height: 160px;
  margin: 0px 0;
  padding: 2%;
  z-index: 1;
}

#menu, #submenu {
  display: table-cell;
  vertical-align: top;
}

#menu {
  margin: -10%;
  padding: 3% 0% 3% 0%;
  width: 60%;
}

#menu span {
  display: block;
  text-align: center;
  margin: 10% -5%;
  padding: 3% 0% 10% 0%;
  line-height: 25px;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
  border-image-slice: 55 200 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  border-image-outset: 2px 10px 2px 10px;
  z-index: 2;
}

#menu .active {
  color: #efe1c9;
}

#menu span:hover {
  color: #ffffff;
}

#submenu {
  margin-left: 3%;
  width: 100%;
}

.submenutext {
  position: relative;
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
  border-image-slice: 55 200 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  border-image-outset: 10px;
  z-index: 2;
  height: 125px;
  padding: 1%;
  margin: 1%;
  width: 92%;
}

#game {
  position: relative;
  overflow-y: auto;
  height: 125px;
}

#news1 {
  position: relative;
  display: table-cell;
  overflow-y: auto;
  height: 125px;
  padding: 3%;
  margin: 3%;
}

#news2 {
  position: relative;
  display: table-cell;
  overflow-y: auto;
  height: 125px;
  padding: 3%;
  margin: 3%;
}

#ad_link {
  display: table-cell; 
  height: 125px;
}

#ad {
  display: table-row;
  height: 60px;
  overflow-y: auto;
  padding: 3%;
}

#link {
  display: table-row;
  height: 60px;
  overflow-y: auto;
  padding: 5% 3% 3% 3%;
 
}

#zag {
  text-align: center;
  font-family: 'Comic CAT';
  text-transform: lowercase;
  padding-top: 2%;
  font-size: 15px!important;
  color: #0f120b;
}

#text, #link_text {
  text-align: left;
  padding-top: 1%;
  font-family: 'Helvetica';
  text-transform: lowercase;
  font-size: 10px!important;
  color: #000000;
}

#link_text a {
  color: #33391e;
}

#help_pic {
  text-align: center;
  overflow-y: auto;
  height: 125px;
}

#help_pic a {
  display: inline-block;
  margin: 10px;
}

#help_pic a img {
  display: block;
  width: 25%;
  height: 25%;
}

</style>
<script type="text/javascript">
$(document).ready(function() {
$("#submenu div.submenutext").hide();
$("#menu span:first").addClass("active").show();
$("#submenu div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("active");
    $(this).addClass("active");
    $("#submenu div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

0

3

тык
Код:
<div id="tabs">
 
<!-- блок подменю -->
<div id="submenu"> 

<!-- под кнопкой игра -->
<div id="game" class="submenutext">

    <!-- блок новости -->
   <div id="game" class="news1">
           <div id="game" class="zag">
           Неигровые новости: 
           </div>
      <div id="game" class="text1">
       ⁃ добавлены разделы для любителей дегустации пива. Ознакомьтесь с ними в данном разделе, может быть вы сможете обрести новое хобби! <br>
       ⁃ Сменилась погода и было выбрано название сезона: Зима Чавкающего Снега<br>
       ⁃ добавлены разделы для любителей дегустации пива. Ознакомьтесь с ними в данном разделе, может быть вы сможете обрести новое хобби! <br>
       ⁃ Сменилась погода и было выбрано название сезона: Зима Чавкающего Снега<br>
      </div>
   </div>
   <div id="game" class="news2">
           <div id="game" class="zag">
           Игровые новости: 
           </div>
      <div id="game" class="text">
       ⁃ в клан Солнцекошек пришлый одиночка принёс блох. Львы до сих пор борются с их нашествием <br>
       ⁃ Тигры и горные кошки поймали огромного яка: чтобы он не сгнил, ели его два клана сразу. <br>
       ⁃ Землетрясение прогремело в тропических горах. Вольные кошки могут исследовать местность по правилам ивента. <br>
       ⁃ Пестрокошки плохо молились духам и были наказаны: молния сожгла лес колючих деревьев <br>
       ⁃ в клан Солнцекошек пришлый одиночка принёс блох. Львы до сих пор борются с их нашествием <br>
       ⁃ Тигры и горные кошки поймали огромного яка: чтобы он не сгнил, ели его два клана сразу. <br>
       ⁃ Землетрясение прогремело в тропических горах. Вольные кошки могут исследовать местность по правилам ивента. <br>
       ⁃ Пестрокошки плохо молились духам и были наказаны: молния сожгла лес колючих деревьев <br>
     </div>
   </div>
   <!-- конец  блока новости -->

   <!-- блок объявление и ссылки -->
   <div id="game" class="ad_link">

        <!-- блок объявление -->
        <div id="game" class="ad">
              <div id="game" class="zag">
              Объявления: 
              </div>
              <div id="game" class="text2">
              ⁃ в акциях появилось несколько новых предложений от амс. Нам нужна ваша помощь! <br>
              ⁃ погода на этот месяц определена, а какая будет в следующем? Пишите в этой теме свои пожелания <br>
              ⁃ Проходит ивент. Подробнее читайте тут <br>
              ⁃ Проголосуйте за награды!<br>
              </div>
        </div>
        <!-- конец блока объявление-->

        <!-- блок ссылки -->
        <div id="game" class="link">
              <div id="game" class="zag">
              Полезные ссылки: 
              </div>
              <div id="game" class="link_text">
              <a href="#"><span>⁃ Самая важная ссылка для каждого игрока - это ссылка на Правила. Не забывайте регулярно освежать память. </span></a><br>
              <a href="#"><span> ⁃ Новичкам стоит ознакомиться с Лором и навигацией по сайту, чтобы быстро влиться в поток. </span></a><br>
              <a href="#"> <span>⁃ Часто задаваемые вопросы тут. Прочитайте тему, это может помочь Вам быстро разобраться с проблемой. </span></a><br>
              </div>
        </div>
        <!-- конец блок ссылки -->

  </div>
  <!-- конец блока объявления и ссылки -->

</div>
<!-- конец под кнопкой игра -->


<!-- блок помощь -->
<div id="help" class="submenutext">
        <div id="help" class="help_pic">
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про гепардов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про пум/ирбисов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про тигров</span></a>
        <br>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про ягуаров</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про львов</span></a>
        <a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про леопардов</span></a>
        </div>
</div>
<!-- конец блока помощь -->

</div>
<!-- конец блока подменю -->

        <!-- колонка меню -->
        <div id="menu">
        <span alt="#game" style="cursor: pointer;">Игра</span><br>
        <span alt="#help" style="cursor: pointer;">Помощь</span>
        </div>
        <!-- конец колонки меню -->
</div>




<style>
#tabs { 
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/39055.png);
  border-image-slice: 35 190 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  width: 100%;
  max-height: 160px;
  margin: 0px 0;
  padding: 2%;
  z-index: 1;
}

#menu, #submenu {
  display: table-cell;
  vertical-align: top;
}

#menu {
  margin: -10%;
  padding: 3% 0% 3% 0%;
  width: 60%;
}

#menu span {
  display: block;
  text-align: center;
  margin: 10% -5%;
  padding: 3% 0% 10% 0%;
  line-height: 25px;
  width: 100%;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
  border-image-slice: 55 200 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  border-image-outset: 2px 10px 2px 10px;
  z-index: 2;
}


#menu .active {
  color: #efe1c9;
}

#menu span:hover {
  color: #ffffff;
}

#submenu {
  margin-left: 3%;
  width: 100%;
}

.submenutext {
  position: relative;
  border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
  border-image-slice: 55 200 35 fill;
  border-image-repeat: repeat round;
  border-image-width: auto;
  border-image-outset: 10px;
  z-index: 2;
  height: 125px;
  padding: 1%;
  margin: 1%;
  width: 92%;
}

#game {
  position: relative;
}

.news1 {
  position: relative;
  display: table-cell; 
}

.news2 {
  position: relative;
  display: table-cell; 
  padding: 3%;
  margin: 3%;
}

.ad_link {
  display: table-cell;  
}

.ad {
  display: table-row; 
  padding: 3%;
}

.link {
  display: table-row;
  }

.zag {
  top: -35px;
  box-sizing: border-box;
  width: 100%;
  max-height: 12px;
  padding: 5px;
  text-align: center;
  font-family: 'Comic CAT';
  text-transform: lowercase;
  font-size: 15px!important;
  color: #0f120b;
}

.text {
  top: -30px;
  box-sizing: border-box;
  width: 100%;
  max-height: 120px;
  text-align: left;
  padding-top: 1%;
  font-family: 'Helvetica';
  text-transform: lowercase;
  font-size: 10px!important;
  color: #000000;
  overflow-y: auto;
}

.text1 {
  top: -30px;
  box-sizing: border-box;
  width: 100%;
  max-height: 120px;
  padding: 5px;
  text-align: left;
  padding-top: 1%;
  font-family: 'Helvetica';
  text-transform: lowercase;
  font-size: 10px!important;
  color: #000000;
  overflow-y: auto;
}


.text2 {
  top: -30px;
  box-sizing: border-box;
  width: 100%;
  max-height: 70px;
  padding: 5px;
  text-align: left;
  padding-top: 1%;
  font-family: 'Helvetica';
  text-transform: lowercase;
  font-size: 10px!important;
  color: #000000;
  overflow-y: auto;
}

.link_text {
  top: -30px;
  box-sizing: border-box;
  width: 100%;
  max-height: 50px;
  padding: 5px;
  text-align: left;
  padding-top: 1%;
  font-family: 'Helvetica';
  text-transform: lowercase;
  font-size: 10px!important;
  color: #000000;
  overflow-y: auto;
  }
.link_text a {
  color: #33391e;
}



.help_pic {
  text-align: center;
  overflow-y: auto;
}

.help_pic a {
  display: inline-block; 
  margin: 10px;
}

.help_pic a img {
  display: block;
  width: 25%;
  height: 25%;
}


</style>
<script type="text/javascript">
$(document).ready(function() {
$("#submenu div.submenutext").hide();
$("#menu span:first").addClass("active").show();
$("#submenu div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("active");
    $(this).addClass("active");
    $("#submenu div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

0


Вы здесь » sweet dreams » Гостевая » Удивительная история


Рейтинг форумов | Создать форум бесплатно