Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жестко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.
В данной теме, рассмотрим варианты подстройки элементов дизайна шапки, а именно - картинок, под резиновые макеты сайтов.
Делается это, обычно, тремя основными способами: * Вёрсткой шапки, с использованием не фиксированных областей с фоном. * Изменение параметров позиционированного изображения - разными способами. * Изменение всего вида элементов методом динамического добавления/изменения стилей.
Вёрсткой шапки, с использованием не фиксированных областей с фоном.
Наиболее распространённой и кроссбраузерной, является конструкция вида:
<style type="text/css"> /* StartStyle */ #headerTb{border-collapse:collapse;border-spacing:0;background:#1552ca url(_st/v00_h_bg.jpg) repeat-x left top;height:121px;} td.hdLeft{background:url(_st/v00_h1.jpg) no-repeat left top;width:auto;vertical-align:top;} td.hdRight{background:url(_st/v00_h2.jpg) no-repeat right top;width:445px;} /* EndStyle */ </style>
... В подобном исполнении, всё просто - рисуется шапка, в каком-нибудь графическом редакторе, например в фотошопе или кореле, нарезается на отдельные графические элементы (фрагменты):
картинка - слева:
картинка - справа:
и фон - по центру. ... Для таблицы, в данном случае, прописывается фон, а ширина указывается в процентах - обычно 100%. Ширина ячеек таблицы, в которых будут размещаться графические элементы, обычно прописывается в пикселах, но, как минимум, одна из ячеек таблицы должна иметь свободную ширину (auto). То есть если ячеек две, как в данном случае, одной прописывается фиксированный размер, равный ширине картинки, второй устанавливается значение «auto» - то есть на всю оставшуюся ширину.
Сами картинки могут вставятся в предназначенные для них ячейки, как просто картинкой (тегом <img />), так и фоном. В данном случае, картинки вставлены фоном, так как левая ячейка уже содержит текстовый блок - копирайт, а правая предполагает его наличие.
Но, не каждую шапку можно нарезать подобным образом, и вот здесь начинают возникать некоторые сложности. Варианты их решения рассмотрим далее ... Изменение параметров позиционированного изображения
Масштабированием относительно родительского элемента.
В данном случае - таблица.
Сразу хочу отметить, что у браузера Internet Explorer небольшие проблемы с изменением размеров объекта - в данном случае - картинки. Суть его в следующем: Если у картинке реальная ширина равна, допустим 1024px, и необходимо чтобы при изменении ширины окна браузера это изображение растягивались/сужались пропорционально, то при сужении окна браузера ширина изображения в определенный момент “застревает” и не сужаются дальше. В результате чего оно выходит за пределы предполагаемого контента. То бишь, изображения не сужаются меньше их фактического размера.
Обходится этот «баг» достаточно просто и заключается всего в одной строчке CSS-кода - в свойстве «table-layout: fixed», которое нужно применить к таблице, в которую заключено изображение.
Следовательно, если у вас картинка шапки заведомо больше, минимальной ширины сайта, нужно задать таблице этот параметр. Задаётся он через стили (CSS) и имеет всего два аргумента: «auto» и «fixed».
Кроме того: Если у изображения не указана высота, или указано значение «auto» - изображение масштабируется пропорционально (сохраняя соотношение сторон). Если же высота указана конкретно (в любых положительных единицах измерения), то соотношение сторон нарушается и изображение масштабируется только в ширину, сохраняя заданную в высоту.
И ещё: Не все браузеры умеют правильно масштабировать изображения. Opera, Safari и Google Chrome отобразят их почти без искажений. А в Internet Explorer и Firefox(опаньки!) картинка исказится.
В MSIE искажения будет наиболее заметными. Дело в том, что для ресемплинга (изменения размеров изображения) браузеры используют свой собственный, метод.
Например, если фактическая ширина изображения 200x200, но вы указываете, что его размеры должна быть 400x400 (увеличиваете), то изображение будет растянуто, используя «nearest-neighbor» алгоритм масштабирования - по соседним пикселям - то бишь замыливание, если не указано иное.
Если же наоборот, вы уменьшаете изображение, то будет использоваться «bicubic» - бикубический режим сглаживания.
В Internet Explorer«nearest-neighbor» является значением по-умолчанию, но есть возможность принудительно задать необходимый режим, в зависимости от начальных размеров и качества вашей картинки.
Делается это через CSS, свойством «-ms-interpolation-mode».
Оно может принимать два значения:
Quote (Info)
-ms-interpolation-mode:nearest-neighbor; - Всегда используется интерполяция по соседним пикселам. -ms-interpolation-mode:bicubic; - Всегда используется высококачественный бикубический режиме интерполяции.
Internet Explorer v6 - не поддерживает данную функцию.
В примерах, так как картинка изначально больше минимальной ширины контент блока, задан бикубический режим сглаживания:
... Изменение параметров позиционированного изображения
Масштабирование относительно родительского элемента.
В данном варианте - блоком-обёрткой, позиционированному относительно его исходного положения (position:relative).
Суть его в том - создается дополнительный блок-обертка, для которого устанавливается position:relative и в него помещается картинка (<img />), используемая в качестве фона.
Для того, чтобы картинка не висела на первом плане, загораживая собой возможный внутренний контент шапки - текст, другие картинки, прочее - блоку-обёртке назначают z-index:1, а картинке, что будет выступать в роли фона, тоже задают позиционирование (так как только позиционированным элементам можно задать атрибут - z-index - кроме position:static;) и атрибут z-index:-1, смещая тем самым её (по z-оси) на задний план.
Чтобы управлять положением блока с контентом внутри блока с картинкой, применяется абсолютное позиционирование и/или поля/отступы. Блоки вне обёртки, позиционируются как и обычно.
Кроме того: Так же как и в примере выше, если у изображения не указана высота, или указано значение «100%» - изображение масштабируется пропорционально. Если же высота указана конкретно, в любых положительных единицах измерения, то не пропорционально, а только в ширину, сохраняя заданную в высоту.
http://g-cool.ru/publ/proverochnaja_statja/1-1-0-40 вот
А вот в кратком описании таже картинка автоматически уменьшалась
http://g-cool.ru/publ/ вот
Добавлено (23 Мар 2013, 21:35:30) ---------------------------------------------
Цитата (bandjuk)
.eText img {max-width: 180px;}
Извините, но куда именно это вставлять... я не знаю где в css находится блок статей, поможете?
Добавлено (23 Мар 2013, 21:45:08) --------------------------------------------- bandjuk, Огромное спасибо! Я разобрался))) Если у вас есть киви кошелек, то можете его сообщить и я готов отблагодарить вас за помощь)))) Еще раз, Большое спасибо)
Уважаемые Господа! Помогите, кто сможет. Делал сайт используя практически все исходные настройки "по умолчанию" - ну не силен я в HTML, к сожалению... Оно все бы ничего, но в школах все чаще стали попадаться "широкие" мониторы, на которых информацию на нашем сайте стало читать чуть ли не вертя головой. Растягивается текст сообщений во весь экран - очень неудобно, да и первоначально задуманный дизайн теряется. Я так понял, что происходит это из-за того, что ширина крайних контейнеров прописана в пикселях, а средней колонки - в процентах. Однако, попытки менять проценты в "управлении дизайном модуля" ни к чему не приводят, а прописка ширины средней колонки (в рх) уменьшает ширину текста материала, но ширина колонки остается прежней. Очевидно необходимо более глубокое "копание", но боюсь испортить сайт. Помогите, pleasе... Сайт: http://nosivka-syut.at.ua/
Добавлено (23 Май 2013, 22:58:13) --------------------------------------------- Ну раз никто не откликается, доложу результат своих скромных изысканий в теме изложенной мной выше.
Шапку и низ сайта сделал шириной 1024рх. Это просто. А вот ширина средней колонки видно задается глобально для всех страниц сайта. Ширина текста внутри средней колонки тоже поддается "пиксельной" регулировке, а ширина самой колонки - нет. В CSS не разбираюсь, но если бы кто подсказал где и как, то, может быть, и разобрался бы. Тапочками прошу не бросать. Свое образование я получал тогда, когда еще и микросхем не было, не говоря о ПК. Результат описанных экспериментов http://saytick.ucoz.ru/ (баг видно при разрешении более 1024рх). Спасибо.
Сообщение отредактировал VasilVas - Четверг, 23 Май 2013, 22:59:38
[b]Middl, спасибо за отклик.[/b] Вот фрагмент с таблицы стилей CSS, который, как мне кажется, может иметь отношение к моей проблеме. Не найду где задана ширина средней колонки сайта?
VasilVas, пробовали задать свойства для eMessage в Таблице стилей CSS?
Господа! Проблема с установкой ширины средней колонки в пикселях. Подробно изложено в посте 138. Спасибо Middl - он подсказал где копать. Пока самостоятельно не получается разобраться.
Сообщение отредактировал VasilVas - Воскресенье, 02 Июн 2013, 10:37:01
Miss_Esq, спасибо огромное. Значит, все таки, копать нужно было в "Редакторе страниц"! К сожалению, получилось не все. А именно, получилась "Главная страница" и "Обратная связь". Остальные "Каталог файлов", "Каталог статей", "Блог", "Форум", "Фотоальбомы" и "Гостевая книга" - проблема осталась... Не могли бы еще немножко подсобить? Вот мой редактор страниц до моего вмешательства:
Да, на тренировочном сайтике я уже все сделал. Получается, что еще нужно и шапку и низ сайта центрировать (иначе, при уменьшении все будет "съезжать" влево) и фиксировать ширину, чтоб шапка и низ не растягивались во весь экран. Осталось теперь одно неудобство: не найду, где прописывается ширина окошка для админа и зарегистрированных пользователей, та, что имеет вид: Общие Управление Добавление Пользователи Конструктор и т.д. Пока, при уменьшении сайта, эта "линейка инструментов" растягивается во всю ширину экрана монитора. Хотя это уже и не существенно в принципе. Спасибо за помощь.
Сообщение отредактировал VasilVas - Среда, 05 Июн 2013, 01:45:43
Darkmonk, у кнопок фиксированная ширина. Это даже лучше, что меню становится в два ряда, а не горизонтальный скролл появляется. Вы бы ещё в микроскоп смотрели, понимать же надо, что графика имеет ограничения, не всё можно уменьшать до бесконечности.
Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Всем доброго времени суток! У меня возникла трудность при создании сайта - http://shubki.ucoz.com/ На сайте в шапке есть кнопки вход, регистрация прописывал я их кодом - <layer name="lenta" top="0" right="0"> <div style="position:absolute; top:70; right:200;"> <a href="" title="Текст при наведении курсора на изображения" target="_blank_"><img border="0" src="url адрес изображения" align="right"></a> </div> </layer> Так вот вопрос - У меня на компе и на ноуте все нормально отображается, а если кто-то зайдет с компа на котором установлено разрешение например 1024x768, то кнопки сдвинутся, как сделать чтобы они не двигались из-за разрешения?
Присвоим картинке значение img1 <div id="img1" style="padding-left:1px;float:left;"><img src="ссылка на картинку№1"></div> Присвоим картинке значение img2 <div id="img2" style="padding-right:1px;float:right;"><img src="ссылка на картинку№2"></div>
Чат сообщества
