Тэг ‘css’

HTML-верстка и IPhone

Чтобы убрать автоматическое масштабирование текста на сайте при просмотре в IPhone (заголовок H1 может быть по размеру такой же или даже меньше основного текста) - следует добавить правило в файл стилей

html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

http://stackoverflow.com/questions/3466434/font-size-issue-with-iphone
http://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten
http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

Опубликовано Сентябрь 20, 2012 | автор: levik  |  Нет комментариев »

Примеры адаптивной верстки

Подборка ссылок на примеры адаптивной верстки - верстка, которая в зависимости от ширины экрана изменяет размещение объектов.. к примеру, убирает колонки, изменяет длину-ширину изображений.. и т.д.

Один из приёмов адаптивного дизайна в том, что сначала следуют стили для устройств с наименьшим разешением, затем по возрастающей. Для удобства можно стили вынести в разные файлы 320.css, 480.css, 920.css, или объединить в один (например, стандартный style.css) Читать целиком »

Опубликовано Апрель 16, 2012 | автор: levik  |  Нет комментариев »

HTML-каркас приложения

Как быстро и просто создать HTML (+CSS) каркас для приложения? Есть уже готовые инструменты, которые могут помочь в этом. Для начала можно посмотреть статью про CSS фреймворки.
Однако, со временем инструменты совершенствуются и развиваются.

Bootstrap от Twitter - популярный “бутстрап” - набор файлов для быстрого старта. Уже имеется набор разметок страницы, блоки, кнопки, таблицы, списки, шаблоны для информационных сообщений и многое другое. Демку можно посмотреть на сайте.

HTML KickStart - это ультра-легкий набор файлов HTML5, CSS и jQuery, макетов и элементов дизайна, позволяющий “быстрый старт” и сэкономить 10 часов в новом проекте. Демо - на сайте.

Foundation
An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.
foundation.zurb.com/

Fbootstrapp is a -аналогичный инструмент для быстрого старта приложения под фейсбук. Включает базовые CSS и HTML для шрифтов, форм, кнопок, таблиц, навигационные элементы и многое другое. Оформление в стилей фейсбук.

Initializr - генератор шаблонов HTML5  от Jonathan Verrecchia. аналогично - быстрый старт с HTML5 Initializr will generate for you a clean customizable template with just what you need to start!
www.initializr.com/

YAML CSS
A modular CSS framework for truly flexible, accessible and responsive websites
yaml.de

.Simpliste - отечественная разработка :) набирает популярность.
cssr.ru/simpliste/ru.html

Таким образом, для быстрого старта веб-приложения не обязательно разрабатывать полноценный дизайн - можно воспользоваться готовыми наборами для быстрой разработки макета. Bootstrap всё больше набирает популярность - именно это и является одним из недостатков - многие сайты становятся похожими друг на друга, как 2 капли воды.

Опять возвращаемся к шаблонам? :)

Опубликовано Декабрь 25, 2011 | автор: levik  |  Комментарий (1) »

Кроссбраузерные полосы прокрутки

