HTMLCSS.ru :.: Статьи пользователя Olga

Верстка под iphone и ipad, ограничения для background и img

Fri, 13 Jan 2012 14:55:21 +0300

Обрезка фона в iphone, ipad

В последнем проекте столкнулись с некоторыми ограничениями при верстке сайта под iphone и ipad. Тема была изучена, решения все-таки нашлись о чем и хочу поделиться. В нашем случае возникли сложности с фоновой картинкой(фотографией), при просмотре сайта на iphone или ipad часть изображения просто обрезалось. Копнув глубже выяснилось, что iOS для мобильных устройств имеет набор ограничений. Ограничение на физический размер изображения:

для устройств с ОЗУ менее чем 256 Мб – 3 Мегапикселя (т.е. физический размер изображения должен быть ≤ 3*1024*1024 или 3 145 728 пикселей)
для устройств с оперативной памятью более или равным 256 Мб – 5 Мегапикселей (картинка ≤ 5*1024*1024)
для iOS 2.2.1 и более ранее версий, размер картинки не должен превышать 2 Мегапикселя (картинка ≤ 2*1024*1024).

Варианты решения проблемы с большим background: 1. Сделать, специально для iphone и ipad, уменьшенное фоновое изображение и подгружать его через @media. Для всего остального показываем наш большой фон любых размеров. Пример:

@media screen and (max-device-width: 1024px) {

.global { background: url(images/bg_small.jpg) 0 0  no-repeat !important; } 

}

Т.е. фоновое изображение bg_small.jpg отобразится для блока с классом global для всех устройств с максимальным разрешением 1024. 2. Разрезать фоновую картинку на части, и прописать блоку сразу несколько фонов(CSS3) Пример:

.global {

background:url(images/bg_part2.jpg) 50% 500px no-repeat, 

url(images/bg_part1.jpg) 50% 0px no-repeat ;

}

Про это и другие ограничения iOS можно почитать на сайте производителя: Know iOS Resource Limits

Категории: ipad , iphone , background

Обучение. Однотипные блоки

Sat, 12 Nov 2011 13:12:30 +0300

Иногда встречаю в верстке два и более абсолютно одинаковых блока, но имеющие разные классы. Например: [Image-1] Визуально видно, что блоки совершенно одинаковые, но при верстке возникает вопрос, как быть с последним блоком, ведь каждый блок несет значение ширины блока и правого отступа, а у последнего блока нет отступа, и тут чтобы не отступать от макета, последнему блоку задают дополнительный класс, в котором прописан правый отступ равен нулю. Но правильнее прописать родительскому блоку таких элементов отрицательный правый маргин, равный значению правого отступа однотипных блоков, если же значение велико, и родительский блок заступать на другие блоки, либо же выступит за область самой страницы, для этого нужно создать еще один родительский блок со значением overflow:hidden

<div class="catalog"><div class="catalog_inner">

	<div class="item">…</div>

	<div class="item">…</div>…

	<div class="clear"></div>

</div></div>

.cl {clear:both; }

.catalog {overflow:hidden;}

.catalog_inner {margin:0 -38px 0 0; }

.item {width:90px;  float:left; padding: 0 38px 0 0;}

[Image-2]

Категории: обучение

Обучение. display:inline-block

Thu, 27 Oct 2011 14:12:12 +0400

Знания накапливаются с практикой. Вначале решение какой-то задачи кажется не возможным, потом решение может даже прийти само собой, но чаще конечно решения перенимаются. Перенимайте ;)

Ниже приведена задача и ее решение, раньше казалось не осуществимым, хотя так оно и было, ведь FF2 не поддерживал свойство display:inline-block, потом еще долго я не использовала данный метод.

Задача

Надо сделать верстку блоков с фиксированной шириной, но не с фиксированной высотой, + резиновая верстка, т.е. при разных значениях разрешения экрана, количество блоков в ряду будет изменяться. [Image-1]

Решение

Html

<div class="item">

	<a href="#"><img src="img.jpg" width="87" height="85" alt="" /></a>

	текст

</div>

<div class="item">

	<a href="#"><img src="img.jpg" width="87" height="85" alt="" /></a>

	текст

</div>

А в CSS пропишем следующее

.item {display:inline-block; width:130px; padding:22px 33px 17px 0; vertical-align:top;}

Т.е. наши блоки превращаются в блок, ведущий себя как строчный элемент. Но в IE6 и IE7 результат будет иной, поэтому для этих браузеров надо прописать

.item {display:inline;}

