Форум » Помощь по коду » В помощь молодому дизайнеру FastBB (FAQ) » Ответить
В помощь молодому дизайнеру FastBB (FAQ)
Blazing Wizard: 1. Какие названия у кнопок и куда их подгрузить? 2. Как разместить таблицы по бокам от основного форума? 3. Как убрать рамки вокруг рисунков-ссылок? 4. Как зафиксировать фон или помешать ему "прокручиваться"? Что еще можно сделать с расположением фона? 5. Какой скрипт позволяет при загрузке страницы ставить случайный логотип из имеющихся? 6. Как настроить все баннеры, все таблицы и убрать бордеры у всех картинок? 7. Как зафиксировать размер текста? (например, чтобы избежать дублирования логотипа или разместить его точно в отведенный фоновым изображением блок) 8. Как нарисовать рамку вокруг форума? 9. Как настроить отображение форума? Все вопросы, связанные с материалами этой темы задавать можно здесь. Справочные ресурсы по HTML и CSS http://html.manual.ru/ - достаточно просто устроенный и понятно написанный справочник по HTML. Полезен как для изучения так и для освежения памяти. http://www.citforum.ru/internet/html/csstutorial.shtml - неплохая статья по CSS. Я бы рекомендовал начинать изучение стилей с нее, разумеется, справившись в первом справочнике о теге <STYLE>. http://htmlbook.ru/ - достаточно мощный справочник по тегам HTML и параметрам CSS. Интерфейс немного глючный (текст съезжает вниз) и это не развлекательное чтиво, но крайне полезен для дальнейшего изучения материала, после ознакомления с первыми двумя ресурсами.
Ответов - 29
Greenmarine: http://www7.jpe.ru/gif/1/list.htm - здесь смотреть, какие кнопки рисовать и под каким именем сохранять. http://photobucket.com - здесь (к примеру) создавать альбом и в него загружать кнопки. Потом ссылку на альбом в поле "адрес папки с кнопками" в настройках форума. Другие сервера для закачки кнопок: http://www.nm.ru ; http://sbn.bz/
лампочка: Итак, вас хочу попросить помочь с таблицей. Мне нужно сделать два её типа: 1. Справа от форума. Не маленькую а на оставшуюся часть страницы. Набросок: 2. Таблицу по обе стороны форума. Набросок: 3. Таблица слева от форума
Карми: лампочка 1. В поле "Новости": <table width=100%><tr><td width=здесь можно добавить, какого размера должен быть форум> В хтмл-низ (по отношению к этой таблице): </td> <td width =ширина таблички справа> сама правая табличка </td> </tr> </table> 2. В хтмл-верхе в самом конце: <TABLE width=100%> <TR> <TD width=ширина левой таблички> табличка №1 </td> <td> В хтмл-низе: </TD> <td width=ширина правой таблички> таблица №2 </td> </TR> </TABLE> С кодом и вправду легче помочь, чем самим полностью делать дизайн... 3. В поле "Новости": <table width=100%> <tr> <td width =ширина таблички справа> <--также здесь можно прописать и высоту сама правая табличка </td> <td width=здесь можно добавить, какого размера должен быть форум> В хтмл-низ (по отношению к этой таблице): </td> </tr> </table>
Гэлка: Карми Спасибо за урок, у меня получилось сделать таблицы побокам, но они у меня почему-то получаются полностью по длине форумной таблицы и длинющие
Карми: Гэлка Они и должны быть до конца форумной таблицы, если нужны короче - стоит задать парамет height либо для ячейки (то есть рядом с выделенными width), либо для соответствующей таблицы,
Карми: Вот изображение: Что нужно, чтобы убрать рамочки вокруг img-ссылок или поменять их цвет? <img src="картинка" border="размер рамки (0 - нет рамки)"> <body link="обычный цвет рамки и текстовых ссылок, если иное не указано в CCS" vlink="цвет рамок вокруг посещенных ссылок-изображений и текстовых ссылок, если иное не указано в CCS" alink="цвет рамок вокруг активных ссылок-изображений и текстовых ссылок, если иное не указано в CCS">
Карми: Как зафиксировать фон или помешать ему "прокручиваться"? Что еще можно сделать с расположением фона? body{background:url(адрес фона) параметры;} Параметры бывают (если надо использовать несколько, то прописываются без знаков препинания, через пробелы): no-repeat - фон не будет повторяться center - фон будет отображен по центру экрана repeat-x (repeat-y) - фон будет повторяться только по горизонтали (вертикали) fixed (scroll) - при прокрутке экрана фон останется неподвижным (будет прокручиваться) - эти два параметра используются лишь с body #cm #cm (#% #%) - первое число - расстояние от левого края, второе - от верха. Можно указывать в сантиметрах и процентах (допустимо и смешанное использование, например, 50% 5 cm - фон отображается от середины по горизонтали и в пяти сантиметрах от верха) Эти же параметры (кроме двух) можно использовать и для фонов таблиц или любых других блоков. Для этого фон и параметры задаются в атрибуте style.
Zenitchik: Карми, мало: вот аттрибуты семейства background: backgroung-color - цвет фона элемента *Применимо для: всех элементов ПРИМЕР: background-color:#f00000 background-image - фоновое изображение *Применимо для: всех элементов Возможные значения: [1] none - нет [2] URL (+) ПРИМЕР: background-image:URL(cool.gif) background-repeat - повторения фонового изображения *Применимо для: всех элементов Возможные значения: [1] repeat - размножает фоновое изображение во всех направлениях [2] repeat-x - размножает фоновое изображение горизонтально [3] repeat-y - размножает фоновое изображение вертикально [4] no-repeat - не повторяющиеся изображение ПРИМЕР: background-repeat:no-repeat background-attachment - возможность прокрутки фонового изображения *Применимо для: всех элементов Возможные значения: [1] scroll - фоновое изображение скроллится всесте с содержанием документа [2] fixed - не скроллится. Фиксируется в одном месте. Не работает в Нетскейпе ПРИМЕР: background-attachment:fixed background-position - положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat) *Применимо для: block-level и replaced элементов Возможные значения: [1] процент от ширины и процент от высоты (+) [2] top, middle, bottom - одно из значений [3] left, center, right - одно из начений [4] расстояние от левого края и расстояние от вершины ПРИМЕР: background-position:50%0% background - обобщает вышеперечисленные свойства *Применимо для: всех элементов Возможные значения: [1] background-color [2] background-image [3] backgroun-position [4] background-attachment [5] background-repeat ПРИМЕР: background:no-repeat black fixed 50%0% Источник
Blazing Wizard: Какой скрипт позволяет при загрузке страницы ставить случайный логотип из имеющихся? <div id="logo"></div> - это контейнер, в который скрипт будет вставлять картинку. <script language="javascript" type="text/javascript"> img=new Array(); dat=new Date(); j=0; img[j++]="url 1-й картинки"; img[j++]="url 2-й картинки"; img[j++]="url 3-й картинки"; img[j++]="url 4-й картинки"; logo.innerHTML='<img src="' + img[Math.ceil(dat.valueOf()/1000) % img.length] + '">'; </script> Этот скрипт может работать только с одним контейнером. Картинок может быть сколькл угодно - строки добавите по аналогии. Выбор картинки определяется текущей секундой. Зеленым - помечен делитель времени. 1000 - соответствует секунде, 60000 - минуте и т.д. Источник: http://roles.borda.ru/?1-12-0-00000250-000-0-0#004
Zenitchik: Небольшие облегчающие жизнь хитрости с применением CSS. чтобы убрать бордеры у всех картинок: IMG{border-style:none;} чтобы назначить всем таблицам border="0" cellspacing="0" TABLE {border-style:none; border-collapse: collapse;} чтобы не прописывать каждый раз параметры баннеров 88х31 .b88x31{width:88px;height:31px;border-style:none;} Этот код убирает бордер и устанавливает размеры всем картинкам с class="b88x31" Для тех, кто не знаком со стилями, рекомендую найти в дебрях интернета справку по тегу <STYLE>
Севилла: насчет кнопок, как их делать и какие имена присваивать, ссылка не работает http://www7.jpe.ru/gif/1/list.htm
Zenitchik: http://www7.borda.ru/gif/1/list.htm
Mad: Дублирование логотипа Как избежать такого? Одна из причин дублирования картинки - текст, который при изменении настроек браузера изменяет свой размер и растягивает ячейку таблицы. Как зафиксировать размер текста в пиксельном значении? Для того, что бы текст сохранял свой размер, следует воспользоваться стилем. Например: <font color="#000000" face="Verdana" size="1"> текст </font> Поменять на: <span style="font size:10px;font-color:#000000;font-face: Verdana"> текст </span> В данном случае применялся тэг span, хотя style можно вписать и в тэг ячейки таблицы.
Карми: Как создать рамку вокруг таблицы форума? Если есть базовые знания хотя бы по созданию таблиц, то сам принцип следующий: http://img259.imageshack.us/img259/1018/screen11fq7.png То есть создается таблица 3х3: Первая строка Первая ячейка aka первый столбец - изображение угловой картинки (не дублирующейся, с фиксированным значением ширины и высоты). Вторая - изображение картинки рамки (дублирующейся, с фиксированным значением высоты, но не ширины). Третья - изображение угловой картинки (не дублирующейся, с фиксированным значением ширины и высоты). Вторая строка Первая ячейка - изображение дублирующейся картинки (дублирующейся, с фиксированным значением ширины, но не высоты). Вторая - собственно, тут изображений не нужно. Это ячейка для форумной таблицы (то есть тут кончается HTML-верх и начинается форум). Все последующие теги пишутся уже в хтмл-низ. Третья - изображение дублирующейся картинки (дублирующейся, с фиксированным значением ширины, но не высоты). Третья строка Первая ячейка - изображение угловой картинки (не дублирующейся, с фиксированным значением ширины и высоты). Вторая - (форумная таблица заканчивается, начинается HTML-низ) изображение дублирующейся картинки (дублирующейся, с фиксированным значением высоты, но не ширины). Третья - изображение угловой картинки (не дублирующейся, с фиксированным значением ширины и высоты). Изображения - это элементы, в совокупности составляющие рамку, которую вы хотите сделать. Оригинал текста находился здесь
Карми: Как настраивать стили оформления таблиц форума (взято с какого-то форума, не помню с какого)) )? <STYLE type=text/css> //Отсюда начинается описание стилей форума (собственно, простор для custom'изации дизайна): 1) BODY{margin:10px;margin-top:15px;margin-bottom:10px;} //Стиль тела документа 2) td{font-family:Verdana;} //Общий стиль таблиц 3) .font1{font-size:12px;font-weight:400;} //текст сообщений 4) .font2{font-size:11px;font-weight:400;}// автоподпись, личное звание, «На форуме: NNN, гостей 0. Всего: 1», зарегистрироваться, отправлено: и еще много мелочей; «Профиль NNN • Настройки • Участники • Выход • Все прочитано»; Ник и пароль возле полей входа вверху; комментарии к названиям разделов; 5) .font3{font-size:11px;font-weight:700;} //ник 6) .font4{font-size:11px;font-weight:700;} //для кнопок Ответить, новая тема, Новый опрос, обявления админа и еще для некоторых кнопок. Если с включенной графикой менять этот класс то различия заметиш только если будешь менять размер шрифта 7) .font5{font-size:11px;font-weight:700;COLOR:#ffa450;} //Тема, Ответов, Просмотров и шапка форума. 8) .font6{font-size:11px;font-weight:700;} - //надписи между заголовками разделов на Главной форума (т. н. "разделительная полоса") 9) a:link{color:6020ff;text-decoration:none;} //Цвет и стиль ссылок 10) a:visited{color:#5493b4;text-decoration:none;} //Цвет и стиль посещенных ссылок 11) a:hover{color: #dd6900;text-decoration:underline;} //Цвет и стиль ссылок, на которые наведен курсор 12) tr.font3{height:35px;} //Это стили текста в ячейках таблицы форума 13) tr.font5{height:35px;} - //настройки стилей для строк таблиц в которых применяется font5 14) tr.font6{height:35px;} - //настройки стилей для строк таблиц в которых применяется font6 15) input,select,textarea{font-size:11px;font-family:Verdana;} - //(Это текст в кнопках типа отправить, сохранить настройки, вход и т. д. — Esty) и формы ввода 16) textarea{width:100%;height:120;} - // параметры формы ввода (соответственно ширина (в % или пикселях) и высота (лучше просто в пикселях), 100% означает во всю ширину окна. — Boris 17) input.sender{background-color:#ffffff;font-weight:700;border:1 outset rgb(0,0,0);} //это цвет "color:#ffffff" заливки кнопок ввода </STYLE>
Кейт: как поставить фон на форум?
R.S.S: Кейт, Смотрим Настройки HTML дизайна 0. И в самом конце, после: </style> </head> <body> ставится: <BODY background="адрес картинки"> Я правильно вас понял?
Zenitchik: Не после! Дублировать теги - последнее дело. В тег <body> добавляется параметр background="адрес" Но я бы лучше добавил в стиль BODY (смотри пост Карми) аттрибут background-image:url(адрес).
Yumi: 1)Как это исправить? http://s02.radikal.ru/i175/0910/5f/47f1a0f93b38.jpg 2) <script language="javascript" type="text/javascript"> img=new Array(); dat=new Date(); j=0; img[j++]="url 1-й картинки"; img[j++]="url 2-й картинки"; img[j++]="url 3-й картинки"; img[j++]="url 4-й картинки"; logo.innerHTML='<img src="' + img[Math.ceil(dat.valueOf()/1000) % img.length] + '">'; </script> Не очень поняла куда это вставлять...у меня вот такой код лого: <TABLE align="center" cellSpacing="0" cellPadding="0" width="905" height="308" border="0" background="http://img.pixs.ru/storage/7/9/7/2jpg_1066438_323797.jpg">
Zenitchik: Yumi 1. А как Вы это сделали? Пока не увижу код - не скажу. 2. Скрипт не предназначен для работы с таким лого, как у Вас.
гест: Дублирую, вдруг премодерация глючит: Как прикрепить к верху содержимое таблички справа от форума (туда поставлен чат)? Чтобы при открывании темы с большим количеством ответов он оставался "справа-топ", а не терялся в середине страницы. Вопрос к вот этой инструкции - Карми пишет: 2. В хтмл-верхе в самом конце: цитата: <TABLE width=100%> <TR> <TD width=ширина левой таблички> табличка №1 </td> <td> В хтмл-низе: цитата: </TD> <td width=ширина правой таблички> таблица №2 </td> </TR> </TABLE>
Zenitchik: гест <td valign="top" width=ширина правой таблички> таблица №2 </td>
Сайфер: У меня другой вопрос... результат нужен такой: ############################### #----------------------- ЛОГО---------------------------# #----------------------------------------------------------# ############################### #---------#-----------------------------------------------# #----Д---#-----------------------------------------------# #----О---#--------------ОСНОВНАЯ-------------------# #----П---#--------------ТАБЛИЦА----------------------# #---------#--------------ФОРУМА----------------------# #----Т---#-----------------------------------------------# #----А---#-----------------------------------------------# #----Б---#-----------------------------------------------# ############################### ну вот как-то так.... ну или для полной понятности пример: http://prophecy.forum24.ru/
Zenitchik: Примерно так: верх: <table><tr><td colspan="2">здесь лого</td><tr> <tr><td>здесь левое поле</td><td> нмз: </td></tr></table>
Сайфер: Спасибо, Zenitchik получилось вот так. http://metro2037.forum24.ru/ Как привести все внешние таблицы к виду основной (черная рамка вокруг)?
Сайфер: И как изменить цвет только часов?
Zenitchik: А где часы?
Сайфер: Часы - всмысле это: Текущее время: 18 декабря 19:26, пятница Они черные и на фоне их не видно. Если менять тот класс шрифта который им соответствует, то меняются еще и загаловки....
popec1: Привет, я тут новенький, давайте знакомиться!Меня зовут Даша вот моя фотка. я тут голенькая! Ну будем знакомы!!!! Давайте делитесь своми фотами! Буду очень рада!!
полная версия страницы