Внимание! Внимание! На форуме включена премодерация!

АвторСообщение

"Имперско-Галактический спонтанный скрытый локационщик"
Главный форумный флудильщик





Сообщение: 4579
Зарегистрирован: 20.06.07
Рейтинг: 32

Награды: Героический админЗа феерическое чувство юмора
ссылка на сообщение  Отправлено: 29.01.10 23:44. Заголовок: Шапка форума/сайта -"растяжка"


Обсуждаем только шапки, которые занимают всю ширину таблицы, растягиваются под любой монитор. Будет лучше, если каждый расскажет свой личный пример создания такого чуда.

Лично я считаю, что это самый трудный в исполнении тип шапок.

Например:
Если поставить в центр небольшую картинку, по бокам остается пустое место. Заполнять его можно только фоном, но при растяжении фон, если неоднородно-окрашенный, может повести себя неадекватно.

Если просто пустить картинку бэкгроундом на всю ширину, то нельзя будет сделать красивые закругленные края, шапка будет с углами.

Если картинку засунуть в угол, нарушиться симметрия.
Как здесь: http://fantasy-world.ucoz.net/
(рекламу уберите и увидите всю картинку)



Звездолет Темное Пламя
ЗВ-шный сюжет - обсуждение
"Доблесть в бою определяется не числом убитых, а числом сдавшихся в плен" - маршал Тауберт
Music, blasters and old jedi masters ;-)))
Спасибо: 0 
ПрофильЦитата Ответить
Ответов - 4 [только новые]







Сообщение: 321
Настроение: ...у вас тут ошибка. Я хаотик!
Зарегистрирован: 18.09.07
Рейтинг: 5

Награды: За просветительскую работу среди участников ФРИ!За Футураму! (Серифа)
ссылка на сообщение  Отправлено: 30.01.10 09:17. Заголовок: Я думаю, тут дело в ..


Я думаю, тут дело в том, где акцент делать, для чего делается шапка вообще. На мой взгляд, если задача шапки - создать небольшое пятнышко, соответствующее тематике ресурса, то лучше всего использовать принцип логотипа - маленькую, компактную картинку сбоку.
Вот например http://forums.rpg-world.org/
Шапка создана по принципу "картинка в углу". Вот честно, на мой взгляд, смотрится весьма органично. Сразу понятно, где находишься (логотип ресурса) и зачем находишься (акцент на тело форума).
То же самое здесь: http://shadowdale.ru/, ну, картинка по центру.
Сразу скажу, что разрешение экрана у меня 1280х1024, так вот, ни ассимметрия, ни пустые боковины в данных шапках ничуть не напрягают, более того, они не бросаются в глаза и вообще об этом думаешь в самую последнюю очередь.
Или вот еще: http://disenteria.ru, http://forum.futuramer.ru/.

Да вообще, если посмотреть, то большинство дизайнов форумов всех движков и мастей сделаны именно по этому принципу - маленькая картинка сбоку шапки, маленькая шапка.

Теперь о том, как сделать резиновую шапку из целой картинки. Примеров под рукой нету, к сожалению, напишу то, что вспомню, как делал. На самом деле все очень просто.
1. Делается картинка нужной высоты и длины эдак пикселей 1600 (вроде сейчас это максимальная ширина разрешения мониторов), но можно и больше. Самое главное - чтобы картинка при повторе стыковалась без швов, потому что ей при установке надо будет задать параметр repeat-x.
Вот пример такой картинки:

Если приложить начало это картинки к ее хвосту, то шва не будет видно. Плюс к этому сама картинка должна быть достаточно длинной, чтобы это не происходило слишком часто и повтор не бросался в глаза.
2. Теперь достаточно в шапке сделать таблицу в 1 строку и 1 ячейку, и вставить в нее эту картинку бэкграундом со следующими параметрами: background-repeat:repeat-x;background-position: left.
3. После этого можно сверху уже добавить в саму ячейку логотип.
4. ???
5. PROFIT!!!
Итого: шапка свободно растягивается при любом разрешении экрана. За счет того, что картинка используется в виде бэкграунда с зафиксированной левой частью, её правая часть скрывается по мере сжатия таблицы и растягивается при растяжении. А когда растяжение превышает длину картинки, она просто повторяется.

