Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

Min-height, min-width, max-height, max-width для IE6

Хочу показать пример, как реализовать гибкий шаблон не только на div, но и на таблицах. В последнее время очень много народ зависает на теме «эластичный шаблон на div-ах». К чему такая паника, если можно это реализовать на таблицах? Все будет красиво и понятно. Я с div, конечно, дружу. Но не очень люблю делать шаблоны просто на них. Кроссверстка таблицы/div оптимальна.

Самая большая проблема в этой верстке – гибкость. Современные браузеры отлично понимают ограничения высоты и ширины через min- и max- инструкции. Но, к сожалению, IE6 с ними не дружит.

Для этого я использую expression от «мелкомягких»:

.box {
   width : expression(parentNode.clientwidth > 880 ?"880px" : "auto");
   max-width: 880px;
   width: auto
} 

Данное правильно определяет ширину блока. Чтобы IE6 понял, как действовать с блоком, вводим expression. Логика следующая: если ширина блока больше 880 px, то ограничиваем ширину этими 880 px, иначе растягиваем по ширине внешнего блока.

Если продолжить логику expression, то мы можем легко создать правила для всех 4-х направлений эластичности.

Ограничение по минимальной ширине min-width

.box {
   width : expression(parentNode.clientwidth < 880 ? "880px" : "auto");
   min-width: 880px;
   width: auto
} 

Ограничение по максимальной высоте max-height

.box {
   height : expression(parentNode.clientHeight > 880 ? "880px" : "auto");
   max-height: 880px;
   height: auto
} 

Ограничение по минимальной высоте min-height

.box {
   height : expression(parentNode.clientHeight < 880 ? "880px" : "auto");
   min-height: 880px;
   height: auto
} 

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

Комментарии

#adan14.09.2008 01:25
А как поступить в IE7?, не работает! И ещё вопрос, как выровнять шаблон по центру? Спасибо Ответить
#PaLyCH12.10.2008 19:04
ут просто, работает во всех браузерах
для внешней оболочки содержимого страницы задаешь стиль margin: auto; и тогда шаблон будет всегда по ширине Ответить
#adan14.09.2008 20:21
Спасибо за подсказку, но в IE7 не хочет работать, шаблон не ограничивается заданными размерами, растягивается на полный экран. Ответить
#Серой-Волк15.09.2008 02:27
А с доктайпом XHTML это не пашет!
Погуглил и вот какуб колбасу надыбал:
Цитата:

width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 964 ? "964px" : "auto");
Проверено работает !!! Ответить
#Oktolom03.10.2008 21:02
Ограничение по минимальной высоте min-height
Вопрос. а зачем?
если можно просто поставить height
пидалишь прямо в сss развилку
для ие6
* html body{ height:500px;}
для ие7
*+html body{ height:500px;}
получается то же самое
намного короче и код валидный
плохо что такое для width не катит.

для expression нужно отдельный файл делать ie.css как и для фильтров
тогда код будет валидным Ответить
#PaLyCH13.10.2008 12:55
Конечно. По другому опять же ни как Ответить
#Jegulsky Alexander12.10.2008 06:52
.page_container {
width: 90%;
min-width: 900px;
max-width: 1100px;
border: 1px solid red;
text-align: left;
}
* html .page_container {
width: expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 1000 ? "900px" : ((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 1223 ? "1100px" : "90%");
} Ответить
#PaLyCH13.10.2008 13:02
А пояснить такой сложный expression можно? Ответить
#Верстальщик20.10.2008 18:53
Для min-height лучше писать так:
.page { min-height: 500px; height: auto !important; height: 500px; } Ответить
#alex8026.03.2009 14:26
Работает :) Ответить
#alex8031.03.2009 20:34
Ничего не пойму...на другом сайте не работает... что за фигня? Може что перебивает это правило? Ответить
#alex8031.03.2009 20:43
]Поторопился :) Применил с нужным селектором и Усе заработало Ответить
#ageent07.05.2009 01:11
сенкс! пригодилось. Ответить

Добавить комментарий

Наверх