Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).
Недостатком фиксированных колонок при их использовании в “резиновом” блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ширина меньше ширины столбца:
“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:
Решение
Суть решения заключается в том, чтобы взять преимущества обоих ситуаций и объединить их в одно. Что мы должны получить в итоге:
Блок должен вмещать столько фиксированных колонок, сколько позволяет размер экрана.
Если в блоке образовалось лишнее свободное пространство, равномерно распределить его на каждую из колонок, чтобы заполнилось все свободное пространство в блоке.
При растяжении колонок ориентироваться на их базовую ширину и растягивать их до той поры, пока потенциальное свободное пространство не вместит очередную колонку.
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li { float:left; width:200px;/* ширина колонки по умолчанию */ padding:0; margin:5px0; display:inline; } .block{ height:355px; font-size:1em; margin-right:10px;/* отступ между колонками */ padding:20px; background:#e3e1d5; } .block h2 { font-size:1.8em; } .block img { /* параметры для изображений с меняющимися размерами и бордюром */ width:89%;/* убираем 1% от ширины, чтобы предотвратить баг в IE6 */ padding:5%; background:#fff; margin:0auto; display:block;
-ms-interpolation-mode: bicubic;/* предотвращение пикселизации изображений в IE 6/7 */ }
jQuery
function smartColumns(){//функция, подсчитывающая ширину колонок
//сброс ширины строки до 100% после изменения размера экрана
$("ul.column").css({'width':"100%"});
var colWrap = $("ul.column").width();//определяем ширину строки var colNum = Math.floor(colWrap /200);//определяем, сколько столбцов в 200px вместится в строку и округляем число до целого var colFixed = Math.floor(colWrap / colNum);//ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки
$("ul.column").css({'width': colWrap});//ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях
экрана
$("ul.column li").css({'width': colFixed});//ставим точную ширину измененным столбцам
}
smartColumns();//запускаем функцию после загрузки страницы
$(window).resize(function(){//запускаем функцию после каждого изменения размера экрана
smartColumns(); });
Красивые надписи в Adobe Photoshop CS4. Обучающий видеокурс
Текстовые эффекты в Фотошопе? Нет ничего проще! Смотри и учись! Этот видеокурс поможет вам научиться создавать красивые надписи в Adobe Photoshop CS4. Надписи на изображениях, эффекты хрома, дыма, трехмерные надписи, текст из бриллиантов и неона а также многие другие эффекты и интересные решения для оформления ваших сайтов, фотографий, рисунков и коллажей.
Развитие современных компьютерных технологий в настоящее время во многом определяется широким распространением глобальной сети Интернет по всему миру. Спрос на интернет-решения во всех областях неуклонно растет. Теперь в руках Web-разработчиков есть универсальный пакет Dreamweaver CS4, который дает простор не только для обычных Web-дизайнеров, но и для программистов, создающих современные Web-приложения. Все, начиная с проектирования, до этапа внедрения и отладки в Dreamweaver CS4 реализовано
на самом высоком уровне, что не мешает этой программе быть достаточно простой в освоении. Именно это и позволило ей стать лидером на рынке пакетов для Web-дизайна.
Секреты дизайна в Adobe Photoshop CS4. Обучающий видеокурс
Adobe Photoshop CS4 в умелых руках дизайнера способен творить просто чудеса! Спецэффекты, которые можно делать при помощи этой программы кажутся фантастическими. Так ли они сложны на самом деле? Ответ на это поможет дать наш курс. Здесь рассмотрены десятки спецэффектов, таких как молния, различные отражения, эффекты воды и огня, тени, звездного неба, фейерверка, пластилина, водоворота и множество других.
Обучающий видеокурс по самому популярному графическому редактору в мире на русском языке. 1,5 часа видео HD-качества. Рассмотрены все новые возможности версии CS4. Впервые! Работа с 3D-графикой и видео. Курс озвучен профессиональным диктором. Большое количество примеров. Удобный интерфейс для работы.
Flash это не просто программа редактирования и анимации векторной графики, это целая технология, которая обладает практически неограниченными возможностями. Flash CS4 дает возможность дизайнерам и разработчикам создавать проекты любой сложности начиная от простых сайтов, заканчивая сложнейшими web-ориентированными приложениями. В версии CS4, помимо стандартных возможностей добавились уникальные новые трехмерное редактирование объектов, инструменты создания более реалистичной анимации. Ну а язык
Action Script версии 3.0 как всегда является самым лучшим средством программирования поведений на сцене.
Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail:
admin@wm-zone.info
