Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

● Смена дизайна! Выражаем благодарность tørst vinden!

Зефир

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

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


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Силион: ветры небылиц


[Таблица] Силион: ветры небылиц

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

1

1. Название ролевой, ссылка:

Силион: ветры небылиц
http://silion.rolka.su/

2. Что требуется:

Сверстать таблицу. Исходные картинки даны ниже. Выглядеть таблица должна так, как сейчас установленная, только надо сделать:

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

-чтобы при наведение на текст ячейки он не становился синим

Исходные картинки

(Их надо использовать именно с этого адреса, т.е. не надо загружать на другой хостинг)

3. Дополнительно:

0

2

http://codepen.io/Puffin/pen/jEOeyY
http://codepen.io/Puffin/full/jEOeyY/
Похоже?

0

3

Shata, Да, то что нужно

0

4

Anegel, весь код есть по первой ссылке, но, если хотите, продублирую сюда.

Сама таблица:

Код:
<div id="announcement-table">
    <div id="announcement-col-left">
        <div id="menu">
            <span alt="#sm1" style="cursor: pointer;"><img
                    src="https://forumstatic.ru/files/0014/6a/97/55662.png"></span>
            <span alt="#sm2" style="cursor: pointer;"><img
                    src="https://forumstatic.ru/files/0014/6a/97/89220.png"></span>
            <span alt="#sm3" style="cursor: pointer;"><img
                    src="https://forumstatic.ru/files/0014/6a/97/50158.png"></span>
            <span alt="#sm4" style="cursor: pointer;"><img
                    src="https://forumstatic.ru/files/0014/6a/97/41626.png"></span>
        </div>
    </div>

    <div id="announcement-col-right">
        <a href="http://silion.rolka.su/viewtopic.php?id=6"><img
                src="https://forumstatic.ru/files/0014/6a/97/51654.png"></a><br><br><a
            href="http://silion.rolka.su/viewtopic.php?id=3"><img
            src="https://forumstatic.ru/files/0014/6a/97/78972.png"></a><br><br>
        <a href="http://silion.rolka.su/viewtopic.php?id=28"><img
                src="https://forumstatic.ru/files/0014/6a/97/18061.png"></a><br><br>
        <a href="http://silion.rolka.su/viewtopic.php?id=11"><img
                src="https://forumstatic.ru/files/0014/6a/97/51793.png"></a>
    </div>

    <div id="announcement-col-center">
        <div id="submenu" align="center">
            <div id="sm1" class="submenutext" style="display: none;">
                <center>ИДЁТ НАБОР АМС <br><br>Добро пожаловать на ролевую по авторскому миру "Силион: ветры
                    небылиц"!<br>
                    Рейтинг игры: NC-21<br>
                    Система игры: эпизодическая<br><br>
                    На побережье моря Вклан к западу от гор Элоса растянулась могущественная Силионская империя. В
                    течение веков она главенствовала на всём материке и, даже в мире. Но что-то пошло не так. На страну
                    тут и там начали нападать соседи от которых ничего небыло ни видно ни слышно, да ещё эти загадочные
                    смерти... Да, определённо, здесь дело не чисто! Присоединяйся к нам и спаси Силион, пока мир к
                    которому ты привык не погиб!<br><br>Топы:<br>(тыкаем каждый день!)<br><a
                            href="http://wizardtop.ru/in.php?id=2851" target="_blank"
                            title="Волшебный рейтинг игровых сайтов"><img src="http://wizardtop.ru/b/3.gif" border="0"
                                                                          width="88" height="31"
                                                                          alt="Волшебный рейтинг игровых сайтов"></a><a
                            href="http://forum-top.ru/vote/3799" title="Рейтинг форумов Forum-top.ru"
                            target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_3.gif"
                                                alt="Рейтинг форумов Forum-top.ru"></a><br>
                    <object type="application/x-shockwave-flash" data="http://flv-mp3.com/i/pic/ump3player_500x70.swf"
                            height="25" width="170">
                        <param name="wmode" value="transparent">
                        <param name="allowFullScreen" value="true">
                        <param name="allowScriptAccess" value="always">
                        <param name="movie" value="http://flv-mp3.com/i/pic/ump3player_500x70.swf">
                        <param name="FlashVars"
                               value="way=http://dl.waix.ru/4d1a874a1.mp3&amp;swf=http://flv-mp3.com/i/pic/ump3player_500x70.swf&amp;w=170&amp;h=25&amp;time_seconds=240&amp;autoplay=0&amp;q=&amp;skin=blue&amp;volume=100&amp;comment=">
                    </object>
                    <center>
                    </center>
                </center>
            </div>
            <div id="sm2" class="submenutext" style="display: block;">
                <center>21.10.2014 Начинается глобальная чистка мёртвых партнёров!!!<br><br>02.09.2014 Нашей ролевой
                    месяц! Поздравления принимаются!<br><br>31.08.2014 Изменён дизайн таблицы форума. Она сделана
                    гораздо более удобной<br><br>28.08.2014 ДИЗАЙН УЖЕ ГОТОВ. БУДЕТ УСТАНОВЛЕН В ТЕЧЕНИИ НЕДЕЛИ<br><br>02.08.2014
                    Форумная ролевая игра "Силион: ветры небылиц" открыта
                </center>
            </div>
            <div id="sm3" class="submenutext" style="display: none;">
                <center>Глав. Админ - Граф Анегел<br><br>
                    Админ-руководитель - Fairylet Hado
                </center>
            </div>
            <div id="sm4" class="submenutext" style="display: none;">
                <center><a href="http://zw.rusff.me/" title="Кросс-платформа" target="_blank"><img
                        src="http://savepic.ru/5999793.gif" border="0" alt="Zwischenwelt"></a><img
                        src="http://sd.uploads.ru/O8VY5.gif"><a href="http://pumpkinjuice.mybb.ru" target="_blank"><img
                        src="http://savepic.net/5600679.png" title="Marauders: Pumpkin juice!"></a><a
                        href="http://reilana.mybb.ru/"><img src="http://uploads.ru/t/n/d/S/ndS05.gif"></a><a
                        href="http://imagiart.ru/" title="photoshop: Renaissance" target="_blank"> <img
                        src="http://s1.uploads.ru/5ls0J.gif" border="0" alt="photoshop: Renaissance"></a><a
                        href="http://zephyr.f-rpg.ru/"><img src="http://s8.uploads.ru/q3zX5.png"
                                                            alt="Зефир, помощь ролевым"
                                                            title="Зефир, помощь ролевым"></a><a
                        href="http://aquilonem.rusff.me/" target="_blank"><img src="http://s1.uploads.ru/S2jU5.gif"
                                                                               title="AQUILONEM" border="0" width="88"
                                                                               height="30"></a><a
                        href="http://averden.rusff.me" target="_blank"> <img src="http://s5.uploads.ru/mRsnN.png"
                                                                             border="0" width="88" height="31"
                                                                             title="Аверден. Не буди спящего льва"></a><a
                        href="http://8fairytale.mybb.ru/"><img
                        src="http://i.pixs.ru/storage/1/4/4/Bannygif_5500210_11666144.gif" alt="Восьмая Сказка"></a><a
                        href="http://swisschocolate.rusff.me/" target="_blank"><img src="http://savepic.ru/5959215.gif"
                                                                                    border="0"
                                                                                    alt="SWISS CHOCOLATE"></a></center>
            </div>
        </div>
    </div>
</div>

Стиль (можно в html-верх, низ, тогда в тегах <style> или просто в свой стиль как есть)

Код:
#announcement-col-left {
  float: left;
  width: 230px;
}
#announcement-col-right {
  float: right;
  width: 230px;
  text-align: right;
}
#announcement-col-center {
  margin-left: 240px;
  margin-right: 234px;
}

#menu span {
width: 190px;
height: 12px;
text-align: center;
display: block;
margin-bottom: 10px;
padding: 8px 15px 12px 15px;
font-weight: bold;
color: #b2acd1;}

Ну и ваш скриптик, немного подправленный с учетом убранных лишних тегов. Вроде, стоит у вас в html-низу.

Код:
<script>
$(document).ready(function() {
$("div.submenutext").hide();
$(".tabs span:first").addClass("active").show(); 
$("div.submenutext:first").show();
$("div#menu span").click(function() {
    $("div#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div"+activeDiv).fadeIn();
    return false; });
});
</script>

0

5

Shata, Большое спасибо! Очень помогли.

0

6

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png

0


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] Силион: ветры небылиц


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