XHTML+CSS+DOM слайд-шоу 2

В сентябре прошлого года я показал, как с помощью JavaScript можно представить XHTML документ в виде последовательности слайдов. По прошествии некоторого времени эта идея получила дальнейшее развитие. Предлагаю новую версию XHTML+CSS+DOM слайд-шоу.

И еще раз о написании CSS

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

Динамические выпадающие списки

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

Исследование высоты BODY

Небольшое исследование поведения элемента BODY в различных браузерах. Отступы от границ окна (margin, padding). Высота BODY и ее изменение в зависимости от высоты контента в Internet Explorer 6, Firefox 1.5, Opera 8.

Использование URL-значений для указания свойства cursor

Браузеры Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживают URL-значения для свойства cursor (CSS2 cursor property).
Это дает возможность использовать в качестве указателя мышки любое изображение, любой графический файл, который может показать Gecko. Как это выглядит? Насколько кроссбраузерно?

Пример формы без таблицы

Чаще всего форму заключают в таблицу. Получается громоздкая и не достаточно гибкая HTML-конструкция. Однако, довольно легко сделать красивую форму без таблиц, используя CSS.

Простые примеры шаблонов HTML+CSS

Всего одна простая HTML-разметка и много вариантов ее отображения на веб-странице. Просто добавь CSS!

Перемещение блоков по веб-странице.

С помощью DOM можно без особого труда перемещать целые фрагменты XHTML-документа и, таким образом, изменять порядок отображения элементов в окне браузера не зависимо от порядка загрузки веб-страницы.

Как прижать footer к низу окна браузера с помощью CSS?

В CSS верстке есть пара способов прижать footer к низу окна браузера, если контента на странице не очень много.

Основные css свойства с примерами

Все на одной странице: правила написания каскадных таблиц стилей (CSS); каскадность CSS; единицы измерения; свойства текста; свойства цвета и фона; свойства блока; списки; позиционирование; псевдоклассы и псевдоэлементы…

Подбор цвета on-line

Кроссбраузерный on-line подбор цвета (ColorPicker). В результате получаем шестнадцатиричный RGB код выбранного цвета. Использованы: XHTML1.1+JavaScript+CSS.

XHTML+CSS+DOM слайд-шоу

Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.

Пример фотогалереи с использованием DOM

Фотогалерея, в которой увеличенные изображения можно выбирать без перезагрузки всей html-страницы. В примере используется Объектная модель документа(DOM), минимум XHTML-кода, немного CSS и JavaScript. Работает в Firefox1.02+, Opera7+, Internet Explorer5+, в других браузерах не проверял.

max-width в Internet Explorer

Как известно, IE6(и более ранние версии) не очень дружит с современными стандартами. О многих свойствах CSS2 этот браузер и не догадывается.

XHTML1.0 Strict, Flash и веб-стандарты

Маленький пример, как добавить Flash-ролик(.swf) на страницу, не покидая рамки стандартов W3C. Этот код успешно проходит валидацию и соответствует современным веб-стандартам. Его можно спокойно использовать на страницах XHTML1.0 Strict или XHTML1.1.




количество читателей онлайн и всего

18 queries 0.230 seconds.