Вступление
Те, кто когда-то только-только начинали изучать CSS, особенно имея небольшой опыт программирования десктопных приложений на Delphi или VB, наверняка хотели иметь возможность использовать конструкции вроде left:30%+10;Потом все мы научились использовать margin, вложенные и плавающие блоки. Тем, кто всё-таки не прочь побаловаться, посвящается: JSCSS
Если Вы об этом как-то не мечтали, можете не читать
Задача: сделать два резиновых столбца. Первый — 30% по ширине, второй — 70%, между ними 10 пикселов, расстояния от краёв страницы слева и справа тоже 10 пискелов. Причём первый столбец автоматически увеличивается под высоту второго.
Решение, о котором хотелосьбы помечтать:
#block
{
width:30%-10px;
left:10px;
height:content.height;
top:20px;
}
#content
{
width:70%-10px;
left:30%+10px;
height:400px;
top:20px;
}
Чтобы немного побаловаться, я и написал эту библиотеку.
Подключение
В HTML коде пишем:<link rel='jscss' id='csslink' href='style.css'>Название файла (style.css) может быть любым. Id линка менять нельзя.
И в конце документа, перед закрытием body, например, пишем:
<script language='javascript' type='text/javascript' src='jsresize.js'> </script>Всё.
Синтаксис
В файле style.css, который мы подключили, пишем описания размеров. Синтаксис прост:#id_объекта
{
height:100;
width:300;
left:30;
top:32;
}id_объекта — атрибут id существующего элемента (тег )
Можно писать числа, причём px можно опускать (а можно и не опускать), использовать проценты (внимание! процент всегда означает процент от ширины окна, даже при указании, например, высоты. т.е. height:50% установит высоту, равную половине ширины окна. Для указания высот необходимо пользоваться body.height). Можно использовать арифметические действия. Например, width:50%+2;
Также можно использовать два выражения: body.height и body.width; Т.е. для задания высоты, равной 50%, следует писать: height:body.height/2;
Можно использовать свойства других объектов, например, height: content.height-20;, где content — id другого элемента.
В конце строки надо ставить точку с запятой. Использовать свойства top и left других объектов можно, но нежелательно. Лучше задать значение такое-же, как в свойстве top или left искомого объекта.
Внимание: следите за логичностью. Например, height: 90%; top:15%; заставит объект постоянно увеличиваться, раздвигая окно браузера.
Пропускать ничего нельзя. Все 4 строки обязательны.
Примеры
Смотрите HTML код, он крайне прост, да и прикрепленный стиль несложен.Пример 1
Пример 1.5 (тоже самое, но с коротким текстом)
Пример 2
скачать библиотеку
скачать архив с библиотекой и примерами
Тестилось под IE6, IE7, Opera 9.5, Firefox 2
