четверг, 31 января 2008 г.
Криминал: Продолжение 1
Илью выписали из больницы. Со здоровьем всё в порядке. Нападавших пока не нашли... Хочеться надеется что в будущем в моем блоге появится еще одно сообщение в котором будет написано, что нападавших всё-таки нашли и эти самые нападавшие понесли заслуженное наказание.
понедельник, 28 января 2008 г.
Кроссбразерный width: 100%
Есть макет сайта. "Резиновый", на всю ширину экрана. В макете форма. В форме есть текстовое поле. Для текстового поля заданы отступы (padding) и бордюр. И разумеется нужно чтобы это текстовое поле имело ширину 100%. И ширина текстового поля также должна меняться при изменении размеров окна браузера. Очевидное решение:
<style type="text/css" media="all">
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
width: 100%;
}
</style>
<input type="text" style="text" value="100% по ширине"/>
в современных браузерах (Firefox, Opera, IE6) не работает. А не работает потому, что в дело вступает блочная модель.
Блочные модели
Блочная модель браузера определяет как будет вычисляться размеры блочного элемента - с учетом отступов и бордюров (традиционная блочная модель) или без них, то есть по размеру контента (блочная модель W3C). Чтобы было понятней взгляните на Рис. 1.
Рис. 1. Различия традиционной и W3C блоных моделей.
Все современные браузеры придерживаются модели W3C. Соответсвенно ширина элемента (от одного края бордюра до другого) для которого задано width: 100% будет равен ширине родительского контейнера плюс ширина бордюра и отступов элемента, то есть больше чем нам нужно.
Если бы мы делали сайт для ABC, то ничего страшного. Но мы-то хотим делать нормальные сайты. А значит проблему надо решать.
Эту проблему можно обойти переключившись на традиционную блочную модель.
Переключение блочных моделей
В спецификации CSS3 для переключения блочной модели описан следующий синтаксис:
box-sizing: border-box
box-sizing: content-box
Первое определение соотвествует традиционной блочной модели, второе - блочной модели W3C. Такой синтаксис поддерживается Opera.
Примечание: box-sizing не работает в комбинации с min-width, max-width, min-height, max-height.
В Firefox поддерживается несколько иной вариант определений:
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
Первые два определения аналогичны указаным в спецификации CSS3. Третье определение задает блочную модель при которой размер элемента определяется по контенту и отступам (padding).
Для того чтобы переключить блочную модель в IE6 нужно переключить браузер в quirks mode. В этом особом режиме работы браузера (в отличии от strict mode) поддерживаются некоторые ошибки более ранних версий, и в частности традиционная блочная модель. В IE6 есть правило: если doctype переключающиму браузер в strict mode предшествует xml-пролог, то страница отображается в quirks mode. Это правило позволяет создавать валидные (касаемо doctype) страницы оставаясь при этом в quirks mode. Итак "волшебный" xml-пролог, который должен быть помещен в первую строку документа перед doctype имеет вид:
<?xml version="1.0" encoding="windows-1251"?>
Примечание: Это правило не поддерживается IE7.
Окончательное решение
Объединив подходы к переключению болных моделей мы получили окончательное решение, которое работает в Firefox, Opera и IE6.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>100% по ширине</title>
<style type="text/css" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF;
padding: 20px 50px;
color: #000;
}
h1 {
font-size: 24px;
}
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.width100 {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
}
</style>
</head>
<body>
<h1>100% по ширине</h1>
<input type="text" class="text width100" value="100% по ширине"/>
</body>
</html>
Источники:
Box model tweaking
http://www.quirksmode.org/css/box.html
Quirks mode and strict mode
http://www.quirksmode.org/css/quirksmode.html
Спецификации CSS3
http://www.w3.org/TR/css3-ui/
<style type="text/css" media="all">
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
width: 100%;
}
</style>
<input type="text" style="text" value="100% по ширине"/>
в современных браузерах (Firefox, Opera, IE6) не работает. А не работает потому, что в дело вступает блочная модель.
Блочные модели
Блочная модель браузера определяет как будет вычисляться размеры блочного элемента - с учетом отступов и бордюров (традиционная блочная модель) или без них, то есть по размеру контента (блочная модель W3C). Чтобы было понятней взгляните на Рис. 1.
Рис. 1. Различия традиционной и W3C блоных моделей.
Все современные браузеры придерживаются модели W3C. Соответсвенно ширина элемента (от одного края бордюра до другого) для которого задано width: 100% будет равен ширине родительского контейнера плюс ширина бордюра и отступов элемента, то есть больше чем нам нужно.
Если бы мы делали сайт для ABC, то ничего страшного. Но мы-то хотим делать нормальные сайты. А значит проблему надо решать.
Эту проблему можно обойти переключившись на традиционную блочную модель.
Переключение блочных моделей
В спецификации CSS3 для переключения блочной модели описан следующий синтаксис:
box-sizing: border-box
box-sizing: content-box
Первое определение соотвествует традиционной блочной модели, второе - блочной модели W3C. Такой синтаксис поддерживается Opera.
Примечание: box-sizing не работает в комбинации с min-width, max-width, min-height, max-height.
В Firefox поддерживается несколько иной вариант определений:
-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
Первые два определения аналогичны указаным в спецификации CSS3. Третье определение задает блочную модель при которой размер элемента определяется по контенту и отступам (padding).
Для того чтобы переключить блочную модель в IE6 нужно переключить браузер в quirks mode. В этом особом режиме работы браузера (в отличии от strict mode) поддерживаются некоторые ошибки более ранних версий, и в частности традиционная блочная модель. В IE6 есть правило: если doctype переключающиму браузер в strict mode предшествует xml-пролог, то страница отображается в quirks mode. Это правило позволяет создавать валидные (касаемо doctype) страницы оставаясь при этом в quirks mode. Итак "волшебный" xml-пролог, который должен быть помещен в первую строку документа перед doctype имеет вид:
<?xml version="1.0" encoding="windows-1251"?>
Примечание: Это правило не поддерживается IE7.
Окончательное решение
Объединив подходы к переключению болных моделей мы получили окончательное решение, которое работает в Firefox, Opera и IE6.
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>100% по ширине</title>
<style type="text/css" media="all">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFF;
padding: 20px 50px;
color: #000;
}
h1 {
font-size: 24px;
}
.text {
border: 1px solid #999;
background-color: #F2F2F2;
padding: 9px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
.width100 {
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
}
</style>
</head>
<body>
<h1>100% по ширине</h1>
<input type="text" class="text width100" value="100% по ширине"/>
</body>
</html>
Источники:
Box model tweaking
http://www.quirksmode.org/css/box.html
Quirks mode and strict mode
http://www.quirksmode.org/css/quirksmode.html
Спецификации CSS3
http://www.w3.org/TR/css3-ui/
суббота, 26 января 2008 г.
LOST: ABC покажет расширенную версию финала третьего сезона
Расширенный финал третьего сезона LOST будет показан 30 января в 21.00 на канале ABC. Разумеет на английском.
Особая версия финальной серии третьего сезона длительностью два часа носит название "Через Зеркало". Авторы LOST обещают новые факты и предисториями. Также сообщается, что серия будет содержать субтитры в нижней части экрана, которые расскажут зрители со стажем чего они могли не заметить. Новые зрители из титров узнаю о том, что было на протяжении предыдущих сезонов.
Кстати первая серия четвертого сезона LOST носит название "Начало Конца" ("The Beginning of the End")...
Источник:
http://www.lost-abc.ru/
Особая версия финальной серии третьего сезона длительностью два часа носит название "Через Зеркало". Авторы LOST обещают новые факты и предисториями. Также сообщается, что серия будет содержать субтитры в нижней части экрана, которые расскажут зрители со стажем чего они могли не заметить. Новые зрители из титров узнаю о том, что было на протяжении предыдущих сезонов.
Кстати первая серия четвертого сезона LOST носит название "Начало Конца" ("The Beginning of the End")...
Источник:
http://www.lost-abc.ru/
Последствия снегопада в Саратове
Не все автолюбители откопали свои автомобили.
Хотя снег в городе чистят, но только на основных улицах. Чем дальше от центра - тем выше сугробы. Уже счищенный снег вывозят не везде - сгребают в огромные кучи. Около моего дома куча уже выше маршрутных газелей.
пятница, 25 января 2008 г.
Криминал
У меня есть племянник. Зовут его Илья Рыжков. Лет ему пятнадцать. Вчера вечером на него напали трое. Избили, отняли деньги. Сейчас Илья у больнице с сотрясением мозга (я только что от него приехал). Нападавших ищет милиция.
вторник, 22 января 2008 г.
Вместо width используем padding
Продолжаем делать сайты "не как у ABC". То есть хорошие сайты, корректно работающие во всех браузерах. Но снова натыкаемся на баг IE.
Есть такой код:
В IE 6 не работает. Высота progressbar2 получается больше 9px. Проблема решается просто - меняем height: 9px на padding-top: 9px:
Есть такой код:
<style type="text/css" media="all">
#progressbar1 {
padding: 2px;
background-color: #FFF;
border: 1px solid #E5E5E5;
}
#progressbar2 {
height: 9px;
background-image: url(../images/progress_bar_bg_01.gif);
background-repeat: repeat-x;
}
</style>
<div id="progressbar1">
<div id="progressbar2">
</div>
</div>
В IE 6 не работает. Высота progressbar2 получается больше 9px. Проблема решается просто - меняем height: 9px на padding-top: 9px:
<style type="text/css" media="all">
#progressbar1 {
padding: 2px;
background-color: #FFF;
border: 1px solid #E5E5E5;
}
#progressbar2 {
padding-top: 9px;
background-image: url(../images/progress_bar_bg_01.gif);
background-repeat: repeat-x;
}
</style>
<div id="progressbar1">
<div id="progressbar2">
</div>
</div>
понедельник, 21 января 2008 г.
Полная форма filter: alpha
Оказывается фильтр alpha в IE не так уж просто. Нашел полное описание параметров оного фильтра. Для него можно задавать не только уровень непрозрачности, но и еще градиентное изменение этой самой непрозрачности. Разумеется работает все это великолепие только в IE.
Полная форма filter: alpha имеет вид:
filter: alpha ( opacity=startOpacity[, finishopacity=finishOpacity, style=filterType, startx=startX, straty=startY, finishx=finishX, finishy=finishY])
Значение параметров:
opacity - Уровень непрозрачности (для градиентной непрозрачности - начальное значение непрозрачности). Полная прозрачность - 0; полная непрозрачность - 100.
finishopacity - Для градиентной прозрачности - конечное значение непрозрачности.
style - Стиль непрозрачности. Однородная непрозрачность (без градиента) - 0; линейный градиент - 1; радиальный градиент - 2; градиент от края контейнера к центру (прямоугольный) - 3. По умолчанию (если опустить параметр) - 0.
stratx, straty, finishx, finishy - Начальные и конечные координата градиента в процентах от размеров контейнера. По умолчанию градиент растягивается на весь контейнер и центруется относительного него же.
См. также:
Пример с битыми картинками (cм. только в IE)
Полная форма filter: alpha имеет вид:
filter: alpha ( opacity=startOpacity[, finishopacity=finishOpacity, style=filterType, startx=startX, straty=startY, finishx=finishX, finishy=finishY])
Значение параметров:
opacity - Уровень непрозрачности (для градиентной непрозрачности - начальное значение непрозрачности). Полная прозрачность - 0; полная непрозрачность - 100.
finishopacity - Для градиентной прозрачности - конечное значение непрозрачности.
style - Стиль непрозрачности. Однородная непрозрачность (без градиента) - 0; линейный градиент - 1; радиальный градиент - 2; градиент от края контейнера к центру (прямоугольный) - 3. По умолчанию (если опустить параметр) - 0.
stratx, straty, finishx, finishy - Начальные и конечные координата градиента в процентах от размеров контейнера. По умолчанию градиент растягивается на весь контейнер и центруется относительного него же.
См. также:
Пример с битыми картинками (cм. только в IE)
воскресенье, 20 января 2008 г.
Мои фото на Albumo.com
Теперь мои фотографии можно купить на стоке Albumo.com. В том числе и замечательные заснеженные елки и телевышки.
пятница, 18 января 2008 г.
Akira Yamaoka
Фото с сайта game-ost.ru
Слушаю Акиру Ямаока (Akira Yamaoka). Именно он написал саундтреки ко всей серии Silent Hill.
Массандра Мускат розовый Южнобережный
Давеча пригубил Массандра Мускат розовый Южнобережный урожая 2001 года. Замечательное десертное вино. Прекрасный полный букет. Всем любителям десертных вин настоятельно рекомендую.
Будете покупать - обратите внимание на условия хранения в магазине. Марочное вино очень чувствительно к повышенной температуре — быстро скисает.
См. также:
О виноделии в Крыму
Массандровские марочные вина
Карта вин Крыма
среда, 16 января 2008 г.
Новый год закончился
Ёлка отправилась в утиль. Испуганный процессом выноса ёлки кот сидит в кухне по мойкой, шипит, отказывается выходить. Нервный у меня кот...
понедельник, 14 января 2008 г.
LOST 4
Иллюстрация с сайта ABC
Четвертый сезон сериала LOST выйдет 31 января на ABC. Российские поклонники сериала уже настраивают файлообменные клиенты.
Новый сезон выходит под слоганом "LOST: missing pieces (LOST: потерянные части)". Так заявлено на официальном сайте сериала.
P. S. К слову сказать официальный сайт сериала (да и весь сайт ABC) корректно работает работает только под IE. А вы говорите кроссбраузерность, переключение блочных моделей, отступ лишний в IE в целых три пикселя...
См. также:
Официально:
http://abc.go.com/primetime/lost/missingpieces/index
Неофициально:
http://www.lostfilm.ru/
http://www.lost-abc.ru/
воскресенье, 13 января 2008 г.
Погиб Геннадий Бачинский
Фото с сайта Радио "Маяк"
По уточненным данным, авария произошла не в районе 19-го километра Щелковского шоссе, а возле города Калязин Тверской области, на границе с Подмосковьем. Около 16 часов журналист, управлявший автомобилем "Фольксваген Гольф", попытался обогнать грузовик и выехал на встречную полосу, где столкнулся с микроавтобусом "Фольксваген Транспортер". Бачинский от полученных травм скончался на месте.
Гражданская панихида состоится во вторник 15 января в Центральном Доме Журналиста с 10.00 до 12.00.
Более 100 тысяч человек оставили свои соболезнования на форуме Геннадия Бачинского на сайте радио "Маяк".
Жаль что не стало такого интересного человека и талантливого ведущего.
среда, 9 января 2008 г.
Белоноговы в сети
Объединения Белоноговых в интернете:
http://vkontakte.ru/club1065877
http://vkontakte.ru/club200338
Просто список однофамильцев:
http://moikrug.ru/search/?lastname=%C1%E5%EB%EE%ED%EE%E3%EE%E2&ok=1
http://vkontakte.ru/club1065877
http://vkontakte.ru/club200338
Просто список однофамильцев:
http://moikrug.ru/search/?lastname=%C1%E5%EB%EE%ED%EE%E3%EE%E2&ok=1
Подписаться на:
Сообщения (Atom)