Удивительная история
Сообщений 1 страница 3 из 3
Поделиться22022-12-12 18:12:35
<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>
Поделиться32022-12-14 13:06:40
Код:<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>