Архив рубрики ‘html/css’ Category

Почему так важен DOCTYPE

Воскресенье, Ноябрь 4th, 2007

 

Fixing your site with the right DOCTYPE
автор: 12 April 2002 Джеффри Зельдман (Jeffrey Zeldman)
перевод: Александр Качанов

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

Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.

Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега. (далее…)

отступ в начале абзаца с помощью CSS

Воскресенье, Сентябрь 23rd, 2007

Часто замечал, что многие для того чтобы сделать отступы для «красной строки» в начале абзаца, ставят либо невидимые картинки, либо неразрывные пробелы ( ). Но это, кроме того что крайне неудобно, но и не правильно, т.к. есть для этого специальное средство! ;) Итак:

1. создаем стиль

.mytext p {text-indent: 20px;}

2. добавляем этот стиль во все наши div-ы, внутри которого параграфы <p> должны выводиться с отступами:

<div class=»mytext» >
<p>Мой текст, бла-бла-бла…</p>
</div>

3. ощущаем легкое чувство гордости что все работает как нужно.

Верстка на дивах

Воскресенье, Сентябрь 23rd, 2007

Сайтег с примерами: http://www.pmob.co.uk/temp/3colfixedtest_4.htm (3 колонки)

PS: Киря, обрати внимание.

Javscript Features — the DOM

Среда, Июль 11th, 2007

Modifying the DOM

The DOM model consists of a hierarchy of nodes, as well as being able to identify a particular node by name or id, Javascript can navigate the hierarchy in terms of parent and child nodes. The following diagram illustrates the relationships for the HTML fragment

<p class=insert id=para1 onclick="modifylast('para1')">
Here is
<i>
some text to
</i>
be clicked on
</p>

(далее…)

Более 40 полезных скриптов (Tooltips) AJAX, JavaScript, CSS.

Четверг, Июнь 21st, 2007

На английском, но думаю, все прозрачно и понятно:

Источник: http://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/

Web users love informative clues. Whatever questions and misunderstandings might occur — delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips — used correctly, they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. E.g., unclear input fields in web forms are perfect examples of a situation you might be willing to use a tooltip for.

Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. To install and use the script, it’s often enough to include the JavaScript library in the source code and provide the hint as plain text within the “title”-attribute. Sometimes you can also insert URLs, images, tables and further elements — basically, it can be almost everything you’d ever wanted it to be.

We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we’ve stumbled upon during our search. It gives many useful pointers, but we’ve managed to find some more. You might be willing to use Koller’s post as a quick reference for your search.

Let’s take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. It’s nice to have them all in one place, once you need them. It’s nice to be able to find them, once you don’t have time to search for them. (далее…)

Favicon — как сделать иконку (favicon.ico) для своего сайта или блога

Вторник, Апрель 17th, 2007

favicon.gif

Чтобы иконка Вашего сайта отображалась в результатах поиска Yandex и в тулбаре браузера нужно сделать вот что:

1. Создать изображение в формате .gif или jpg. Точный размер значения не имеет, но пропорции сторон должны быть одинаковыми, например 150х150 пикселей.

2. Для создания картинки в формате .ico я использую сервис www.favicon.ru. Кроме иконки для поиска и тулбара там можно сделать иконки для Рабочего Стола. Поэтому изображение должно быть не меньше чем 44х44 пикселя. Если иконка получилась немного «кривой» — можно войти в специальный редактор и исправить.

3. Загрузите полученный файл в корневую директорию вашего сервера.

4. В заголовках страниц между тэгами, прописать мета-тэги которые приводятся на сайте www.favicon.ru

Все готово! Наслаждайтесь новым атрибутом персонализации вашего ресурса!

Библиотека сайтостроительства

Пятница, Апрель 6th, 2007

 Замечательная подборка статей на темы:

Новое в разделе
Управление web-проектами
Web-дизайн
Web-программирование
CSS
HTML/DHTML
Web-графика
Adobe Photoshop
Flash
Оптимизация сайтов
Раскрутка сайта
Интернет-реклама
Рассылка
Инструменты вебмастера
Контент для сайта
Web-студии

Полезные статьи про верстку на CSS (div)

Пятница, Апрель 6th, 2007

Семантическая сеть, основанная на микроформатах

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

Микроформаты здесь и сейчас

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

Микроформаты

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

XHTML+CSS. Преимущества очевидны

В статье автор знакомит читателя с неоспоримыми преимуществами, которыми обладает CSS-верстка. А уж выводы каждый должен сделать для себя сам. Итак, 15 доводов в пользу перехода на XHTML+CSS.

CSS. Печатаем со стилем

