Блог Болговой Александры

Son of Suckerfish Dropdowns (горизонтальное выпадающее меню средствами CSS)

2012-03-02T06:05:00.004-08:00

перевод Болговой
источник http://www.htmldog.com/articles/suckerfish/dropdowns/

By Patrick Griffiths and Dan Webb.

Оригинальная статья Suckerfish Dropdowns, опубликованная в A List Apart оказалась популярным способом реализации легкого, доступного выпадающего меню на основе CSS, подходящего и для Internet Explorer, использующим псевдо-класс :hover.

Ну, теперь оно вернулось, и оно более доступно, даже легче по весу (всего 12 строк JavaScript), имеет большую совместимость (теперь оно работает в Opera и Safari, без заметных хаков) и может иметь несколько уровней.

Одноуровневое выпадающее меню

Правильно. Давайте не будем ходить вокруг да около. Первоначально HTML будет выглядеть следующим образом:

<li><a href="#">Percoidei</a>

<ul>

<li><a href="#">Remoras</a></li>

<li><a href="#">Tilefishes</a></li>

<li><a href="#">Bluefishes</a></li>

<li><a href="#">Tigerfishes</a></li>

</ul>

</li>

<li><a href="#">Anabantoidei</a>

<ul>

<li><a href="#">Climbing perches</a></li>

<li><a href="#">Labyrinthfishes</a></li>

<li><a href="#">Kissing gouramis</a></li>

<li><a href="#">Pike-heads</a></li>

<li><a href="#">Giant gouramis</a></li>

</ul>

</li>

</ul>

Хороший полезный структурированный неупорядоченный список.

Для начала настроим некоторые основные стили:

#nav, #nav ul {

        padding: 0;

        margin: 0;

        list-style: none;

#nav a {

        display: block;

        width: 10em;

#nav li {

        float: left;

        width: 10em;

Обратите внимание, что вам необходимо указать ширину селектора #nav li, иначе Opera разозлится. Также помните, что, поскольку мы применили плавающие элементы, содержание под выпадающим меню также должно быть очищено (clear: left).

Нам, очевидно, необходимо, скрыть списки, которые сделаем "выпадающими", но сделать все возможное, чтобы не использовать display: none, который, скрывает элементы. Можно подумать, что существует множество способов справиться с этим, но, после экспериментов с шириной, высотой, полями в множестве браузеров, лучшее решение (при размещении многоуровневого списка элементов) заключается в манипулировании свойства left.

CSS спецификация говорит, что значения top, right, bottom и left должны бы смещать абсолютно позиционированный блок относительно его блока-контейнера. Но, к сожалению, Opera решила смещать абсолютно позиционированный блок относительно страницы, и именно поэтому оригинальный Dropdowns Suckerfish не работает на Opera - потому что они полагались на свойства top и left с явным указанием длины.

Итак, вместо display: none, мы используем left: -999em чтобы поместить выпадающий список вне поля зрения, а затем left: auto (а не left: 0), чтобы вернуть его назад:

#nav li ul {

        position: absolute;

        width: 10em;

        left: -999em;

#nav li:hover ul {

        left: auto;

Итак, мы сделали все необходимое для тех браузеров, которые поддерживают псевдо-класс :hover, но для Internet Explorer необходимо установить Suckerfish JavaScript:

