Доброго времени.
Хотелось бы сделать широкую шапку, которая бы подстраивалась под разные разрешения экрана.
Под "подстраивалась" я подразумеваю отображение только той части лого, которая вписывается в данное разрешение, и отсутствие при этом горизонтальной прокрутки. Поясню на всякий случай: оригинальная ширина шапки 1980рх, на мониторе с разрешением 1680х1050 отображаться будет только 1680рх, на 1280px - 1280 соответственно и так далее.
Как это можно сделать? Предложенный здесь вариант "шапка, переходящая в фон" не подходит, так как для основного фона так же планируется использовать изображение, а не цвет.
Ссылка на тестовик.
Широкая шапка и полоса прокрутки
Страница: 1
Тема закрыта
Сообщений 1 страница 9 из 9
Поделиться123.12.12 17:10
- Участник
- Уважение: +11
Поделиться223.12.12 17:15
- Участник
- Уважение: +798
Орфея
вам нужна резиновая верстка
Поделиться323.12.12 17:16
- Участник
- Уважение: +11
Rush
Можно поподробнее?
Поделиться423.12.12 19:18
- Участник
- Уважение: +11
Да, чтобы не терять время - интересуют именно изменения в коде.
Поделиться523.12.12 21:03
- Участник
- Уважение: +347
Rush
не думаю, что тут поможет резиновая вёрстка. Про шапку же разговор.
Орфея
Не совсем понял что вы хотите.
Шапка, которая сама масштабируется по размерам экрана, становясь меньше/больше?
Шапка, которая растягивается посредством добавления доп. фона на задник?
Или как?
Если можно - пример.
Поделиться623.12.12 21:23
- Участник
- Уважение: +11
Пернатый написал(а):
не думаю, что тут поможет резиновая вёрстка. Про шапку же разговор.
По идее, на html есть один условно подходящий способ резиновой вёрстки, но там исходное изображение режется на три части и уже они настраиваются. Не совсем то.
Пернатый
Если бы был пример, особенно на движке майбба - было бы намного проще. Но, увы...
Нечто среднее. Масштабироваться под разрешение должна только ширина шапки, при неизменной высоте.
Попробую объяснить так. Исходное изображение - 1980px. В зависимости от разрешения должны обрезаться края, к примеру, 1280px.
Поделиться723.12.12 21:37
- Участник
- Уважение: +347
Орфея
Картинка режется на две части - узкая вертикальная полоска "рамки", которая расходится в разные стороны.
И сама картинка. Можно ещё вырезать картинку-подложку для табличечки, чтобы её можно было таскать в разные стороны, но это можно и не делать - не так уж важно.
Если я правильно разбираюсь, то получается два куска.
ХТМЛ-вверх
<div id="shapka_background">
<div id="shapka_kartinka">
</div>
</div>
ЦСС.цвета
#shapka_background {
background: url("ссылка на картинку-подложку, которая растягивается по горизонтали") repeat-x top center;
background-color: #000000;
}#shapka_kartinka {
background-color:#000000;
background:url("ссылка на основную картинку") center no-repeat;
height:высотаpx;
width:100%;
}
Тогда получается, что у нас вертикальная полоска повторяется по горизонтали, заполняя фон, а сверху накладывается изображение непосредственно с шапкой.
Хм.
У меня ссылка в профиле - там такой же принцип задействован с двумя дивами. Походу дела, оно вам нужно.
Поделиться823.12.12 21:40
- Участник
- Уважение: +11
Пернатый
Спасибо, будем пробовать.
Поделиться923.12.12 21:56
- Участник
- Уважение: +347
Орфея
В принципе, поставь вы только шапку шириной 1920 пикселей, то не должно появляться прокрутки, но тогда за пределами ширины шапки она просто оборвётся, как любая другая картинка.
Тема закрыта
Страница: 1
