Фера
Постоянным клиентам бонус :
1) Минимум изменений с прошлой версии
2) Красивости и улучшение валидности кода
3) Сохранение данных.
Код:<style> #pun-announcement { height: 500px; } #annHead { position: absolute; margin-top: -34px; } #annHead li { display: inline-block; background: #969472; z-index: 0; border: 1px #323226 solid; width: 222px; height: 18px; text-align: center; margin: 0 10px; padding: 5px 0 0 0; position: relative; cursor: pointer; border-top-left-radius: 10px; border-top-right-radius: 10px; } #annHead li:hover { background: #AAA881; } #annHead li.Active { top: 0; height: 30px; background: #B5B389; border-bottom-color: #B5B389; font-weight: bold; font-size: 20px; border-bottom-left-radius: 2px; border-bottom-rigth-radius: 2px; } #annContent { margin-top: -1px; border: 2px #323226 solid; background: #B5B389; height: 400px; z-index: 2; overflow-y: hidden } #annContent .annElement { display: none; margin: 0 !important; width: 100%; text-align: center; height: 100%; } #annContent .annElement#game { height: 90%; } #annContent .annElement h6 { font: bold small-caps 24px/14px Calibri; margin: 5px 0 10px; } #annContent .annElement table { margin: 0px 10px; width: 722px; border-spacing: 0; height: 100%; } #annContent .annElement div { height: 90%; margin: 10px; } .annElement li { margin: 3px; } .annElement li a { outline: 1px solid black; display: block; height: 15px; background: #999874; } .annElement li a:hover { background: #AAA985; } #annContent .annElement#game table td { width: 50%; } #annContent .annElement#main table td { width: 60%; } #annContent .annElement#main table td:nth-child(1) { width: 40%; vertical-align: top; } .scroll { overflow-y: auto; } .border { border: 1px solid #323226; } #adminPhotos img { width: 60px; height: 60px; margin: 0 3px; } #moderPhotos img { width: 40px; height: 40px; margin: 0 1px; } #needPhotos img { width:170px; height:170px; margin: 0 3px; } #annContent .annElement .elem { margin: 2px 5px 8px; text-align: center; height: auto !important; } #annContent .annElement .elem .date { display: block; font-weight: bold; } </style> <div id="annHead"><ul> <li id="main" class="Active">Основное</li> <li id="game">По игре</li> <li id="need">Требуются</li> </ul></div> <div id="annContent"> <div class="annElement" id="main"> <table><tr> <td><h6>Администрация</h6> <span id="adminPhotos"> <a href="/profile.php?id=2"><img src="http://s2.uploads.ru/YhC5a.png" title="Фолтор - гл. администратор, создатель ролевой и дизайнер по совместительству."></a> <a href="/viewtopic.php?id=117"><img src="http://s1.uploads.ru/BxLFH.png" title="Место свободно"></a> <a href="/viewtopic.php?id=117"><img src="http://s1.uploads.ru/BxLFH.png" title="Место сободно"></a> </span> <h6>Модераторы</h6> <span id="moderPhotos"> <a href="/profile.php?id=13"><img src="http://s1.uploads.ru/NqdCS.png" title="Тартар - модератор, создатель локаций."></a> <a href="/profile.php?id=85"><img src="http://s2.uploads.ru/8svgA.png" title="Iren - модератор, квестоплёт, корректор. "></a> <a href="/viewtopic.php?id=117"><img src="http://s1.uploads.ru/BxLFH.png" title="Место свободно."></a> <a href="/viewtopic.php?id=117"><img src="http://s1.uploads.ru/BxLFH.png" title="Место свободно."></a> </span> <br><br> <h6>Полезные ссылки</h6> <ul> <li><a href="http://fegort.rolka.su/viewtopic.php?id=3">Гостевая</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=5">Правила</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=8">Гид по миру</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=185">Способности</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=9">Описания островов</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=10">Карта мира</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=14">Порталы с одного острова на другой</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=13">Списки должностей на островах</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=117">Список администрации</a></li> <li><a href="http://fegort.rolka.su/viewtopic.php?id=15">Шаблон анкеты</a></li> </ul> </td> <td> <h6>Новости</h6> <div class="scroll border"> <!-- Контент --> <!-- Шаблон объявления: <div class="elem"> <span class="date">Дата объявления</span> <span class="cont"> Текст объявления </span> </div> --> <div class="elem"> <span class="date">10.01.2013</span> <span class="cont"> <u><b>Всем ознакомиться с</b> <a href="http://fegort.rolka.su/viewtopic.php?id=181#p3855">Объявлением!</a></u> </span> </div> <div class="elem"> <span class="date">23.11.2012</span> <span class="cont"> Создан новый список способностей. Просьба всем отписаться в <a href="http://fegort.rolka.su/viewtopic.php?id=185"><u>этой теме.</u></a> </span> </div> <div class="elem"> <span class="date">18.11.2012</span> <span class="cont"> У нас проводится перекличка, с целью удаления неактивных пользователей. Нужно отписаться в этой теме - <a href="http://fegort.rolka.su/viewtopic.php?id=182#p1173"><u>Перекличка с 18.11.12 до 21.11.12</u></a> </span> </div> <div class="elem"> <span class="date">31.10.2012</span> <span class="cont"> Мы начали создавать акции, появился первый мини квест.<br> Сегодня у нас появилось описание культуры Острова Валло в Тех. разделе, просьба всем игрокам ознакомиться.<br> Тем кто не создал семью персонажа в соответствующем подфоруме, просьба создать её и начать игру. </span> </div> <div class="elem"> <span class="date">19.10.2012</span> <span class="cont"> У нас появилась таблица! К тому же у нас начался первый отыгрыш, а скоро выложу наш сюжет. Играем, друзья. </span> </div> <div class="elem"> <span class="date">14.10.2012</span> <span class="cont"> Сегодня официальное открытие ролевой! Радуемся, бросаем в воздух чепчики и кричим ура. Мы можем начинать игру. </span> </div> <!-- Конец --> </div> </td></tr></table> </div> <div class="annElement" id="game"><table><tr> <td> <h6>Погода и время в игре</h6> <div class="scroll border"> <!-- Контент --> <b>А в игре <span style="font-size: 15px;"> <script><!-- var calendar = new Date(); d = calendar.getDay(); document.write((d == 0)? 'Утро': (d <= 3)? 'День': (d >= 5)? 'Ночь': 'Вечер'); //--></script></span></b> <b>, Лето</b> <br><b>Остров Валло</b><br> Днём тепло, но не жарко. Около +20 градусов. Высокая влажность, по небу бродят тучи. Ветер не сильный, порывистый. Всё предвещает грозу, скорее всего она разразится ближе к вечеру. <br><b>Остров Фелин</b><br> Здесь напротив жарко и сухо. Светит яркое солнце, облаков практически нет. Температура в некоторых местах достигает +30 градусов. Засухи не предвидится, но такая погода может продержаться несколько дней. <br><b>Остров Киджан</b><br> Так же тепло, но не жарко, влажность умеренная. Температура около +25 градусов. Ветер не сильный приятный. К вечеру может немного похолодать, а местами пойти моросящий дождик. <br><b>Остров Нева</b><br> Довольно прохладно, но безветренно. Температура около +15 - +19 градусов. По небу так же гуляют тучи, но дождя скорее всего не будет. Скоро будет потепление. <!-- Конец --> </div> </td><td> <h6>События в игре</h6> <div class="scroll border"> <!-- Контент --> Всё довольно спокойно. Жизнь у животных идёт своим чередом. Пока у нас свободная игра, но сюжет скоро появится. <!-- Конец --> </div> </td></tr></table> </div> <div class="annElement scroll" id="need"> <table><tr> <td id="needPhotos" colspan="4"> <img src="Ссылка на картинку1" title="Текст"> <img src="Ссылка на картинку2" title="Текст"> <img src="Ссылка на картинку3" title="Текст"> <img src="Ссылка на картинку4" title="Текст"> </td> </tr> <tr> <td><div class="scroll"> <!-- Контент --> Текст блока 1 <!-- Конец --> </div></td> <td><div class="scroll"> <!-- Контент --> Текст блока 2 <!-- Конец --> </div></td> <td><div class="scroll"> <!-- Контент --> Текст блока 3 <!-- Конец --> </div></td> <td><div class="scroll"> <!-- Контент --> Текст блока 4 <!-- Конец --> </div></td> </tr></table> </div> </div> <script>$('#annHead li').click(function () { if (!$(this).hasClass('Active')) { $('#annHead li').removeClass('Active'); $('#annContent .annElement').slideUp('slow'); $(this).addClass('Active'); $('#annContent .annElement#'+$(this).attr('id')).slideDown('slow'); }}); $('#annHead li.Active').removeClass('Active').trigger('click');</script>