sfHover = function() {

        var sfEls = document.getElementById("nav").getElementsByTagName("LI");

        for (var i=0; i<sfEls.length; i++) {

               sfEls[i].onmouseover=function() {

                       this.className+=" sfhover";

               sfEls[i].onmouseout=function() {

                       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

if (window.attachEvent) window.attachEvent("onload", sfHover);

В основном, это касается класса “sfhover” к элементу li в 'nav' ulэлемента, когда на него наведен указатель мыши'moused over',то удаляет его с помощью регулярного выражения 'moused out'.

Следующим шагом просто дублируем селектор :hover с селектором класса 'sfhover'.

#nav li:hover ul, #nav li.sfhover ul {

        left: auto;

Вот и все. Ваше одноуровневое меню готово. Работает даже и в IE6.

Многоуровневое выпадающее меню

В статье Suckerfish Dropdowns было рассмотрено только одноуровневое выпадающее меню, но немного расширив каскадную схему, вполне возможно создать многоуровневое выпадающее меню с CSS. И, в отличие от оригинального Suckerfish JavaScript кода, функция "sfHover" теперь меняет поведения для всех потомков элемента li из 'nav', а не только прямых потомков, теперь многоуровневое выпадающее меню вполне возможно использовать и в Internet Explorer.

Итак, для начала, скажем, мы экспериментировали и с большим количеством уровней, чем здесь:

<ul id="nav">

<li><a href="#">Percoidei</a>

        <ul>

               <li><a href="#">Remoras</a>

                       <ul>

                               <li><a href="#">Echeneis</a></li>

                               <li><a href="#">Phtheirichthys</a></li>

                               <li><a href="#">Remora</a></li>

                               <li><a href="#">Remorina</a></li>

                               <li><a href="#">Rhombochirus</a></li>

                       </ul>

               </li>

               <li><a href="#">Tilefishes</a></li>

               <li><a href="#">Bluefishes</a></li>

               <li><a href="#">Tigerfishes</a></li>

        </ul>

</li>

<li><a href="#">Anabantoidei</a>

        <!-- etc. -->

</li>

<!-- etc. -->

</ul>

Есть несколько вещей, которые мы должны добавить к одноуровневому методу. Во-первых, необходимо чтобы список третьего уровня (в данном примере "Echeneis" Phtheirichthys »и т.д.) выпадал вбок от соответствующего элемента списка (в данном случае" Remoras), так что мы должны добавить правило, которое будет применяться ко всем выпадающим после первого:

#nav li ul ul {

        margin: -1em 0 0 10em;

Поскольку мы не можем точно определить начало абсолютно позиционируемых блоков, то они будут располагаться ниже линии элементов списка с наведенным :hover, поэтому верхнее поле следующих элементов списка должено быть установлено -1em. Но это не утянет меню достаточно далеко от линии с соответствующим пунктом списка, потому что по умолчанию высоты линии больше, чем 1em (обычно 1.2em), поэтому нам нужно добавить кое-что к исходному набору правил для ul:

#nav, #nav ul {

        padding: 0;

        margin: 0;

        list-style: none;

        line-height: 1;

В связи с каскадным эффектом который отображается на уровне второго списка, третий уровень списка также будут раскрыт, мы должны его скрыть (вспомним, что нам нужно дублировать: hover псевдо-класс с классом sfhover. ):

#nav li:hover ul ul, #nav li.sfhover ul ul {

        left: -999em;

Теперь это правило может быть противоречиво, потому что оно отображается, когда при наведении на соответствующий элемент списка за счет раздвижения отображенного выпадающего (который с одного уровня выпадающих было #nav li:hover ul, #nav li.sfhover ul { left: auto; }):

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {

        left: auto;

И это создаст стабильное двухуровневое выпадающее меню

Следуя той же схеме можно разместить столько уровней выпадающих меню, сколько вы хотите:

Трехуровневое выпадающее меню

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

        left: -999em;

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

        left: auto;

И если вы сумасшедший, то и четырехуровневое:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {

        left: -999em;

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {

        left: auto;

Семь принципов типографского контраста

2012-02-19T11:54:00.001-08:00

dot-font: Семь принципов типографского контраста

перевод: Болговой Александры

В семинарском буклете, который он и разработал и написал Карл Даир показал, что в типографии, как и в музыке, гармония и контраст ключи к композиции.

Written by John D. Berry on July 28, 2003

http://www.creativepro.com/article/dot-font-seven-principles-of-typographic-contrast

Покойный канадский типограф Карл Дэйр был одним из величайших дизайнеров типографии в 1950-х и в 1960-х годах, и он, возможно, лучше всех объяснил природу типографии. В скоординированных проектах, которые он написал и разработал, он сумел описать и показать - как манипулируя и используя шрифты создать настоящую типографию.

Дэйр это само воплощение того, что я имею в виду, когда говорю "типограф": тот, кто разрабатывает шрифт, а не просто модный наборщик, но тот, кто использует шрифт, во всех его проявлениях, как составной элемент дизайна. Так как шрифт несет смысл, прикладной типографии требуется дизайнер, который заботится о самих словах. Для этого требуется кто-то, кто достаточно заботливый и искусный, чтобы сделать шрифт который выражает смысл, а не служит просто привлекательным украшением.

Книга Карла Дэйра "Design With Type" (впервые опубликованная в 1952 году, переработанная и дополненная в 1967 году) заслуженно все еще переиздается, хотя технологии, которые он описал, уже давно устарели. С практическими вопросами установки металлического шрифта мы больше не имеем дела, но визуальное отношение между буквами, которые Дэйр показал и объяснил так наглядно в своей книге, не изменилось. " Design With Type" остается одной из лучших из настольных книг для обучения как сделать именно то, о чем и говорит название: дизайн с шрифтом.

Примерно в то же время он пересмотрел свою книгу, Карл Дэйр выпустил серию из шести брошюр для Западной Вирджинии Pulp &Paper (Westvaco), которую он назвал "A Typographic Quest." ("Типографские Загадки"). Каждая брошюра была, естественно, напечатана на бумаге Westvaco, как щедрый образец произведенной бумажной компанией, эта серия была предназначена для повышения авторитета производителя и чтобы стимулировать дизайнеров вспоминать о Westvaco при определении бумаги для их печатной работы.

Но все это было весьма скромным производством: небольшие тридцатистраничные буклеты, размером 5-1/4 дюйма на 9, как правило, были напечатаны двумя цветами (в первом используется три цвета, в более поздних два цвета, хотя второй цвет может меняться на разных листах, причем все три цвета используются вместе на обложках). Первый буклет "Типографские Загадки» был опубликован в 1964 году, шестой (и, насколько я знаю, последний) вышел в 1968 году, когда Карл Дэйр умер. Так как он был писателем и дизайнером серии, каждый из буклетов стал полностью завершенным, посвященным объяснению того или иной аспекта использования шрифта.

Гармония и контраст

Самое важное из учения Карла Дэйра - то, что я постоянно показываю людям, самое ценное, что я сам узнал из его работ - это издание "Типографские Загадки" № 5: «Типографский контраст". В виртуозным исполнении Дэйр показывает, как именно дизайнеры используют различные виды визуального контраста, чтобы создать дизайнерскую работу это означает, выскочить - четко и недвусмысленно, и с талантом. Чтобы нагляднее объяснить свою мысль, он сравнивает типографию и музыку.

Графическая и музыкальная модель имеют общий знаменатель: ритм и акцент, гармония и контраст. "Гармония и контраст", говорит Дэйр ", имеют основополагающее значение для обоих, и открытие этих принципов и их применение в печатном дизайне является главным объектом " Типографских Загадок ".

Семь видов контраста

Дэйр первый объясняет "элементы гармонии" (последовательные отношения между черными штрихами букв на странице, и пространством вокруг них, а также любые правила, рамки, украшения или аналогичные по стилю шрифты), далее показывает семь различных видов контраста. Он подчеркивает, что в любых видах различия, важно, чтобы контраст был очевиден - не просто небольшое, почти незаметное изменения, а на самом деле огромная, очевидна разница между контрастными элементами.

Первый и самый основной контраст это размер. "Простой, но резкий контраст размера", говорит Дэйр ", определяет точку, к которой обращается внимание читателя. Установленный шрифт в том же стиле, поддерживает точное соотношение букв на заднем плане. Это только физическое расширение основной схемы, созданное изменением типа и толщины шрифта, используемого для основного текста».Наиболее распространенно использование размера в создании названий или заголовков, заметно больших, чем текст - но это только отправная точка.

Второй наиболее очевидный контраст это жирность шрифта: жирный шрифт выделяется на фоне более легкого шрифта в том же стиле. Как Дэйр заметил, что "не только шрифты разной толщины, но и другие типографские элементы, такие как правила, отметки, квадраты и т.д., может быть использованы, чтобы обеспечить место для тяжелых мощных точек визуального притяжения или акцента".

Следующие два вида контраста – контраст формы и контраст структуры. Не всегда очевидно, где провести границу между этими двумя понятиями, так как они оба имеют дело с формой букв.

Под термином «форма», Дэйр имеет ввиду различие между заглавной буквой и ее строчным эквивалентом, или римские буквы и их курсивый вариант. Этот термин включает в себя сжатые и расширенные версии шрифтов, и он даже говорит о том, что "есть несколько рукописных шрифтов(скриптов), которые гармонируют с стандартными шрифтами, такие как шрифт Bank и Bodoni на следующей странице, и могут быть использованы для резкого изменения формы “. (Он предупреждает о сложности использования рукописных шрифтов и курсивом вместе, так как они обе версии рукописных букв и с большей вероятностью приведут к конфликту, чем контраст).

Под "структурой", Дэйр подразумевает различную форму букв разных видов шрифтов - шрифты без засечек по сравнению с высокой контрастностью современных, к примеру, или курсив против старопечатных. "Использование контрастных структур можно сравнить с оратором, который меняет свой голос, не увеличивая и не уменьшая громкость, но меняя звучание голоса в соответствии со словами".

Сложите все это вместе, и примените их к блоку текста на странице, и вы получите контраст текстуры: линии шрифта выглядят как масса, которая частично зависит от самих букв, а частично от того, как они " расположены. "Как нити в ткани", говорит Дэйр ", шрифты образуют материю нашей ежедневной связи».

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

Последний из семи видов контрастов Дэйра - контраст направления: оппозиция между вертикалями и горизонталями и углы между ними. Включение одного слова сбоку может иметь огромное влияние на макет. Но Дэйр указывает, что текстовые блоки также имеют вертикальный или горизонтальный аспекты, и смешивание широкого блока длинных линий с высокими колонками коротких линий может также вызвать контраст.

Другие типы контраста

Есть другие виды контраста, менее четко зависящие непосредственно от шрифта. Дэйр упоминает "контраст изоляциий," то есть, размещение слова или фразы в изолированном положении от других элементов на странице, чтобы выделить его. (Я понимаю его как контраст положения.) И он предлагает другие виды нетипографского контраста, такие как рифленая бумага, тиснение, и использование контраста матовых или глянцевых чернил. Он также отмечает, что иллюстрации, особенно художественные линии, могут быть в гармонии со шрифтом на той же самой странице или могут полностью с ним контрастировать.

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

Обычно мы используем совместно несколько видов контраста, для того чтобы создать различие между визуальными элементами еще более очевидным. Мы можем использовать сразу все семь видов контраста Дэйра, если мы искусны в этом, он называет это типографскими "аккордами". (Одно из названий главы в "Design With Type" "Multiplying the Contrasts.")(Умножение контрастов). Но разделение их на простые оппозиции облегчает их сознательное использование, это удержит нас от получения запутанных проектов, где мы пытаемся изменить слишком много вещей одновременно, не думая о том, что мы делаем. Я обнаружил, что анализ типографского контраста Карла Дэйра - и особенно художественный талант, с которым он его преподносит - неоценимый инструмент в практике графического дизайна.

Read more by John D. Berry.

Освобождение (отступ не про верстку)

2012-02-15T21:43:00.001-08:00

14 февраля был знаменательный день для меня. Я удалила аккаунт в одноклассниках. Я не против соцсетей, и даже немного мило перекопированные на 100 раз картинки с поздравлениями и призраки старых друзей. Но вот игры меня напрягают, я считаю их убийством времени, а оно для меня дорого, предпочитаю тратить его на верстку и самообразование, на моего сыночка. А одноклассники с флэшиграми меня затянули. Началось с друзей, которые присылали приглашения в игры, просили прислать там где-то что-то в домовятах, на острове, в запорожье, в моем королевстве, поначалу я им просто отсылала, а потом стала играть. Хотя для меня это зависимость, от которой я избавилась несколько лет назад. Я играла много лет, прошла вдоль и поперек героев меча и магии, GTA3, GTA3 Vice City, GTA San Andreas, Obvilion... Много еще чего, хотя у меня за это не прибавилось ни рубля, ни ума, а все что я получила - бесцельно потраченное время. И вот опять. Одноклассники и их игры. Я начала играть. В острове я достигла 54 уровня, в запорожье 32, в домовых тоже не маленького, в моем королевстве 20.... Надоело!!!! То есть между версткой я периодически забегаю в одноклассники, сажу грядки, навещаю друзей, которых немало нашла в сообществах по играм... То есть в целом за день не менее двух часов я трачу на грядки которых нет, сажу овощи которых не существует, собираю их, кормлю выдуманных животных... Жесть!
Тут вспоминаю соседку тетю Лену которая закачала на телефон тамагочи. Виртуальный котенок который жрет еду, купленную на реальные деньги. Надо сказать у тети Лены очень маленький доход дворника, неработающий сын, муж алкаш, в общем с деньгами напряг и частенько они просто ничего не едят. Так вот добрая женщина занимала деньги, закидывала на телефон и кормила прожорливого тамагочи, потому что ей его было жалко. Тяжелый случай.
А с одноклассниками я разделалась когда мне нужно было изучать SQL запросы к базе данных, но не могла от компа отогнать супруга, так как ему нужно было срочно полить несуществующие грядки и потрать 60 энергии. Вот и все. Надоело. Я свободна.

И все же что же значит "прижать футер к подвалу"???

2012-02-14T03:17:00.000-08:00

Ответ на этот вопрос есть в огромных количествах в интернете, и я так понимаю ответ на него: футер должен всегда находиться внизу, то есть вообще всегда, и при масштабировании тоже он должен прилипать к низу окна браузера

то есть как на скриншоте.
Вроде бы нет проблем, существует множество способов прилепить футер таким образом. Хотя нет, проблема есть. Ну не получается добиться такого же в IE7. Никак. И я пришла к такому выводу, после двух дней мучений и просмотра сайтов в IE7: наверное в ослике и не получится такого добиться, чтобы при масштабировании футер также прилипал к низу окна браузера.

То есть это и значит: футер прижат к низу окна в IE? Без масштабирования футер всегда находится снизу. А такого результата прижатия футера, как в нормальных браузерах от IE не добиться.

PIE! PIE! PIE!!!

2012-01-31T23:59:00.000-08:00

CSS3 предоставил нам возможность легко и без лишних изображений создавать красивые градиенты и закругленные уголки. Но как обычно IE позади планеты всей.
Буквально вчера передо мной стояла задача сделать вот такую кнопочку.

А так как требовалась кроссбраузерная верстка, включая IE7 и IE8, казалось без изображений не обойтись. Но немного порывшись в интернете, я узнала про такую классную вещь как PIE !
Эта техника позволяет реализовать в IE6-8 такие CSS 3.0 возможности как:

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

То есть вы пишите привычные вам свойства, но в конец CSS конструкции вставляете behavior: url(/PIE.htc) и все! Все что нужно - скачать архив с CSS3PIE, распаковать и правильно указать к нему путь.
И вот он - кроссбраузерный код для моей кнопки!!!
стили:
    a.dalee {
    border: 1px solid rgba(0,0,0,0.01);
    padding: 5px 15px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #60a9d4;
    background: -moz-linear-gradient(top, #4290c1 0%, #60a9d4 100%);            /* Firefox 3.6+ */
    background: -webkit-linear-gradient(top, #4290c1 0%, #60a9d4 100%);            /* Chrome 10+, Safari 5.1+ */
    background: -ms-linear-gradient(top, #4290c1 0%, #60a9d4 100%);                /* IE10 */
    background: -o-linear-gradient(top, #4290c1 0%, #60a9d4 100%);                /* Opera 11.10+ */
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0%,#4290c1), color-stop(100%,#60a9d4));                /* Chrome 1-9, Safari 4-5 */
    background: linear-gradient(top, #4290c1 0%, #60a9d4 100%);                    /* CSS3 */
    -pie-background: linear-gradient(top, #4290c1 0%, #60a9d4 100%);            /* IE7, IE8 */
    behavior: url(pie/PIE.htc);
    font-size: 170%;
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    }
и html-разметка:
<a href="#" class="dalee">see more</a>

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

Сайты с изображениями

2012-01-31T20:29:00.000-08:00

Информация из книги Андрея Грачева "Создаем свой сайт на WordPress" wordpressbook.ru
Перечень сайтов, изображения с которых можно свободно использовать:

Stock.XCHNG библиотека, содержащая сотни тысяч иллюстраций на самые различные темы;
проект Openfoto, один из старейших фотосайтов, появившийся еще в 1998 году и обладающий огромной коллекцией фотографий;
фотобанк FreePhotosBank - бесплатный аналог многочисленных интернет - фотобанков;
сервис Image*After, специализирующийся на фоновых изображениях, текстурах, обоях, абстрактных картинках; идеально подходит для поиска сопутствующих материалов и фоновых картинок для сайта;
фотосайт Unprofound с большой коллекцией качественных фотоизображений;
фотобанк Morguefile с удобным поисковым механизмом и хорошо организованным каталогом изображений;
сайт PixelPerfectDigital посвященный новостям из мира цифровых фотографий и содержащий большой подраздел бесплатных изображений;
проект Freerange - ещё один фотобанк с бесплатными изображениями.

Помощь в верстке

2012-01-25T00:33:00.000-08:00

Генератор шаблонов csstemplater.com (правда потом код нужно подчищать) ну это так на всякий случай.
Справочный сайт HTML5Please для помощи при разработке сайтов на HTML5.
А здесь на caniuse.com можно проверять поддержку определённой функции в каждой версии каждого браузера, включая прошлые и будущие.

html5boilerplate

2012-01-23T11:45:00.000-08:00

Что-то интересное, не забыть разобраться. Встретилась на фрилансе фраза "Предпочтительна верстка в HTML5 (если будете использовать html5boilerplate и есть опыт его использования – это преимущество)." Надо срочно выяснять.

Как всегда проще простого

2012-01-18T11:38:00.000-08:00

Web developer на моём файрфоксе уже давно был установлен, но вот только сегодня дошло как с ним узнавать уровни вложенности заголовков на странице. Дааа... А всего-то инфо=>оглавление документа. И в новой вкладке выводится информация о заголовках... А еще через эту панельку легко сразу проверять код на валидность. И все это время она у меня была, а я и не знала....Ужас... как так?...

Валидная вставка видео с YouTube

2012-01-15T01:51:00.000-08:00

YouTube выдает код на вставку видео на страничку, но он не проходит валидацию.
Пример:

<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/rSIoePh2vZs?version=3&feature=player_detailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/rSIoePh2vZs?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360">
</object>
На этом сайте находится генератор валидного кода для видео с YouTube. Вот на какой код он заменил мой

<object type="application/x-shockwave-flash" style="width:256px; height:168px;" data="http://www.youtube.com/v/rSIoePh2vZs?version=3" allowscriptaccess="always" allowfullscreen="true">
                <param name="movie" value="http://www.youtube.com/v/rSIoePh2vZs?version=3" />
                <param name="allowFullScreen" value="true" />
                <param name="allowscriptaccess" value="always" />
</object>
Да, и валидация выдает уже две ошибки, валидатор против allowscriptaccess="always" allowfullscreen="true"... Интересно, можно ли сделать совсем валидно, без ошибок?...

Настройка apache+php+mysql

2011-12-15T10:50:00.006-08:00

Шпаргалка для меня.

Прежде всего хочу сказать, что это не инструкция по установке, это шпаргалка про траблы при установке, и как связать между собой apache&php5 прежде всего. Остальные настройки можно найти в интернете в великом множестве, http://www.sysbox.ru/server/ для примера. При установке localhost возникало миллион проблем и еще больше вопросов.

1. Была проблема с установкой mysql. В интернете куча советов по установке этой программы, например здесь, но почему-то не пишут с проблемой при переустановке. Я поставила mysql, но потом пришлось удалить, и вот беда, установка завершается некорректно, а mysql терминал после ввода пароля сразу же закрывался. Проблема была просто в том, что надо было после удаления программы очистить папку data, у меня она была по адресу C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.5\data. И всего-то.

2. Проблема с apache №1 Подключение apache. Локальный хост у меня был по адресу C:/server/work, поэтому в httpd.conf, который был в папке conf в папке с apache после кода

<Directory />

    Options FollowSymLinks

    AllowOverride None

    Order deny,allow

    Deny from all

</Directory>

надо было добавить

<Directory "C:/server/work">

    AllowOverride All

    Options Indexes FollowSymLinks Includes

    Order allow,deny

    Allow from all

</Directory>

и разблокировать строку

Include conf/extra/httpd-vhosts.conf

чтобы в файл httpd-vhosts.conf , находящийся в папке apache\conf\extra добавить информацию о локальном хосте:

<VirtualHost *:80>

    DocumentRoot c:/server/work/test.ru/www

    ServerName test.ru

    ServerAlias www.test.ru

    ErrorLog c:/server/work/test.ru/error.log

    CustomLog c:/server/work/test.ru/access.log common

</VirtualHost>

Проблема с apache №2
Возникла когда я устанавливала по книге Котерова PHP5 в подлиннике. То есть нужно было создать виртуальный диск Z: при помощи subst Z: .. (полный код ниже)

@echo off
:: Программа создания виртуального диска
subst Z: ..

нужно было создать файл Boot.bat и запустить. У меня стоит Windows XP, apache 2.2. Может быть из-за этого был конфликт, в общем виртуальный диск создался, но апач на него ставился "особенно" - в папке conf отсутствовали какие бы то ни было файлы. Погуглив, нашла, что windows этот диск не воспринимает и нужно вручную вносить его в системный реестр. Это значит, что нужно создать файл с расширением .reg и запустить, его содержимое автоматически запишется в регистр Windows, а вот собственно и содержимое

REGEDIT4

;создаем диск Z из папки C:\\WebServers прописывая запись в реестре
; тогда Apache, запущенный как сервис, видит этот диск
; не забыть перезагрузить комп - тогда подействует...
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\DOS Devices]
"Z:"="\\??\\C:\\WebServers"

Но моя Windows вела себя очень странно, она совсем отказалась после этой записи в реестр воспринимать диск Z: Кстати, после переустановки apache на диск C: (не виртуальный) сервер прекрасно запускался, проблема именно в том что не запускалась на виртуальном диске. Есть подозрение, что виновата была какая-то из многочисленно записанных программ, но какая... В общем проблему я решила кардинально. Форматнула диск C, переустановила винду, и странно, но все заработало... то есть почти все.
Apache все же установился на диск Z: но вместо зеленой точки в трее на пере была только красная. Погуглив еще, выяснила, что видимо придется запускать апач вручную, подправила httpd.conf (по книге Котерова) и после создания файла Run.bat оно заработало!!! Код Run.bat

@echo off
:: Программа для запуска всех серверов: Apache и MySQL
call Boot.bat
Z:
:Запуск Apache
cd \usr\local\apache\bin
start httpd.exe
:: Добавьте сюда команды для запуска других серверов

Но! В трее по прежнему перо с красной точкой говорит, что No services installed,

после запуска Run.but возникает окно DOS, которое я и не трогаю, пусть себе торчит, зато index.html в localhost открывается. Да, кстати в книге Котерова в файле Run.bat нужно было запускать apache.exe, но я его не нашла, и опять же погуглив немного выяснила, что он равнозначен файлу httpd.exe.

Зачем мне это надо, когда можно просто установить денвер? Да чтобы разобраться как оно работает, вот зачем.

3. Подключение php. Качала здесь Installer VC9 x86 Thread Safe

При установке важно правильно указать где будет находиться папка с php, затем выбрать apache2_2 и указать для него папку с conf, например C:\server\apache\conf.

В конце установки в файл apache httpd.conf установщик добавлял несколько строк внизу файла, с которыми апач перестал запускаться. Нужно эти строки удалить. И потом я подключала php в качестве модуля web-сервера, для этого добавила в файл httpd.conf апача там где огромный список LoadModule вниз строки

AddType application/x-httpd-php phtml php

LoadModule php5_module c:/server/php/php5apache2_2.dll

и скопировала файлы php5ts.dll и php.ini и только после этого апач заработал.

CSS transitions

2011-12-04T02:37:00.000-08:00

CSS анимируемые свойства

Список, приведенный ниже основан на CSS Transitions Module (level 3) Working Draft и Editor’s Draft (плюс Mozilla Developer Connection).

Property Type	Property Name	Transitionable Values
Catch-all	`all`	(все свойства transitionable)
Text properties	`color`	color
	`font-size`	length, percentage
	`font-weight`	number, keywords (включая `bolder`, `lighter`)
	`letter-spacing`	length
	`line-height`	number, length, percentage
	`text-indent`	length, percentage
	`text-shadow`	shadow
	`vertical-align`	keywords, length, percentage
	`word-spacing`	length, percentage
Box properties	`background`	color (в настоящее время)
	`background-color`	color
	`background-image`	images, gradients
	`background-position`	percentage, length
	`border-color`	color
	`border-spacing`	length
	`border-width`	length
	`clip`	rectangle
	`crop`	rectangle
	`height`, `min-height`, `max-height`	length, percentage
	`margin`	length
	`opacity`	number
	`outline-width`	length
	`outline-offset`	integer
	`outline-color`	color
	`padding`	length
	`width`, `min-width`, `max-width`	length, percentage
Positioning properties	`bottom`	length, percentage
	`top`	length, percentage
	`grid-*`	various
	`left`	length, percentage
	`right`	length, percentage
	`visibility`	visibility
	`z-index`	integer
	`zoom`	number
SVG properties	`fill`	paint server
	`fill-opacity`	float
	`flood-color`	color, keywords
	`lighting-color`	color, keywords
	`marker-offset`	length
	`stop-color`	color
	`stop-opacity`	float
	`stroke`	paint server
	`stroke-dasharray`	list of numbers
	`stroke-dashoffset`	number
	`stroke-miterlimit`	number
	`stroke-opacity`	float
	`stroke-width`	float
	`viewport-fill`	col
	`viewport-fill-opacity`	color

Примечания по таблице

1. Хотя сокращение background - а на самом деле нет в спецификации, он работает (по крайней мере для значений background-color и background-position)

Верстать ещё легче, лучше, веселее

2011-11-08T00:17:00.000-08:00

Оочень полезная статья на хабре Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
В том числе меня заинтересовала программа Pixel Perfect. Для соответствия верстки макету. На сверстанную страницу накладывается полупрозрачное изображение.
Эта программа устанавливается как плагин для FireFox. На FireFox7 для начала следует установить Firebug 1.8.4. Вызывается F12. А после на firebug уже ставится Pixel Perfect 1.7.0

Генератор градиентов

2011-10-27T03:25:00.000-07:00

Сайт генератор градиентов. Все проще простого, создаешь градиент, как в фотошопе, а генератор автоматически выводит код с поддержкой всех браузеров. Вот это вещь!

Ссылки для Joomla!

2011-10-06T11:03:00.000-07:00

www.joomla.org- главный сайт Joomla, где можно найти последние новости.
docs.joomla.org - документация и справочные материалы проекта Joomla. В этом разделе можно найти созданную сообществом интернет - энциклопедию, содержащую массу полезной информации об использовании Joomla.
www.joomla.org - один из крупнейших форумов во всемирной паутине.
www.extensions.joomla.org - каталог расширений для Joomla, содержащий более 4000 расширений, созданных сторонними разработчиками, включая компоненты, модули и дополнения.
www.shop.joomla.org - здесь продаются футболки с логотипом Joomla!
www.dev.joomla.org - сайт для разработчиков.Здесь вы найдете документацию с описанием интерфейса прикладного программирования API Joomla.
www.joomlacode.org - это единственный сайт, работающий не под управлением системы Joomla, но он представляет для нас непосредственный интерес. Он известен как центр разработки и играет роль репозитория, в котором хранятся основные файлы Joomla и тысячи расширений, выпущенных сторонними разработчиками

Вообще мне теперь Joomla стала намного понятнее. То ж проще простого, что CSS для представления, то же и CMS(например Joomla) для содержимого. До PHP бы еще когда нибудь добраться...

Шаг вперед

2011-09-22T12:09:00.000-07:00

Ужас, сегодня с горем пополам установила WordPress на денвер(это жывотное я установила еще вчера). И выяснила, что Joomla тоже можно на денвер установить. То есть все же есть у меня возможность с ней разобраться на локальном компе. Все же не зря я три учебника по ней приобрела. Ну и пусть что это маленькое продвижение, но все же вперед двигаюсь. Ничего, разберусь.

Joomla

2011-09-16T11:56:00.000-07:00

Может быть и смешно, но я пытаюсь выяснить что за жывотное такое - Joomla. Все, что я поняла пока, что это вроде как платно. Хотя и это не беда. Но куда платить-то? Еще чтобы и на сайте Joomla поддерживалась и cpanel была. Вот cPanel -то вроде бы как раз и платная. Или нет. Или хостинг платный. В общем черт голову сломит. Пусть я эту ахинею немного попозже почитаю. Может повеселит. Но пока... Ничего не доходит. Совсем...
Но кое-что нашла. Только не знаю, нужное или нет. с форума:
"http://www.000webhost.com/
вот нашёл такой буржуйский бесплатный хостинг с cpanel и без рекламы
пример - поставил сайт на джумле http://www.202.org.ua/
глюков не наблюдается, всё работает."
Я там зарегала сайт polisaevo.herobo.com ха-ха, полысаево.херово.ком. Хорошо, что не саша.херово.ком. Там пока написано, в процессе проверки. Вот завтра и проверю. Только не знаю что..
Просто я когда что-то не понимаю, я всегда думаю, что другие-то разобрались, и очень много других разобрались. Так что я-то точно с этим разберусь и все пойму. Потому что я конечно и не самая умная, но уж и точно не самая тупая.

Резиновое меню

2011-09-15T03:30:00.001-07:00

Сейчас пытаюсь сделать резиновое меню. С фиксированным все нормально, получается, а вот резиновое... Как все же оно должно выглядеть. Здесь поставлю ссылки на то, что может пригодиться.
1. Выпадающее меню без JavaScript (не, ну скрипт там все же есть, но только для того, чтобы IE его правильно отображал)
2. Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта
3. Выпадающее "резиновое" меню средствами css

Как довести таблицы до ума

2011-08-25T02:32:00.000-07:00

Это довольно вольный перевод статьи Роджера Йохансона bring on the tables.

Доведите таблицы до ума

Использование таблиц часто путает людей, которые плохо знакомы с версткой на основе CSS. Я видел много случаев, когда люди интерпретируют выражение "избегайте использования таблиц для разметки", как "не используйте таблицы вообще". Важно помнить, что таблицы по-прежнему удобны в использовании - если ими правильно пользоваться.

Да, делайте всё возможное, чтобы избежать использования таблиц для разметки, но для табличных данных следует использовать таблицы. Я хотел бы поговорить о том, как таблицы следует использовать при разметке табличных данных. В HTML и XHTML есть намного больше, чем просто строки и ячейки. Намного больше. Особенно, если вы хотите сделать их доступными.

Для начала немного вводной информации. "Избегайте использования таблиц для разметки" аннотацию можно найти в Введении в таблицы в HTML 4.01 Specification

Таблицы не должны использоваться исключительно в качестве средства для верстки содержимого документа, поскольку это может представить проблемы при просмотре невизуальными устройствами. Кроме того, при работе с графикой, эти таблицы могут заставить пользователей прокручивать по горизонтали чтобы просмотреть таблицы разработанные на системе с большим дисплеем. Чтобы минимизировать эти проблемы, авторам следует использовать таблицы стилей для контроля макета, а не таблицы.

Я бы сказал, что всё довольно ясно, хотя используется слово следует, а не должны, поэтому присутствует некоторая гибкость в спецификации.

Но эта статья не о том, использовать таблицы для разметки или нет. Речь идет о использовании таблиц для их первоначального назначения: разметки табличных данных.

Когда таблицы используются для разметки фактических данных, то это не просто макетная сетка. Люди с нормальным зрением могут получить представление о связи между заголовком и ячейками данных, глядя на планировку и визуальное представление таблицы. Слепые, или люди с ослабленным зрением не смогут этого сделать. Для таблицы, чтобы быть доступной для людей, использующих программы чтения с экрана или другие невизуальные пользовательские агенты, следует сообщить пользовательскому агенту как содержащаяся в нем информация связана между собой.

К счастью, HTML предоставляет множество элементов и атрибутов для этого. Меньше повезло в том, что может быть довольно трудно понять, как применять некоторые из этих специальных возможностей. В этой статье я попытаюсь объяснить, как большинство из них могут быть использованы.

Табличные заголовки <th>

Давайте начнем с очень простой таблицы, в которой есть только одна строка заголовка,и у каждой в столбце содержатся данные. Разметим по-старинке: простая таблица с столбцами и строками, разметка будет наподобие этой:

<table>
<tr>
<td>Company</td>
<td>Employees</td>
<td>Founded</td>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Вот так выглядит эта таблица в большинстве браузеров без границ и стилей:

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Применив к таблице немного CSS, можно сделать заголовки более выразительными для тех, кто использует графический браузер

Для зрячих, теперь легко и быстро установить связь между заголовками и ячейками данных . Но те, кто используют программы чтения с экрана услышали бы что-то вроде "Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1073". Не очень легко разобрать в этом какой-то смысл.

Первый - и самый простой шаг к тому, чтобы эта таблица была более доступной - слелать правильную разметку заголовков. Это очень легко: просто используйте <th> (для заголовка таблицы), а не <td> (табличные данные) для ячеек заголовков

<table>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Для этой простой таблицы, достаточно информации для программы чтения с экрана, чтобы иметь возможность дать пользователю понять, какой заголовок к какой ячейке данных относится. Программа чтения с экрана сможет сказать: "Компания: ACME Инк, работников: 1000, Дата основания: 1947 год", и так далее для каждой строки. Гораздо лучше.

Заглавие таблицы: <caption>

Элемент<caption> может быть использован для предоставления краткого описания таблицы, так же, как изображение заглавия. По умолчанию, большинство визуальных браузеров размещают элемент <caption> по центру над таблицей. Свойство CSS caption-side может быть использовано, чтобы изменить это, если необходимо. Большинство браузеров будут отображаться только заглавие или выше (top) или ниже (bottom) содержимого таблицы, а некоторые будут размещать слева или справа. Я оставляю вам поэкспериментировать с ним.

При использовании тег <caption> должен быть самым первым, который находится после тега открытия таблицы<table>:

<table>
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Конечно, если хотите, Вы можете использовать CSS, чтобы стилизовать заглавие. Однако следует помнить, что нужно немного хитрости, чтобы стиль одинаково отображался во всех браузерах. Я оставлю это как еще одно упражнение для вас.

Объяснение таблицы: атрибут summary

Зрячий человек может легко решить, стоит ли изучать таблицу в деталях. Беглый взгляд покажет, насколько велика таблица и примерно то, что она содержит. Человек, использующий программу чтения с экрана не можете сделать этого, пока мы не добавим атрибут summary к элементам таблицы. Таким образом, вы можете предоставить более подробное описание таблицы, чем подходит для элемента <caption>.

Содержимого атрибута summary не будет видно в визуальных браузерах, поэтому сделайте описание достаточно длинным, для всех слушающих его, чтобы понять, о чем же эта таблица. Но не переусердствуйте, хотя и используйте атрибут summary только в случае необходимости, т.е. для более сложных таблиц, где summary будет проще для кого-то , использующего программу чтения с экрана, чтобы понять содержание таблицы.

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th>Company</th>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Сокращение заголовков: атрибут abbr

Когда программа чтения с экрана встречает таблицу, она может объявить связанные заголовки (или заголовок) перед каждой ячейкой данных. Если у вас длинные заголовки, для слушающего их, они повторяются снова и снова и это может стать утомительным. Используя атрибут abbr вы предоставляете сокращенную версию любого из длинных заголовков, вы даете программе чтения с экрана то, что они могут использовать, вместо текста заголовка . Использование атрибута abbr не является обязательным, и в большинстве случаев ваши заголовки будут (и, вероятно, должны бы быть) все равно довольно короткими.

Если таблицу незначительно изменить, чтобы сделать заголовки длинее, атрибут abbr может быть использован следующим образом:

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th abbr="Company">Company Name</th>
<th abbr="Employees">Number of Employees</th>
<th abbr="Founded">Foundation Year</th>
</tr>
<tr>
<td>ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td>XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
Company Name	Number of Employees	Foundation Year
ACME Inc	1000	1947
XYZ Corp	2000	1973

Программа чтения с экрана могла бы прочитать полные длинные заголовки в первой строке данных, а затем использовать сокращенное для оставшихся строк.

Учитывая, как трудно это может быть - сделать таблицу в соответствии с разметкой, я бы сказал, что чаще бывает наоборот: сделать заголовки как можно более короткими, или даже сокращенные, и использовать атрибут title или abbr для элемента, чтобы дать ему более длинное объяснение.

Связь заголовков с данными: атрибуты scope, id и header

Многие таблицы являются более сложными, чем та таблица, которую я использую для примера. Я сделаю её немного более сложной путем удаления заголовка "Компания" и изменение данных ячеек в первой колонке в ячейке заголовков:

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th>Employees</th>
<th>Founded</th>
</tr>
<tr>
<th>ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th>XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Table 1: Company data
	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

В этой таблице, каждая ячейка имеет два заголовка. Простейшим способом разметки, чтобы убедиться, что невизуальный браузер может разобраться в этой таблице является добавление атрибута scope для всех заголовков:

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td></td>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<th scope="row">ACME Inc</th>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<th scope="row">XYZ Corp</th>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Атрибут scope определяет, будет ли ячейка заголовка предоставлять информацию заголовка для столбца или строки:

col: информация заголовка для столбца
row: информация заголовка для строки

Добавление атрибута scope со значением col, чтобы заголовки в первом ряду являлись заголовками для ячеек под ними. Кроме того, присваивая заголовкам для строк значение scope, делает их заголовками для ячеек вправо от них.

У атрибута scope может быть ещё два значения:

colgroup: информация заголовка для оставшейся группы столбцов
rowgroup: информация заголовка для оставшейся группы строк

Группа столбцов определяется элементом <colgroup>. Группы строк определяются элементами <thead>, <tfoot> и<tbody> . Я вернусь к ним немного попозже.

Что делать, если вы хотите оставить заголовок "Компания", и при этом также названиями компаний будут заголовки строк? Тогда бы ячейки, содержащие названия компаний предоставляли бы и заголовок и информационные данные. В этом случае, <td> должны использоваться вместе атрибутом scope:

<table summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<th scope="col">Company</th>
<th scope="col">Employees</th>
<th scope="col">Founded</th>
</tr>
<tr>
<td scope="row">ACME Inc</td>
<td>1000</td>
<td>1947</td>
</tr>
<tr>
<td scope="row">XYZ Corp</td>
<td>2000</td>
<td>1973</td>
</tr>
</table>

Таким образом, визуальные браузеры не будут отображать названия компаний, как заголовки по умолчанию, поэтому немного CSS необходимо, чтобы исправить это. Для этого примера я использовал следующий CSS:

td[scope] {
font-weight:bold;
}

Обратите внимание, что в этом правиле используется селектор атрибута, который Internet Explorer не поддерживает. Обходной путь для этого - можно добавить class к любым ячейкам, которые должны быть оформлены как заголовки.

Table 1: Company data
Company	Employees	Founded
ACME Inc	1000	1947
XYZ Corp	2000	1973

Другая техника для связывания клеток таблицы с соответствующим им заголовком включает в себя предоставление каждому заголовку уникального идентификатора. Атрибут заголовка добавляется в каждую ячейку данных. Этот атрибут содержит список разделенных пробелами, в идентификаторе каждой ячейки заголовка, которая применяется к этой ячейке данных. Эта техника является более сложной и должна использоваться только когда есть клетки, которые должны быть связаны с более чем двумя ячейками заголовка, и атрибутов scope недостаточно, как и в очень сложной или неправильной таблице.

Чтобы проиллюстрировать это, я изменил таблицу, чтобы показать число сотрудников каждого пола компании:

<table class="extbl" summary="The number of employees and the foundation year of some imaginary companies.">
<caption>Table 1: Company data</caption>
<tr>
<td rowspan="2"></td>
<th id="employees" colspan="2">Employees</th>
<th id="founded" rowspan="2">Founded</th>
</tr>
<tr>
<th id="men">Men</th>
<th id="women">Women</th>
</tr>
<tr>
<th id="acme">ACME Inc</th>
<td headers="acme employees men">700</td>
<td headers="acme employees women">300</td>
<td headers="acme founded">1947</td>
</tr>
<tr>
<th id="xyz">XYZ Corp</th>
<td headers="xyz employees men">1200</td>
<td headers="xyz employees women">800</td>
<td headers="xyz founded">1973</td>
</tr>
</table>

Table 1: Company data
	Men	Women	Founded
	Employees		Founded
ACME Inc	700	300	1947
XYZ Corp	1200	800	1973

Как вы можете видеть, этот метод быстро становится действительно сложным, поэтому, если это возможно, используйте атрибут scope.

Объединение строк и столбцов

В старые дни табличной верстки, атрибуты rowspan и colspan часто использовались, чтобы ячейки таблицы занимали несколько строк или столбцов для того, чтобы поместить все аккуратно нарезанные изображения вместе. Эти атрибуты все еще здесь - нет способа использовать CSS для указания объединения. Если вы думаете об этом, это вполне логично: объединение строк и столбцов является частью структуры таблицы, а не ее представлением.

Колонки и группы столбцов: <col> и <colgroup>

HTML предусматривает <colgroup> и <col> элементы для группировки связанных столбцов таблицы. Это позволяет (в некоторых браузерах) использовать CSS для стилизации отдельных столбцов. Для группы колонок, также может быть использован атрибут scope, чтобы указать, что ячейка содержит информацию заголовка для остальной части группы столбцов, который его содержит.

Это все, что я собираюсь сказать вам здесь о столбцах и группах столбцов.

Группы строк: <thead>, <tfoot>, и <tbody>

Строки таблицы могут быть сгруппированы в заголовке таблице (<thead>), футере таблицы(<tfoot>), и в одном или больше разделе основного содержания(<tbody>). Каждая группа строк должна содержать одну или несколько строк таблицы.

Если в таблице есть раздел заголовка, он должен располагаться перед футером таблицы и перед основным разделом. Раздел футера должен быть расположен перед основным разделом. Если нет раздела хедера или футера, <tbody> элемент не требуется (но это не запрещено, так что добавьте его, если хотите).Структура таблицы, которая имеет ряд групп выглядит следующим образом:

<table>
<thead>
<tr></tr>
… more rows for the table head
</thead>
<tfoot>
<tr></tr>
… more rows for the table foot
</tfoot>
<tbody>
<tr></tr>
… more rows for the first table body
</tbody>
<tbody>
<tr></tr>
… more rows for the second table body
</tbody>
… more table bodies if necessary
</table>

Группировка строк может быть полезна по нескольким причинам:

Это позволяет легко стилизовать header, футер и основной раздел таблицы независимо друг от друга, без необходимости добавлять классы для каких-либо элементов
При печати длинных таблиц, некоторые браузеры (например, основанные на Mozilla) будут повторять информацию разделов header и footer для каждой печатной страницы, что сделает чтение печатной страницы более удобным.
.Отделение header и footer от основного раздела дает возможность для браузеров прокручивать в таблице только основной раздел.

Только для табличных данных

Все описанное здесь связано с использованием HTML-таблиц для структурирования и представления данных. Если вы используете таблицы для разметки, ни один из методов, описанных здесь, не должен быть использован. Никаких атрибутов summary, никаких заглавий, никаких заголовков, ничего. Просто обычный, старомодный макет таблицы, состоящий из элементов <table>, <tr> и <td>. В противном случае вы рискуете запутать пользователей невизуальных агентов еще больше.

Выгоды

Может показаться, что это очень нелегко, создать доступные таблицы данных в HTML. Для сложных таблиц, это так. Иногда до такой степени, когда становится почти невозможно всё сделать вручную. Хотя для простых таблиц использовать ячейки заголовков и атрибут scope совсем несложно.

Очевидно, что люди, использующие программы чтения с экрана или прочие вспомогательные технологии получат выгоду из таблиц, которые используют функции доступности. Попытка разобраться в больших и сложных таблицах, слушая их все еще может быть очень трудно, поэтому, если это вообще возможно, упрощайте таблицы.

Менее очевидным является то, что дизайнерам и пользователям графических браузеров также есть преимущество: в доступных таблицах имеется много структурных приемов, чтобы применить к ним CSS , и хороший дизайн может сделать таблицы более удобными для всех.

Контейнеры с плавающими элементами

2011-08-17T09:40:00.000-07:00

Переводила статью гуру CSS Эрика Майера, расположенную по адресу http://www.complexspiral.com/publications/containing-floats/, интересно, ничего, что она датирована 2003 годом, для того, чтобы лучше понимать поведение плавающих элементов float перевод конечно довольно-таки вольный, и потом я не спец по переводам, так что как получилось.

Как мощные, так и полезные, плавающие элементы могут использоваться для сложой компоновки. Скорее всего, вы видели что-то вроде ситуации, показанной на рисунке 1, которая выполнена с помощью всего двух контейнеров div, каждый из которых содержит плавающие изображения внутри него.

Figure 1. Это неверно!

Вероятно, это не то, что хотелось бы получить автору, но, учитывая используемые стили, это правильное расположение. Вот как мы сделали это:

div.item {
	border: 1px solid;
	padding: 5px;
	}
div.item img {
	float: left;
	margin: 5px;
	}

Вот и все, что нужно. Такой результат, как видно из рисунка 1 получается потому, что контейнеры div не "растянуть" так, чтобы они содержали плавающие изображения внутри. Взглянем на ситуацию с обратной точки зрения, так происходит потому, что плавающие изображения "торчат" внизу, на дне контейнеров div.
Это не ошибка. И также тут нет ошибки в CSS. Это на самом деле обычное поведение плавающих блоков, которое большинство авторов применяют довольно часто. Просто получается не то, чего бы они хотели, как в примере, показанном на рисунке .

Понимание проблемы

Когда во имя всего хорошего и правильного авторы хотели бы чтобы плавающие элементы торчали в своих элементах-контейнерах? Очень просто: тогда, когда это исторически самый распространенный случай для использования плавающих элементов. Посмотрите на рисунок 2, и на основную структуру разметки, которая создаёт это.

Figure 2. Плавающее изображение, обтекаемое текстом.

<p>
 ...text...
 <img src="jul31-03-sm.jpg" height="200" border="0" class="picture">
 ...text...
</p>
<p>
 ...text...
</p>

Использование плавающего текста вокруг изображения применяется давно. Именно поэтому эта способность была добавлена в веб начиная с Netscape 1.1, и вот почему CSS позволяет, использовать свойство float.[1]Но посмотрите внимательно на рисунок 2. Плавающее изображение, торчит из содержащего его элемента. Мы можем увидеть это яснее, добавив границы для абзацев <p>, как показано на рисунке 3:

Figure 3. Добавление границ к параграфам.

Итак, теперь мы можем понять, почему это важно, что плавающие элементы торчат из содержащих их элементов. Если бы они вели себя по-другому, то рисунок 2 выглядел бы, как на рисунке 4.

Figure 4. Если плавающие элементы расширены своим элементом-контейнером.

Дизайнеров бы это не устроило. Таким образом,чтобы придерживаться традиций веб-дизайна и того, чего ожидают авторы, был написан такой CSS, чтобы позволить плавающим элементам торчать из нижней части содержащих их элементов. Хотя это необходимо для нормального потока текста, это серьезная проблема, когда плавающие элементы используются для разметки.

Чистый раствор

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

<div class="item">
	<img src="w6144.gif" />
	Widget 6144<br/>
	$39.95
	<hr/>
</div>
<div class="item">
	<img src="w6145.gif" />
	Widget 6145<br />
	$44.95
	<hr />

Теперь мы применяем следующие правила для предыдущей разметки, и получаем результат, показанный на рисунке 5.

div.item hr {
	display: block;
	clear: left;
	margin: -0.66em 0;
	visibility: hidden;
	}

Figure 5.Использование горизонтального правила, чтобы увеличить расширение.

Точно зная, что hr элементы блочные, являются частью нормального потока и очищены, мы заставляем дивы "растянуться вокруг" изображений, к которым применено правило float: left.
Отрицательные верхнее и нижнее поля margin-top и margin-bottom применены для закрытия пространства, которое занимает hr. Однако этот эффект не является точным, и не всегда одинаково воспроизводится во всех браузерах. Полу-таинственный характер горизонтальных линий делает их трудно предсказуемыми . Фактическая высота hr может быть нулевой, или иметь небольшое положительное количество, или даже иметь отрицательную высоту.
Таким образом, в ситуациях, когда необходим точный эффект очистки, авторы могут использовать div вместо hr, для создания эффекта очистки, например:

div.clearer {
	clear: left;
	line-height: 0;
	height: 0;
	}

<div class="item">
	<img src="w6144.gif" />
	Widget 6144<br/>
	$39.95
	<div class="clearer">&nbsp;</div>
</div>

Установить Float фиксированным Floatом

Существует один способ, чтобы избежать чрезмерного использования структурных хаков обсуждавшихся до сих пор, хотя они все еще необходимы время от времени. В большинстве браузеров, и как это определено в CSS 2.1, плавающий элемент будет расширяться, чтобы содержать любые другие плавающие элементы, которые происходят от него. Так что в нашем примере мы можем удалить все "очищенные" элементы, а вместо этого записать эти стили:

div.item {
	float: left;
	border: 1px solid;
	padding: 5px;
	width: 60%;
	}
div.item img {
	float: left;
	margin: 5px;
	}

Обратите внимание, что мы сделали плавающими оба изображения и div-элемент. Установить ширину контейнера div следует больше, чем 50%, тогда мы гарантируем, что они никогда не будут рядом друг с другом, но вместо этого разместятся друг под другом. Это результат, показанный на рисунке 6.

Figure 6. Использование плавающего элемента, чтобы растянуться вокруг дочерних плавающих элементов.

Этот способ, очевидно, проще и с точки зрения разметки и стиля. Тем не менее, хаки , которые обсуждались до сих пор все еще полезны. Предположим, вы хотите поставить некоторый поясняющий текст под элементы. Для того, чтобы сохранить текст из плаващих элементов float: right от предметов, нам нужно вставить уловки для очистки. Это приведет нас к созданию такой разметки, как следующая , которая показана на рисунке 7.

<div class="item">
	<img src="w6144.gif" />
	Widget 6144<br/>
	$39.95
	<div class="clearer">&nbsp;</div>
</div>
<div class="item">
	<img src="w6145.gif" />
	Widget 6145<br />
	$44.95
</div>
<div class="clearer">&nbsp;</div>
<p>Widgets are sold on an "as is" basis without
warranty or guarantee.</p>

Figure 7. Плавающие элементы и хаки обрели желаемый макет.

Очищенный див эффективно выталкивает нормальный поток вниз, заставляя любое следующее содержание течь после очищеных элементов, и поэтому после плавающего дива.
Потенциальный недостаток использования состоит плавающих элементов в том, что вы позволяете браузерам последовательно интерпретировать расположение нескольких вложенных плавающие элементы.Ситуация становится более хрупкой, если эти плавающих элементов являются частью более сложной компоновки, возможно, с использованием плавающих элементов , позиционирования, или таблиц. Это не означает сказать, что такие макеты невозможны. Они могут, однако, включать в себя немало методов проб и ошибок, чтобы избежать неясных плавающих и других ошибок макета, которые могут таиться внутри рендеринга двигателя.

Резюме

Поняв, как плавающие элементы float и нормальный поток связаны между собой, и поняв то, как очистка может использовать для управления нормальным потоком вокруг плавающих элементов, авторы могут использовать плавающие элементы, как очень мощный инструмент макета. Потому что плавающих элементов не были первоначально предназначены для использования в верстке, некоторые хаки, могут потребоваться, чтобы заставить их вести себя как положено. Это может включать плавающих элементы, которые содержат плавающие элементы, "очищенные " элементы, или сочетание того и другого.
Заглядывая в будущее, может появиться и разнообразие предлагаемых улучшений CSS, которые позволили бы автору заявить, что элемент должен быть растянутым , чтобы содержать любые другие плавающие элементы внутри себя. Очевидно, будут приветствоваться дополнения в CSS, но на момент написания статьи, поддержка таких возможностей, скорее всего, должна ждать очень долго..

[1]Термин «плавающий элемент» относится к способу, которым элемент плавает в сторону и вниз, как описано в оригинале "дополнений в HTML 2.0" документ, который сопровождается выпуском Netscape 1.1.

Вот я только не поняла, почему нельзя для очищающего div.clearer использовать свойство CSS clear: both. Или это одинаково, что и применяемое здесь clear: left; только очищает сразу с обоих сторон.

Англо-русский веб-словарь

2011-08-13T08:33:00.000-07:00

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

all-image-based tabs - закладки на основе растровых изображений

anchor – ссылка

block-level elements - блоковое отображение, блочный элемент

blocky rectangles of color -цветные прямоугольники

border disappears for the current tab - текущая закладка без обводки

box – блок, прямоугольник

color blending - переходы цвета

complex construction – сложная конструкция
corner - вершина(а angle - угол)

Creative shapes – причудливые формы

“current” tab - текущая закладка

default – значение

everything inside will be the same – единство внешнего вида

flat colors - одноцветная заливка

flexible interface components - гибкие элементы интерфейса

floats –плавающая модель

gap - пробел

inline box - строчная модель

lists styled as tabs - списки с дизайном в виде закладок

markup – код

multiple nested tables – многократно вложенные таблицы

outline – обводка

page layout - композиция страницы

tab – закладка

tabbed navigation - навигация на основе закладок

text-as-image navigation - навигация на основе растрированного текста

text-embedded images -растрированный текст

Text resizing - Масштабирование текста

Статистика об использовании и доступе

2011-08-11T10:44:00.000-07:00

W3C отслеживает множество регулярно обновляемой статистики об использовании и доступе:

http://www.w3schools.com/browsers/browsers_stats.asp информация о статистике браузеров;
http://www.w3schools.com/browsers/browsers_os.asp полный расклад по операционным системам;
http://www.w3schools.com/browsers/browsers_display.asp новейшая информация о разрешениях экранов.

Правда о пикселях

2011-08-08T09:48:00.003-07:00

Недавно я задавалась вопросом, относительными или абсолютными являются пикселы. Истина открылась мне :))
Я сейчас читаю книгу Дэна Седерхольма "Пуленепробиваемый web-дизайн". Там как раз об этом говорится.
"В техническом аспекте пиксель является относительной единицей измерения, связанной с разрешением устройства, отображающего или печатающего текст. Например, фактический размер пикселя зависит от того, просматривается ли текст на маленьком мониторе или распечатан на странице с другими элементами. (Более подробная информация приведена на странице http://www.w3.org/TR/CSS2/syndata.html#pixel-units)."
Попробую перевести.
"Абсолютные единицы измерения фиксированы по отношению друг к другу. В основном они полезны, когда известны физические параметры устройства вывода. Абсолютные единицы включают в себя физические единицы (в, см, мм, pt, пс) и пиксели:

in(дюйм)1 дюйм равен 2.54см.
sm см: сантиметры
mm мм: миллиметры
pt пт точка, которая используется в CSS равна 1/72 дюйма.
pc: пики - 1пика равна 12pt.
px пиксели - 1px равен 0.75pt.

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

Заметим, что если единицей измерения является пиксель, физические единицы могут не соответствовать их физическим величинам. Либо, если единицей является физическая единица, пиксель может не отображаться на целых числах пиксельных устройств.

Отметим, что это определение пиксельных и физических единиц отличается от предыдущих версий CSS. В частности, в предыдущих версиях CSS пиксельные и физические единицы не были связаны с фиксированным соотношением: физические единицы всегда были привязаны к их физическим измерениям в то время как пиксель варьировался. (Это изменение было сделано, потому что слишком много существующего контента опирается на предположение о 96 dpi, а нарушение этого предположения испортит содержимое.)

Определение пикселя - это угол зрения одного пикселя на устройстве с плотность пикселей 96 dpi и расстоянием от читателя длины вытянутой руки. Для типичной длины руки, равной 28 дюймам, угол зрения, следовательно, около 0,0213 градуса. При чтении на расстоянии вытянутой руки 1px таким образом равен примерно 0,26 мм (1 / 96 дюйма).

На рисунке ниже показано влияние расстояния просмотра от размера эталонного пикселя:при расстоянии чтения 71 см (28 дюймов) размер пикселя равен 0,26 мм, а если расстояние считывания составляет 3,5 м (12 футов) , то пиксель составляет 1,3 мм.

Второе изображение иллюстрирует влияние разрешающей способности устройства на пиксель: область 1px на 1px покрыта одной точкой в устройстве с низким разрешением (например, типичный дисплей компьютера) и на той же площади покрыто 16 точек на устройстве с высоким разрешением (например, принтер).

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */

Ну теперь-то мне всё понятно про пиксели. В основном. Перевод мой,

так что могут быть и неточности.

И еще понятно, почему в разных источниках пиксели относят то к абсолютным, то к

относительным, в спецификации CSS2.1 их отнесли к абсолютным, а в более ранних

спецификациях CSS они считались относительными.

Еще о абсолютных пикселях можно почитать на сайте css-live.ru

Пиксели - относительные или абсолютные?

2011-08-02T12:00:00.002-07:00

Сбила меня с толку одна глава из книги М.Хольцшлаг про значения длины "Значения длины используются для многих свойств. Они включают три относительных и пять абсолютных значений. К относительным значениям относятся em, ex и px; к абсолютным значениям относятся pt, pc, in, mm и cm." стр.158 книга Языки HTML и CSS. То есть ясно-понятно, что в этой книге пиксели отнесли к относительным значениям.
В книге "Философия CSS дизайна" авторы- М. Хольцшлаг и Дэйв Ши на стр. 128 пиксели же наоборот, отнесли к абсолютным значениям. " Задавайте размеры в em, а не в px. ... Задание же для свойств top и left значений, выраженных в единицах em, даёт чуть больше свободы, поскольку позиция будет зависеть от размера шрифта." Здесь пиксели абсолютные значения.
В книге Стивена Шафера HTML, XHTML и CSS (5-е издание) на странице 403 "Поскольку пиксели не являются относительными единицами измерения..." Здесь пиксели абсолютные значения.
Книга Дэн Седерхольм "CSS ручной работы" стр. 175 "Но, как и в остальных случаях, мы хотим задать размер шрифта в относительных единицах, не используя фиксированных пиксельных значений..." Здесь пиксели отнесли к абсолютным единицам измерения...
Наверное, все же в первой книге какая-то странная опечатка и буду считать, что пиксели абсолютные единицы измерения.
P.S. Ответ на вопрос о пикселях в этой статье

Подключаемые модули Firefox

2011-07-29T09:39:00.000-07:00

Расширение Web Developer добавляет различные инструменты для разработчиков в веб-браузер закачать можно по ссылке https://addons.mozilla.org/ru/firefox/addon/web-developer/
EditCSS версия 0.3.7 В этом инструменте имеется набор средств для редактирования кода, обеспечивающих правку текущей таблицы стилей. Очень простой тестер. https://addons.mozilla.org/ru/firefox/addon/editcss/
CSS Validator, третья версия https://addons.mozilla.org/ru/firefox/addon/css-validator/
предлагает разработчикам набор средств, которые могут применяться для коррекции ошибок, обнаруженных на этапе проверки корректности кода CSS.
Fireburg предназначен для разработки CSS-таблиц, а не для проверки их корректности. Хотя их можно использовать и для проверки каскадных таблиц стилей благодаря возможностям изменения стилей. Для работы Firebug 1.4 требуется Firefox 3.0 или выше. И по заверениям разработчиков, Firebug интегрируется в Firefox для того, чтобы принести изобилие средств разработки на кончики Ваших пальцев, в то время как Вы путешествуете по сети.https://addons.mozilla.org/ru/firefox/addon/firebug/
А вообще вот сайт, на котором находятся подключаемые модули Firefox https://addons.mozilla.org/ru/firefox/
И одно из наилучших средств для тестирования CSS - инструмент W3C под кодовым названием Jigsaw, который доступен по адресу http://jigsaw.w3.org/css-validator/