Отображение стандартной полосы прокрутки (так называемый скроллбар) в браузере зависит от операционной системы. Конечно, можно использовать свойства вида scrollbar-… (scrollbar-base-color:#COLOR;scrollbar-highlight-color:#COLOR; и тд), однако они не являются валидными по CSS-спецификации, и поддерживаются не всеми браузерами (Mozilla Firefox не раскрашивает полосы прокрутки, выделенные такими свойствами).

Вообще, общую полосу прокрутки “раскрашивать” не рекомендуется. Однако, иногда, может возникнуть ситуация, когда нужно “вписать” полосу прокрутки в дизайн.

Хотелось бы найти полосу прокрутки, которая удовлетворять следующим условиям:
возможность изменять оформление;
кроссбраузерность (стилизация с использованием CSS-свойств;
возможность прокручивать содержимое блока колесиком мыши.

jScrollPane
http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

FleXcroll
http://www.hesido.com/web.php?page=customscrollbar

Опубликовано Апрель 20, 2011 | автор: levik  |  Комментарий (1) »

Верстаем правильно

Подборка ссылок на статьи по вёрстке -как верстать правильно? На что следует обратить внимание? Какие инструменты для вёрстки использовать. Бывалые верстальщики делятся своим опытом

Довольно объемная статья по проверке вёрстки
http://habrahabr.ru/blogs/webdev/114256/

Надеюсь, с помощью читателей, статья будет пополняться ссылками на интересные материалы по верстке

Опубликовано Февраль 23, 2011 | автор: levik  |  Нет комментариев »

IE 8 bug display:table-cell и изображение с max-width внутри

Столкнулся с непонятным багом IE 8 при помещении внутрь элемента с display:table-cell изображения с ограниченной шириной max-width, которое по ширине больше ширины элемента. Блочный элемент растягивается, как будто изображение нормальной ширины.

upd

Задумка была следующая - в блоке заранее заданных размеров размещать изображение с вертикальным и горизонтальным центрированием.

  1. Для выравнивания по горизонтали используем css-свойство text-align:center;
  2. Для выравнивания по вертикали используется  vertical-align:middle;display:table-cell;
  3. Для уменьшения больших изображений (вписываем в блок) max-width и max-height
  4. Пункты 3 и 4 дублируем в отдельный css с использованием expression для ie 6 и подключаем условным комментарием (if lte IE 6)

Изображение с max-width внутри элемента display:table-cell

Такой “трюк” работает во многих (распространенных) браузерах - Firefox, Opera, Safari

Все бы ничего, но IE8 в случае, если изображение больше заданной ширины “растягивает” блочный элемент, как будто ширина изображения не изменяется, но при этом само изображение показывается уменьшенным (с учетом max-width).

В поисках решения, как оказалось, я не первый (мягко говоря - запоздал на пару лет), кто столкнулся с аномальным поведением блоков table-cell, в которых находятся изображения

The cause of this is a bug in IE8’s awesome new standards-supporting rendering engine (sarcasm intended) which, until fixed (if ever), will cause table-cell elements to scale out of proportion like that

Если я правильно понимаю, в IE 8 “новый движок”, который изобилует некоторыми “характерными особенностями” (когда-то искренне наделся, что с выходом IE7 глючность /float 3px, pngfix … / “ослика” будет в прошлом), ан нет:

The following regressions are present in IE 8:

* Min-width on new block formatting context beside a float is sometimes treated as width.
* Percentage width floats cause justified text to move.
* Max-width fails on floats with auto overflow.
* Scrollbar height is added onto max-height instead of subtracted from it.
* Max-height acts as height on elements with scrollbars.
* Combining max-height, float and overflow:scroll will cause the entire page to disappear.

http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug

Там же были найдены варианты “обхода” этого бага:

  1.  добавить внешний элемент-обертку (таблица) с фиксированной шириной (display:table;table-layout:fixed;width:XXXpx) равной ширине ячейки (блока display:table-cell)
  2. добавить внутренний элемент-обертку изображения с фиксированной шириной, равной максимальной ширине изображения

Обходим расползание элемента display:table-cell

upd для IE6 ограничение max-width + max-height обходим с expression:

	width: expression(this.width>89&&(89/this.width)< (103/this.height)? 89: true);
	height: expression(this.height>103&&(89/this.width)>=(103/this.height)? 103: true);

А вертикальное выравнивание - с помощью inline-позиционирования

Опубликовано Январь 24, 2011 | автор: levik  |  Нет комментариев »

CSS-framework - верстка на основе фреймворка

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

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

Читать целиком »

Опубликовано Август 17, 2010 | автор: levik  |  Нет комментариев »

CSS - прижать футер к низу

Согласитесь, довольно часто, если сайт занимает не всю  высоту окна, то “висящий” подвал-футер смотрится не очень. Гораздо лучше смотрится “прибитый” к нижней части окна подвал, который в случае увеличения количества текста просто съезжает ниже.

Как прижать футер к низу?

Основным способом прижатия футера к нижней части страницы является задание высоты одного из HTML- элементов равной 100%. Дальше - идут вариации.

1. Можно задать высоту html,body равной 100%, футер делаем абсолютно позиционируемым и отступ от низа делаем нулевым (position:absolute;bottom:0; height:30px;). Чтобы футер не перекрывался или не наезжал на основной контент - делаем внутренний отступ у блока контента равный высоте подвала (padding:30px;)

2. Основной блок (content) растягивается на всю высоту, а footer за счет отрицательного верхнего отступа (margin-top:0) “всплывает” над content-ом.

3. вариант с отрицательными margin и футером с clear:both (http://dimox.name/press_footer_bottom_with_css/#comment-209)

В любом случае окончательную верстку желательно проверить на кроссбраузерность - почти наверняка без “хаков” или дополнительных css-правил не обойдется. В частности, будьте осторожны с IE

http://www.w3school.ru/blog/css/sticky-footer.html
http://xhtml.ru/2005/10/18/footer-stick/ (второй вариант)
http://dimox.name/press_footer_bottom_with_css/
http://webmolot.com/prizhimaem-futer-k-nizu/

UPD Будьте внимательны - разные версии одного и того же браузера opera по-разному отображают приклеенный к низу футер (в частности, проблемы, если не ошибаюсь с Opera 9.63)

Опубликовано Август 9, 2010 | автор: levik  |  Нет комментариев »

font size= и font-size: (html vs css)

При переносе верстки с использованием тегов <font size=”2″></font> в свойство CSS font-size, выяснилось, что различные браузеры,  воспринимают CSS-свойства xx-small, x-small, small, large…

Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным.  По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7

Действительно, в различных браузерах результаты применения одинакового стиля сильно отличаются: проверить себя можно тут http://rotorweb.ru/typography/css-font-size-conversion-chart.html

Условное обозначение Размер шрифта
в Firefox 3.6, Chrome, Safari 4, px
Размер шрифта
в Opera 10, IE6,7,8, px
xx-small 9 10
small 12 16
large 18 24
xx-large 32 48

Опубликовано Июнь 21, 2010 | автор: levik  |  Комментарий (1) »

Шаблоны для сайтов, HTML и CSS шаблоны бесплатно

Часто для создания сайта (особенно некоммерческого) возникает вопрос - где взять дизайн? В общем, если вариант с заказом качественного дизайна по ряду причин не рассматривается, предпочтение отдается шаблонам сайтов.

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

Валидные (X)HTML+CSS бесплатные шаблоны, без труда можно найти во Интернет. А подогнать шаблон под свои нужды при желании и небольшом знании HTML-CSS и, при необходимости, PHP — дело нехитрое. =)

Итак, где можно бесплатно скачать HTML-шаблоны для сайтов: Читать целиком »

Опубликовано Май 18, 2010 | автор: levik  |  Комментарий (1) »