В общем, если механизм не понятен, я могу на скорую руку где-нибудь сделать её и выложить пример, для наглядности.
На мой же взгляд, резиновая шапка - не самое сложное, просто у нее вариантов компановки меньше. Вот сверстать дизайн на div'ах, да с кроссбраузерностью - вот это сложно. Кстате, помнится, по поводу SMF'овского Curve разговоры на форуме были на эту тему, что он не во всех браузерах адекватно отображался.

Апдейт
Нашел форум, где шапка сделана по приведенному мной принципу, с той лишь разницей, что она зафиксирована по центру, а при растяжении/сжатии работают оба края. В общем, это зависит от самой картинки, от того, что требует на ней показать, на чем требуется держать внимание посетителей.
Пример этой шапки: http://bleachportal.ru/forum/


Золотые Сады - "Капитан Крейн спешит на помощь!"
Ещё одна фрпг - в разработке
Спасибо: 0 
ПрофильЦитата Ответить

"Имперско-Галактический спонтанный скрытый локационщик"
Главный форумный флудильщик





Сообщение: 4581
Зарегистрирован: 20.06.07
Рейтинг: 32

Награды: Героический админЗа феерическое чувство юмора
ссылка на сообщение  Отправлено: 30.01.10 13:11. Заголовок: Khaion пишет: Кстат..


Khaion пишет:

 цитата:
Кстате, помнится, по поводу SMF'овского Curve разговоры на форуме были на эту тему, что он не во всех браузерах адекватно отображался.


В защиту Курвы)) да, но речь там шла о новых версиях браузеров, за чьи глюки несут ответственность только их разрабы. К тому же, вторая версия СМФ все еще находится в разработке, она не окончательная, и об этом предупреждают при ее установке.

Но, блин, она такая красивая, что я не устояла)) А темные темы смотрятся просто отпадно. Мне нравится.

Теперь к шапкам.
http://yafrpg.com/
вот этот вариант мне нравится)) легкий, светлый форум. Кстати, кнопочки знакомые))

Но мне так хочется шапку на всю ширину, и с круглыми краями...
А вот это:
http://bleachportal.ru/forum/
- ужасно пестро.

И, как я говорила, такие шапки имеют квадратные края (э, сама не поняла, что сказала).
Я пыталась засунуть такую таблицу в тему Курва на СМФ - вышло плохо. Таблица появляется внутри таблицы самого форума, которая как раз и имеет закругленные края. А внутри будет эта четырехугольная шапка. Выглядит жутко, поэтому я просто поместила в центр картинку.

http://www.forroll.org/

Что в таком случае еще предпринять?
Можно попробовать вариант "картинка слева" или справа. Сдвинуть ее. Но в Курве все симметрично и сдвинутая картинка совершенно будет не в тему. (Кстати, на дефолтной теме так и есть).




Звездолет Темное Пламя
ЗВ-шный сюжет - обсуждение
"Доблесть в бою определяется не числом убитых, а числом сдавшихся в плен" - маршал Тауберт
Music, blasters and old jedi masters ;-)))
Спасибо: 0 
ПрофильЦитата Ответить





Сообщение: 326
Настроение: ...у вас тут ошибка. Я хаотик!
Зарегистрирован: 18.09.07
Рейтинг: 5

Награды: За просветительскую работу среди участников ФРИ!За Футураму! (Серифа)
ссылка на сообщение  Отправлено: 31.01.10 19:43. Заголовок: Serifa пишет: И, ка..


Serifa пишет:

 цитата:
