Очень симпатичный фон у форума. Вопрос.

[Rayden]

2. А что получается, если окошко у нас не 1280, а больше? У меня например монитор по ширине 1680 пикселей.
А получается вообще порнография:

guru5.jpg

Верхнее меню выравнивается по правому краю, собачки по левому. Справа имеем кучу пустого места.

Добавлено спустя 31 минуту 23 секунды:

Пойду застрелюсь

Это будет слишком просто

Для начала определитесь, что вы хотите получить в итоге. Желательно сформулировать внятно и словами.

[Carica]

Желательно сформулировать внятно и словами.

Хочу..чтобы не было белого квадрата справа от картинки.
У картинки размер 1248*182, т.е при всем желании она не растянется. Значит нужно ее расположить.. в центре и сделать фиксацию размера форума. Ну как-то так.

А меню справа, потому что слева будет а-ля слоган сайта.

Так внятно? Или подумать и написать что-то другое?

[Warlock75]

Или подумать

С этого и начинать нужно всегда)))
А картинку можно и по другому сделать, например по краям добавить блоки с фоном повторяющимся по Х. Вариантов тут много. Нужно, чтобы вы четко определились, что вам нужно. Вариантов от простого к сложному, на вскидку, штук 10 можно применить.

[Rayden]

Так внятно?

Неа...
Нужно рассмотреть все варианты.
Резиновый размер форума:
Если мы отцентруем картинку, то при большом экране у нее появятся белые пятна, а при маленьком (меньше 1280) оба края уедут за края экрана. Как это будет, картинка прижмется к краям окна или же прям по ней поедут белые полоски отступов - это вопрос.

Фиксированный размер форума:
Тут собственно главный вопрос, а какой он этот размер будет? 1280, чтоб вся картинка уместилась? А что тогда будет на экране у людей с разрешением 1024 точки? Или у тех, кто чуть уменьшит окно? Сразу появится горизонтальная полоса прокрутки?

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

Кстати, если вернуться к самому первоначальному вопросу, то там все элементарно. Картинку надо было фоном цеплять не к ID=logo, а к ID=headerbar. Тогде не понадобились бы извращения с горизонтальными отступами, у headerbar всегда горизонтальный размер такой же, как у слдедующих под ним блоков - navbar, forabg... Но опять же остается открытым вопрос, а что будет с картинкой при уменьшении/увеличении окна.

Добавлено спустя 24 минуты 25 секунд:
У меня есть идея, как правильно и красиво сделать. Такса надоумила.
1. Домик с эмблемой пока убираем нафиг.
2. Картинку с собаками переделываем. Убираем обводку и скругление углов. Делаем так, чтоб две картинки, стоящие рядом легко объединялись в один рисунок. С таксой, как я понимаю все ок, она соединится, а вот с облаками надо посмотреть.
3. Переделанную картинку прописываем бекграундом к headerbar, с параметром repeat-x.
4. headerbar-у делаем высоту height: 182px, чтоб картинка по высоте влезала вся.
5. Если надо, делаем headerbar-у синий бордер.
6. Если надо, corners-top и corners-bottom заменяем на свои, чтоб сделать скругленные уголки. Это я где-то в другой теме описывал.

Это даст нам headerbar нужных размеров при любом размере окна. Что характерно, он всегда будет в собачках.
Теперь внутренностью headerbar-а займемся:

7. Блоки, где выводятся {SITENAME} и {SITE_DESCRIPTION} выкидываем нафиг, они все равно неиспользуются.
8. <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p> оставляем обязательно. Это скрытый блок, он не показывается (display: none), но используется при навигации.
9. Дальше варианты. Если у нас больше не будет на рисунке ничего, то я бы сделал так. Блоку id="site-description" дал бы фоном тот самый домик с логотипом. Обязательно с параметром, no-repeat. Тут надо поиграться с размерами, чтоб по высоте и по отступам домик хорошо вписался, он же у нас ляжет сверху собак. Возможно к нему надо будет приисовать справа белую полоску, чтоб был эффект, будто собаки начинаются не под домом, а после него.
10. id="logo" расширил бы на всю ширину хедера, но без бекграунда. Т е блок будет невидимый визуально, но ссылка будет работать на всей ширине блока.

