Форум » Вопросы дизайна » Шапка форума/сайта -"растяжка" » Ответить
Шапка форума/сайта -"растяжка"
Serifa: Обсуждаем только шапки, которые занимают всю ширину таблицы, растягиваются под любой монитор. Будет лучше, если каждый расскажет свой личный пример создания такого чуда. Лично я считаю, что это самый трудный в исполнении тип шапок. Например: Если поставить в центр небольшую картинку, по бокам остается пустое место. Заполнять его можно только фоном, но при растяжении фон, если неоднородно-окрашенный, может повести себя неадекватно. Если просто пустить картинку бэкгроундом на всю ширину, то нельзя будет сделать красивые закругленные края, шапка будет с углами. Если картинку засунуть в угол, нарушиться симметрия. Как здесь: http://fantasy-world.ucoz.net/ (рекламу уберите и увидите всю картинку)
Ответов - 4
Khaion: Я думаю, тут дело в том, где акцент делать, для чего делается шапка вообще. На мой взгляд, если задача шапки - создать небольшое пятнышко, соответствующее тематике ресурса, то лучше всего использовать принцип логотипа - маленькую, компактную картинку сбоку. Вот например 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/
Serifa: Khaion пишет: Кстате, помнится, по поводу SMF'овского Curve разговоры на форуме были на эту тему, что он не во всех браузерах адекватно отображался. В защиту Курвы)) да, но речь там шла о новых версиях браузеров, за чьи глюки несут ответственность только их разрабы. К тому же, вторая версия СМФ все еще находится в разработке, она не окончательная, и об этом предупреждают при ее установке. Но, блин, она такая красивая, что я не устояла)) А темные темы смотрятся просто отпадно. Мне нравится. Теперь к шапкам. http://yafrpg.com/ вот этот вариант мне нравится)) легкий, светлый форум. Кстати, кнопочки знакомые)) Но мне так хочется шапку на всю ширину, и с круглыми краями... А вот это: http://bleachportal.ru/forum/ - ужасно пестро. И, как я говорила, такие шапки имеют квадратные края (э, сама не поняла, что сказала). Я пыталась засунуть такую таблицу в тему Курва на СМФ - вышло плохо. Таблица появляется внутри таблицы самого форума, которая как раз и имеет закругленные края. А внутри будет эта четырехугольная шапка. Выглядит жутко, поэтому я просто поместила в центр картинку. http://www.forroll.org/ Что в таком случае еще предпринять? Можно попробовать вариант "картинка слева" или справа. Сдвинуть ее. Но в Курве все симметрично и сдвинутая картинка совершенно будет не в тему. (Кстати, на дефолтной теме так и есть).
Khaion: Serifa пишет: И, как я говорила, такие шапки имеют квадратные края (э, сама не поняла, что сказала). Я пыталась засунуть такую таблицу в тему Курва на СМФ - вышло плохо. Таблица появляется внутри таблицы самого форума, которая как раз и имеет закругленные края. А внутри будет эта четырехугольная шапка. Выглядит жутко, поэтому я просто поместила в центр картинку. Я правильно понимаю, что шапка с закругленными краями - имеется ввиду что-то вроде этого? www.phpbb.com/community/ (не реклама пыхи) Апдейт: вот еще пара интересных решений http://www.gamexe.net/forum/index.php http://web.9crows.ru/forum/ (а здесь советую еще заглянуть в портфолио - это нечто замечательное: http://web.9crows.ru/)
Serifa: У них все шапки кликабельны и нельзя глянуть картинку(( Скорее всего, эти форумы фиксированной ширины, поэтому и картинку можно обработать как угодно. Но вот идея с цветами ников мне понравилась)) http://www.gamexe.net/forum/index.php Жаль, что при смене темы оформления нельзя менять цвета ников. Они не привязаны к темам. http://web.9crows.ru/forum/ Увы, еще один закрытый проект. Портфолио так и не открылся.
полная версия страницы