«Версия для печати» — такие ссылки ведут на страницы с идентичным содержанием первостепенного материала оригинальной страницы, но только предназначены они для того, чтобы выводить содержимое на бумагу.

Резиновая раскладка

После статьи с примером раскладки в CSS очень многие спрашивали, как сделать ее тянущейся. Рассмотрим два примера — резиновой трехколоночной верстки и использование «плавающего» фона для колонок.

Ответы на часто задаваемые вопросы по XHTML и HTML

Зачем нужен XHTML? Не достаточно ли HTML? В чем преимущества XHTML перед HTML? Можно ли просто добавить объявление XML в начало существующего документа HTML? Можно ли смешивать код HTML 4.01 и XHTML? Ответы на эти и другие вопросы в сегодняшней статье.

Различное отображение HTML документов в браузере зависит от объявленного Doctype

При использовании одних и тех же HTML-тегов в старых кривых браузерах и современных, придерживающихся стандартов (Mozilla и браузеры на его основе, Mac IE 5, Windows IE 6, Safari, Opera 7+ и Konqueror 3.2) можно обнаружить два основных режима отображения web-страницы.

Чем отличаются id и class

Один из самых частых вопросов в процессе знакомства с новыми стандартами — в чем разница между атрибутами HTML-элементов “id” и “class”. Ведь эффект, вроде бы, одинаковый. На самом деле отличий полно.

Пример верстки CSS

Настало время после долгой нудной теории верстки CSS’ом наконец уже что-нибудь осмысленное сверстать. В этой статье я покажу от начала до конца один из вариантов верстки трехколоночной страницы.

XHTML, говорите?

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

Semantic web. Заметка о логичной и нелогичной верстке

В прошлых материалах мы рассматривали общие вопросы разработки веб-сайтов, сегодня — тема для веб-разработчиков, дизайнеров, верстальщиков, всех, кто создает веб-страницы, веб-сайты — для себя, для пользователей, для заказчиков ли, для поисковых машин…

Раскладка в CSS: float

Судьба свойства «float» в CSS слегка похожа на судьбу тега «table» в HTML: ни то, ни другое вообще не задумывалось как средство создания колонок и вообще раскладки элементов.

Границы и отступы в потоке

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

Раскладка в CSS: поток

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

Раскладка в CSS: позиционирование

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

CSS’ные боксы

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

Любой шрифт на вашем сайте. sIFR

разработка метода замены шрифтов (sIFR) достигла весьма приличного уровня и заслуживает внимания. Принцип достаточно прост – JavaScript заменяет нужные (X)HTML элементы на Flash, который содержит в себе необходимый шрифт.

Посещенные ссылки. Visited links

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

«Компот» и «мухи» веб-разработки

В этой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследовались при их написании. То есть, эта статья о том, «что это» и «зачем это», а не «как это».

Все статьи здесь: http://www.i2r.ru/static/476/

CSS. Печатаем со стилем

Пятница, Апрель 6th, 2007

Автор: Никита Вакорин
Источник: Umade.Ru
25.03.06

Часто на интернет-страницах встречаются ссылки с текстом “версия для печати”. Это словосочетание говорит само за себя. Такие ссылки ведут на страницы с идентичным содержанием первостепенного материала оригинальной страницы, но только предназначены они для того, чтобы выводить содержимое на бумагу. Отличный способ это делать — использовать CSS, который отлично справляется с выводом веб-страниц вашего сайта на печать.

Помню, когда я впервые пытался распечатать веб-страницу. Также помню, что мне этого не удалось сделать. Я испортил около 10 листов. На бумаге появлялась только одна четвёртая часть страницы. Мне даже думалось, что виновник моих неудач — это принтер, но в настоящее время я понимаю, что виновником был тот самый веб-сайт, дизайн которого не был рассчитан на пользователя, которому может понадобиться распечатать страницу. (далее…)

Подготовка к печати html-страницы при помощи CSS

Пятница, Апрель 6th, 2007

В печать!

CSS. Going to Print
автор: 10 May 2002 © Eric Meyer & A List Apart
перевод: Максим Россомахин и Александр Качанов

ОНИ ВАМ УЖЕ ВСТРЕЧАЛИСЬ: ссылки, говорящие «версия для печати» или что-то подобное. Всякий раз, щелкая по этим ссылкам, вы получаете особый документ, содержащий всё ту же информацию, но с другим расположением элементов и, возможно, другой разметкой.

Это значит, что кто-то вручную или автоматически с помощью скрипта взял исходный документ и, сняв с него всё лишнее, создал его копию, более удобную для печати. Может быть подобной работой приходилось заниматься и вам.

Решение — таблицы стилей для печати

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

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