Toshiro
ага,спасибо
🎧 Подкаст «НЕТЕРОЛЕВЫЕ»
Рассказываем и обсуждаем Форумные Ролевые Игры (ФРПГ).
Telegram Обсудить
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Таблицы для форумов (часть 2)
Toshiro
ага,спасибо
Toshiro
только у меня текст выплывает за рамки контейнера,как у него можно размер изменить?
Лэна
Зачем вам рамка О,О я же специально без рамки делал что бы было красиво ((
Код:<style> div .splLink {width: 230px; height: 50px; font-weight: bold; background: transparent; border: 1px solid #020000 } .spll {width: 170px; height: 50px; } .spll div .splCont {height: auto; width: 250px; background: #AAAAAA; padding: 5px; z-index: 1000; border: 1px solid #020000; font-size: 12px; font-family: Century Gothic; text-align: center;} </style>
Toshiro
так у меня все равно с рамкой было.
это вставлять куда?
Toshiro
а,
все получилось
1. ссылка на форум -
http://lightagainstdarkness.rolka.su/
2. эскиз таблицы.:
рисовать не стала, просто четыре ячейки показывающие меню при нажатии мышкой
4. дополнительные предпочтения -
никаких...
_________________
уже не нужно...я нашла свою старую таблицу
Отредактировано Рицка-кун (16.08.10 22:38)
1. ссылка на форум - http://comicsforum.myff.ru/
2. эскиз таблицы.: http://s49.radikal.ru/i124/1008/66/d0d92ba63e87.png
3. дополнительные предпочтения - Ничего не требуется. Просто сделайте такую простенькую таблицу, ну и желательно, чтобы границы были как на эскизе.
Отредактировано Rhino (17.08.10 11:29)
1. ссылка на форум - http://dragonyaoi.mybb.ru/
2. эскиз таблицы.:http://s56.radikal.ru/i151/1008/a2/3100ee7a94db.jpg
4. дополнительные предпочтения - ганицы убрать. в окошке "баннеры" - прокрутка баннеров.
в окошке "меп-карта" - собственно, меп-карта. Вот она:
<MAP NAME="forums-map"> <AREA HREF="http://dragonyaoi.mybb.ru/viewtopic.php?id=2" SHAPE="rect" COORDS="342,40,403,71" ALT="Rules"> <AREA HREF="http://dragonyaoi.mybb.ru/viewtopic.php?id=3" SHAPE="rect" COORDS="350,84,398,111" ALT="Plot"> <AREA HREF="http://dragonyaoi.mybb.ru/viewtopic.php?id=5" SHAPE="rect" COORDS="332,132,414,155" ALT="Pattern"> <AREA HREF="http://dragonyaoi.mybb.ru/viewtopic.php?id=14#p26" SHAPE="rect" COORDS="343,176,402,199" ALT="News"> </MAP> <BODY> <IMG src="http://savepic.ru/1531455.png" USEMAP="#forums-map" BORDER="0"> </body>
Рицка-кун
1. Установка.
<style>
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background: url(https://upforme.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>
<!--Спойлер - контейнер-->
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>
<center><table style="width: 90%">
<tr>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td></tr>
</table></center>
2. Заполнение меню.
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.
а). По-умолчанию в коде содержалосься 6 блоков. По вашему усмотрению я оставил только 4. Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:
Код:<td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">третий контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td>Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!
б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.
в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.
3. Оформление меню.
Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:
а).
Код:div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).б).
Код:.spll {width: 130px; height: 70px; }Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).в).
Код:.spll div .splCont {height: auto; width: 300px; background: url(https://upforme.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background: url(https://upforme.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).Внимание! Производить какие-либо изменения во второй части кода ЗАПРЕЩЕНО!
взято с: Меню для форума (различные виды)
Rhino
<center><table style="width: 100%" border="1">
<tr>
<td>Объявление</td><td>партнеры</td></tr>
<tr><td colspan=2>Картинка</td></tr>
</table></center>
Сделать линии как на эскизе, увы, не могу.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Таблицы для форумов (часть 2)