Шапка

Все что связано с HTML и CSS.
Правила форума
1. Темы с названиями Помогите, Как сделать, Хелп, Не могу найти и так далее будут перенесении в мусорку без предупреждения!
2. Любой транс-лит будет удален, так что подумайте стоит ли писать транс-литом.
3. Темы не по тематике этого раздела будут также перенесены в мусорку. (Например по DLE, phpBB, php скриптам и так далее...)
4. Не забываем про Общие правила форума!
Аватара пользователя
Nigelist
Сообщения: 88
Зарегистрирован: 18 фев 2009, 06:09

Re: Шапка

Сообщение Nigelist »

X-3me, а если она будет залита ка бэкграунд? И как быть в таком случае с высотой изображения?
Бороться и искать, найти и перепрятать...
Аватара пользователя
Smoke
Сообщения: 1038
Зарегистрирован: 01 фев 2009, 15:20

Re: Шапка

Сообщение Smoke »

style="background: url(/shapka.gif); width: 100%; "
Аватара пользователя
Nigelist
Сообщения: 88
Зарегистрирован: 18 фев 2009, 06:09

Re: Шапка

Сообщение Nigelist »

smoke, Подскажите как быть с высотой? Ведь если изображение будет растягиваться/сжиматься, то соответственно должна изменятся высота изображений, как это сделать?
Бороться и искать, найти и перепрятать...
Аватара пользователя
Smoke
Сообщения: 1038
Зарегистрирован: 01 фев 2009, 15:20

Re: Шапка

Сообщение Smoke »

max-height: 100%
Аватара пользователя
Nigelist
Сообщения: 88
Зарегистрирован: 18 фев 2009, 06:09

Re: Шапка

Сообщение Nigelist »

smoke, большое спасибо! Буду пробовать...
Бороться и искать, найти и перепрятать...
Youzer
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21

Re: Шапка

Сообщение Youzer »

только качество потеряется слегка при сжатии-растяжении. можно во флеше попробовать сделать. а лучший вариант - слоями (если опыта в верстке достаточно)
Аватара пользователя
Nigelist
Сообщения: 88
Зарегистрирован: 18 фев 2009, 06:09

Re: Шапка

Сообщение Nigelist »

Youzer, слоями это как?
Бороться и искать, найти и перепрятать...
Youzer
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21

Re: Шапка

Сообщение Youzer »

слоями - это сложнее будет. если на словах, то:
1. подбирается картинка для бэкграунда шапки (лучше какой-нибудь повторяющийся узор), и используется по всей ширине страницы.
2. рисуются элементы переднего плана и через абсолютное позиционирование располагаются в нужных местах над бэкграундом.

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

чуть попозже постараюсь выложить пример такой реализации
Аватара пользователя
Nigelist
Сообщения: 88
Зарегистрирован: 18 фев 2009, 06:09

Re: Шапка

Сообщение Nigelist »

Youzer, не знал что этот способ так называется... Но именно к этому способу я все больше склоняюсь... Кстати абсолютно позиционирование что дает? Как я догадываюсь, с помощью данного параметра можно расположить слой поверх остальных... Но можеть быть это не все?
Бороться и искать, найти и перепрятать...
Youzer
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21

Re: Шапка

Сообщение Youzer »

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

таким же образом накладывают праздничную атрибутику на шапку сайта (разные елочки, гирлянды и т.п.), задавая ей необходимые параметры (например: "position:absolute;left:0;top:0;z-index:1000;" - картинка будет находиться в левом верхнем углу над другими элементами дизайна).

Но можеть быть это не все. ;) с другими применениями данного метода не сталкивался. пока.
Ответить