УФ! Вопросы есть?

[Палыч]

С таксой, как я понимаю все ок, она соединится

Неа... Видно, что нет даже на глаз.
Я бы справа отрезал пикселей 10 и их пустил бы фоном под картинку.
Такса, она и есть такса. Даже если метровая

[Carica]

Rayden, спасибо большое!
Такса не соединяется, но я ее перерисую, и облака тоже.
Домик решила вообще не делать, я изначально хотела без него

Спасибо! Спасибо! Спасибо!

[Garret_Dark]

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

Мои действия:
в overall_header вставить <div id="victory"> перед <div id="wrapheader">
в overall_footer в самом конце перед </body> поставить </div>
в stylesheet.css перед #wrapheader вставить

Код: Выделить всё

#victory {
background-image:url(/images/victory.png);
background-position:0% 0%;
background-repeat:no-repeat;
}

Результат на скрине
Что еще нужно сделать чтобы картинка "victory.png" показывалась целиком как это здесь на гуру?

Очень нужна помощь т.к. нужно вывесить георгиевскую ленту уже сегодня.
Заранее спасибо!

P.S. Тему я перечитал два раза, голова уже распухает

[Rayden]

Делаешь все правильно, но...
Давай рассмотрим, что у тебя происходит с картинками и в каком порядке выводятся фоны:

Body --- фон: #FFFFFF(белый), картинка: нет
Main-block --- фон: #FFFFFF(белый), картинка: нет
victory --- фон: нет(а значит будет виден тот, который под ним - белый), картинка: victory.png (в этот момент она видна вся и находится на месте)
wrapheader --- фон: нет, картинка: нет (будет видно все, что уже вывелось под ним)
logodesc --- фон: #FFFFFF(белый, оба на! Закрашиваем белым часть ленточки. Она уже не видна), картинка: cellpic4.gif (а сверху еще грдиентом закатываем)

Понял в чем проблема? Все фоны, которые выводятся поверх георгиевской ленты, должны быть ПРОЗРАЧНЫЕ.

Но давай посмотрим, что идет дальше:
внутри logodesc таблица. Фотов там нет, значит виден градиент.
Внутри таблицы выводится site_logota.gif с силуэтами и надписью, но он прямоугольный и с прозрачными областями, а значит когда ложится на градиент - просвечивает.
logodesc закрывается.
menubar со встроенной таблицей, фонов нет, георгиевская ленточка видна.
datebar - аналогично
wrapheader закрывается.
wrapcenter открывается --- фон: нет, картинка: нет (будет видно все, что уже вывелось под ним)
searchbar --- фон: нет, картинка: нет (будет видно все, что уже вывелось под ним)
table class="tablebg" (тут путь выводится ) фон: #A9B8C2 - узкая полоска голубого цвета с навигацией обрезает нижний кусочек георгиевской ленты.

Добавлено спустя 10 минут 11 секунд:

Что еще нужно сделать чтобы картинка "victory.png" показывалась целиком как это здесь на гуру?

Скорее, что нужно НЕ делать. А нужно НЕ выводить никаких фонов в тех блоках, что выводятся поверх георгиевскй ленты.
В твоем случае достаточно закомментировать строку background:#FFFFFF url(./images/cellpic4.gif) в описании блока #logodesc

Градиент исчезнет, зато будет видна георгиевская лента.

Ты конечно спросишь, а что нужно сделать, чтоб был и градиент и ленточка? Ответ очевиден. Нужно сначала выводить градиент, ДО ленточки, чтоб ленточка поверх градиента рисовалась.
В твоем случае градиент можно вывести в Body

