[таблица] Leaden skies

Поделиться12014-09-01 20:44:05

Автор: Hayes
there's no more denying
Зарегистрирован: 2014-04-28
Приглашений: 0
Сообщений: 319
Уважение: [+67/-0]
Позитив: [+10/-0]
Провел на форуме:
3 дня 0 часов
Последний визит:
2016-01-03 22:16:01

1. Название ролевой, ссылка:
Leaden skies
*отсутствие ссылки согласовано с АМС*
2. Что требуется:
скрипт таблицы
Макет
3. Дополнительно:
- ссылки слева при наведении должны менять цвет
- если текст не будет влезать в таблицу, должны появляться прокрутка

Отредактировано Hayes (2014-09-01 21:08:03)

0

Поделиться22014-09-02 07:20:13

Автор: Spiritus Tergi
Nefas et Metus
Зарегистрирован: 2014-04-24
Приглашений: 0
Сообщений: 352
Уважение: [+69/-1]
Позитив: [+9/-3]
Провел на форуме:
8 дней 22 часа
Последний визит:
2019-03-17 20:31:19

Hayes

Код:

<table id="tabula"><tr>

<td class="columna">
<div class="capita">Навигация</div>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<a class="ancora" href="">ссылка</a>
<div class="capita">ТОПЫ и КАТАЛОГИ</div>
<a href=""><img src="http://placehold.it/88x31"></a><a href=""><img src="http://placehold.it/88x31"></a><a href=""><img src="http://placehold.it/88x31"></a><a href=""><img src="http://placehold.it/88x31"></a>
</td>

<td class="columna">
<div class="capita">Новости Форума</div>
<div class="scriptum">
Текст.
</div>
</td>

<td class="columna">
<div class="capita">В Игре</div>
Текст.
</td>

</tr></table>

CSS:

Код:

#tabula {width: 888px; height: 335px; background: #dbd7d8; border: 3px solid #808080; border-radius: 3px; border-collapse: collapse;}
.columna {width: 37.5%; padding: 0px 9px 0px 9px; border: 2px solid #939192; vertical-align: top;}
.columna:nth-child(1) {width: 25%; text-align: center;}
.capita {font-size: 20px; padding: 9px 0px; text-align: center;}
.ancora {display:block; text-align:center; text-decoration: none; background: #600604; color: white; margin: 3px 0px;}
.ancora:hover {background: #8c2421;}
.columna:nth-child(1) a:not(.ancora) {display: inline-block; padding: 3px;}
.scriptum {overflow-y: scroll; height: calc(100% - 50px);}

+1

Поделиться32014-09-02 15:54:19

Автор: Hayes
there's no more denying
Зарегистрирован: 2014-04-28
Приглашений: 0
Сообщений: 319
Уважение: [+67/-0]
Позитив: [+10/-0]
Провел на форуме:
3 дня 0 часов
Последний визит:
2016-01-03 22:16:01

Spiritus Tergi, спасибо Вам огромное. Но у меня почему-то некорректно отображается столбец ссылок.
Вот ссылка на тестовик, где я хотела поэкспериментировать со стилем

Добавлено спустя 26 минут 55 секунд:
все, я протупила, нашла собственную ошибку.
Спасибо!

Отредактировано Hayes (2014-09-02 16:42:10)

0