И, как я говорила, такие шапки имеют квадратные края (э, сама не поняла, что сказала).
Я пыталась засунуть такую таблицу в тему Курва на СМФ - вышло плохо. Таблица появляется внутри таблицы самого форума, которая как раз и имеет закругленные края. А внутри будет эта четырехугольная шапка. Выглядит жутко, поэтому я просто поместила в центр картинку.



Я правильно понимаю, что шапка с закругленными краями - имеется ввиду что-то вроде этого?
www.phpbb.com/community/ (не реклама пыхи)

Апдейт:
вот еще пара интересных решений
http://www.gamexe.net/forum/index.php
http://web.9crows.ru/forum/ (а здесь советую еще заглянуть в портфолио - это нечто замечательное: http://web.9crows.ru/)


Золотые Сады - "Капитан Крейн спешит на помощь!"
Ещё одна фрпг - в разработке
Спасибо: 0 
ПрофильЦитата Ответить

"Имперско-Галактический спонтанный скрытый локационщик"
Главный форумный флудильщик





Сообщение: 4608
Зарегистрирован: 20.06.07
Рейтинг: 32

Награды: Героический админЗа феерическое чувство юмора
ссылка на сообщение  Отправлено: 31.01.10 20:53. Заголовок: У них все шапки клик..


У них все шапки кликабельны и нельзя глянуть картинку((
Скорее всего, эти форумы фиксированной ширины, поэтому и картинку можно обработать как угодно.

Но вот идея с цветами ников мне понравилась))
http://www.gamexe.net/forum/index.php

Жаль, что при смене темы оформления нельзя менять цвета ников. Они не привязаны к темам.

http://web.9crows.ru/forum/
Увы, еще один закрытый проект.
Портфолио так и не открылся.



Звездолет Темное Пламя
ЗВ-шный сюжет - обсуждение
"Доблесть в бою определяется не числом убитых, а числом сдавшихся в плен" - маршал Тауберт
Music, blasters and old jedi masters ;-)))
Спасибо: 0 
ПрофильЦитата Ответить
Ответ:
1 2 3 4 5 6 7 8 9
большой шрифт малый шрифт надстрочный подстрочный заголовок большой заголовок видео с youtube.com картинка из интернета картинка с компьютера ссылка файл с компьютера русская клавиатура транслитератор  цитата  кавычки моноширинный шрифт моноширинный шрифт горизонтальная линия отступ точка LI бегущая строка оффтопик свернутый текст

показывать это сообщение только модераторам
не делать ссылки активными
Имя, пароль:      зарегистрироваться    
Тему читают:
- участник сейчас на форуме
- участник вне форума
Все даты в формате GMT  0 час. Хитов сегодня: 151
Права: смайлы да, картинки да, шрифты да, голосования нет
аватары да, автозамена ссылок вкл, премодерация вкл, правка нет



Форумные ролевые игры на страже Галактики... (Приключения, фантастика, магия, альтернативная реальность, историческая драма...) ФРИ - против одиночества! Найди себе друзей во ФРИ! ФРИ - за интерес к истории! ФРИ - за развитие фантазии! ФРИ - за расширение кругозора! ФРИ - за русский язык! Это каталог форумных ролевых игр: форум, в разделах которого имеются адреса других форумов с кратким описанием того, что там происходит. Как найти свою игру? Посетить интересующий раздел нужной тематики, и пройтись по темам и указанным в них адресам. Потом можно написать свой отзыв прямо в теме.
Некоммерческий проект. Если Вы оставили здесь свои cookie, Вы сами за них отвечаете! Информация на сайте доступна по лицензии Creative Commons «Attribution-NonCommercial-NoDerivatives» 4.0, если не указана другая лицензия в подписи автора сообщения.

..... база данных пополняется с 20/06/2007..... картинки для оформления форума сделаны с помощью редактора Inkscape, в шапке присутствует фрагмент работы неизвестного художника



в_в_е_р_х