Рабочий пример во вложении

Категории: css , html , display:inline-block

Не стандартные шрифты, используем сервис Google Fonts

Tue, 23 Aug 2011 23:24:50 +0400

Сервис Google Fonts предоставляет простую возможность использования красивых WEB шрифтов для сайтов. Сейчас сервис предоставляет 23 вида кириллических шрифта. На странице http://www.google.com/webfonts выбираем Script: Cyrillic (если надо русский шрифт). Выбираем нужный шрифт. Нажимаем кнопку «Quick-use» и сервис предлагает три вида кода на выбор, для внедрения шрифта. Вставляем один из предложенных кодов в <head>, и можно уже использовать данный шрифт на сайте, прописывая его в стилях через font или font-family.

Категории: Не стандартные шрифты , сервис Google Fonts

Вертикальное выравнивание в div или в блоке с фиксированной высотой

Tue, 21 Jun 2011 15:12:41 +0400

Существует два способа выравнивания содержимого по центру относительно высоты блока, один самый простой - с использованием таблицы. Но таблицу желательно использовать только там, где явная таблица. И этот способ не применим, если надо выровнять содержимое внутри ссылки. Поэтому нужен и второй способ. Код

<a href="#"><span>Статьи</span></a>

<a href="#"><span>Сопутствующие услуги</span></a>

В файле стилей прописываем

a {display:table;  height:48px; width:120px; text-align:center; }

a span  {display:table-cell;  height:48px; vertical-align:middle;}

Но значение display:table и display:table-cell, не понимают браузеры IE 6 и 7 версии, поэтому для этих браузеров надо прописать следующее

a {//display:block; }

a span { //display:block; //height:auto; //margin-top: expression((24-parseInt(offsetHeight)/2)  <0 ? "0" : 24-(parseInt(offsetHeight)/2) +'px') ;	}

Пример вертикального выравнивания в div элементе Код

<div class="middle"><div><img src="images/img.jpg" width="60" height="60" alt="" /></div></div>

В файле стилей прописываем

.middle {display:table;  height:80px; width:80px; text-align:center; }

.middle div  {display:table-cell;  height:80px; vertical-align:middle;}

.middle div img {vertical-align:middle;}

Для IE 6 и 7 прописываем:

.middle {//display:block; }

.middle div { //display:block; //height:auto; //margin-top: expression((40-parseInt(offsetHeight)/2)  <0 ? "0" : 40-(parseInt(offsetHeight)/2) +'px') ;	}

в выражениях

expression((24-parseInt(offsetHeight)/2)  <0 ? "0" : 24-(parseInt(offsetHeight)/2) +'px') и expression((40-parseInt(offsetHeight)/2)  <0 ? "0" : 40-(parseInt(offsetHeight)/2) +'px')

указаны значения 24 и 40 – это половина высоты родительского блока, т.е. 48/2 (a {height:48px;}) и 80/2 (.middle {height:80px; }) //- свойства прописаны после этих знаков воспринимаются только браузерами IE6, IE7 Фактически вертикальное выравнивание происходит в обоих случаях в ячейке таблицы, только в первом случае задается явно, во втором средствами css. В примерах таблицами (элементы, у которых прописано свойство display:table) являются ссылка “a” и блок “.middle”, ячейки (элементы с параметром display:table-cell) – “ a span ” и “.middle div”. Но так как эти свойства не работают в браузерах IE6, 7, для них принцип выравнивания иной. Здесь элементы “a”, “ a span ”, “.middle” и “.middle div” блочные (display:block;), высота не фиксированная (height:auto;) дочернему элементу “ a span ”, “middle div” , и с помощью выражения вычисляется верхний отступ дочернего элемента от родительского = /2 – /2

Категории: вертикальное выравнивание

Список наиболее часто используемых cкриптов и плагинов на jquery

Sun, 29 May 2011 19:21:38 +0400

Все чаще и чаще приходится использовать библиотеки готовых скриптов. Ниже представлен список наиболее часто используемых мною cкриптов и плагинов на jquery 1. Для стилизированных элементов форм a. Select b. Checkbox c. Radio d. И техtarea 3. Разнообразные инструменты jquery, легкие в использовании 4. Карусель 5. Звездный рейтинг 6. Выбор даты 7. Стилизированные полосы прокрутки 8. автозаполнение input 9. Виджет Slider (шкала с бегунком) 10. Fancybox - всплывающее изображение 11. LightBox - другой плагин для всплывающего изображения

Категории: jquery