А теперь вопрос тебе от меня, нахрена тебе вообще блок victory? Попробуй так - градиент в body, цвет фона белый. Георгиевскую ленту в Main-block, только убери оттуда белый цвет, а то он замажет градиент.

[Garret_Dark]

Rayden
Спасибо за подсказку!
То что Вы написали вначале я понимал и сам, такчто извините, что Вам пришлось описать так подробно, хотя может еще комуто пригодиться.
В итоге воспользовался Вашим вариантом "градиент в body, Георгиевскую ленту в Main-block", поиграться мне конечно пришлось, но это уже детали.
Вот как воткнул:

Код: Выделить всё

#main-block {
	width: 100%;
/*	background-color: white; */
	background-image:url(/images/160.jpg);
	background-position:0% 0%;
	background-repeat:no-repeat;
}

и

Код: Выделить всё

body	{
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	/*color: #000000;
	background-color: #FFFFFF;*/
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
/*	margin: 0;*/
/*	margin-bottom: 5px;*/
/*	padding: 5px 25px;*/
	background: #FFFFFF;
	background-image: url('./images/cellpic4.gif');
	background-repeat: repeat-x;
}

Но самое веселое было когда уже все было сделано, проведены бои с фотошопом за размер png файла (gif нельзя было т.к. георгиевская лента должна быть полупрозрачной) в итоге пришлось жертвовать полупрозрачностью т.к. png весил больше 130кб, а gif получился 20кб.
И вот вышел покурить перед сном и тут осенило... Высота cellpic4.gif известна, вставляемая картинка начинается прямо с угла, беру jpg вставляю и растягиваю на нем вверху cellpic4.gif, сверху накладываю ленточку, делаю полупрозрачной, все остальное делаю белым, вставляю и вуаля 35кб а результат тотже и как ни крути, а градиент с jpg'a всегда будет совпадать с градиентом с cellpic4.gif
Что получилось можно посмотреть тут http://www.mt-80club.ru


Я не знаю как по скрину можно было узнать название файла моего логотипа Rayden как мой форум нашли? В профиле ведь не указан

[Rayden]

результат тотже и как ни крути, а градиент с jpg'a всегда будет совпадать с градиентом с cellpic4.gif

Воистину так. Правильное решение.
К тому же полупрозрачный png дает эффект полной ж**ы в ИЕ6.

извините, что Вам пришлось описать так подробно, хотя может еще комуто пригодиться

Когда человек сам пытается разобраться, сам что-то делает, а не требует "выложите готовое решение", помочь всегда рад

Ну а то, что ты сначала потыркался с накладыванием полупрозрачных файлов, это даже хорошо. Ты понял механизм наложения нескольких картинок. Это опыт. Без него и не было бы озарения.

Добавлено спустя 2 минуты 22 секунды:
А подсунуть рядом с немецкими силуэтами орден отечественной войны - это тонкий юмор

[Garret_Dark]

А подсунуть рядом с немецкими силуэтами орден отечественной войны - это тонкий юмор

Мда... не подумал Ну да ладно, когда война уже закончилась их всеравно еще и в помине небыло

[Rayden]

Как говорит одна моя знакомая писательница - после того, что они делали на территории СССР, пусть спасибо скажут, что вообще есть кому по немецки разговаривать

[Garret_Dark]

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

По теме.
Толькочто заметил, что после изменений, логотип форума ушел влево и не собирается возвращаться, впринципе не кртитично, но можно его както "малой кровью" вернуть на место? Или проще не парить себе (и другим) мозги?

[Rayden]

в теге img, который выводит логотип, пропиши новый class
А потом этому классу пропиши маргины.

Или как вариант, прямо в коде: <img style="margin: 20px;" ...

Или маргин можно задать для ссылки, внутри которой лежит лого...

[Kostelano]

Ребята, может ли кто-нить "популярно" написать небольшую статейку о том, как реализовать фон (шапку), как на данной конференции?

header.PNG

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