Архив рубрики «HTML и CSS»

Проверить верстку дизайна в разных браузерах

Дата: 25.08.2010
Категории: HTML и CSS Дизайн

Браузеры

При верстке дизайна не обойтись без процедуры проверки его в популярных браузерах, таких как Opera, Firefox, Chrome, Safari и конечно же Internet Explorer.

С Opera, Firefox, Chrome и Safari проблем никаких нет, их можно без проблем скачать и установить, а вот с IE будут. Проблема заключается в том, что шестая, самая «плохая» версия IE у многих отсутствует (например, установлена Windows Vista, или Windows 7, или же просто обновились до новой версии).

Internet Explorer 6 нету а проверить просто необходимо (как минимум в 6 версии). Я искал портативную версию Internet Explorer 6, но к сожалению она у меня не запустилась. Я нашел другой путь.

Прочитать остальную часть записи »

Почему в IE6 размеры больше?

Дата: 9.07.2010
Категории: HTML и CSS Дизайн

Как известно всем, кто верстал более или менее достойные дизайны, IE6 неправильно читает верстку. В частности, иногда, при создании отступа такого типа:

.ClassName
{
    margin-left: 20px;
}

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

Прочитать остальную часть записи »

Краткий обзор моих последних работ

Дата: 22.05.2010

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

PNG в IE6 — Еще одно решение

Дата: 30.04.2010
Категории: HTML и CSS Дизайн

Как известно Internet Explorer 6 неправильно отображают файлы формата PNG 24bit. Фон изображения будет отображаться серым. PNG с альфа-каналами позволяет значительно улучшить внешний вид сайта. Проблема конечно же решаема. Пару решений я описывал в аналогичной статье — PNG в IE 6.

Представленные решения неплохие, но есть несколько недостатков, среди которых невозможность «замостить» маленькое изображение.

Решается проблема следующим образом:

Прочитать остальную часть записи »

Выпадающее меню

Дата: 25.03.2010
Категории: HTML и CSS Дизайн

Очень часто нужно сделать выпадающее меню.

Выпадающее меню

Нам понадобится: небольшой скрипт, и дополнительная таблица стилей (можно и в существующую добавить). Все это вы найдете в примере ниже.

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

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

Прочитать остальную часть записи »

Opera — Инструмент для вебмастера

Дата: 23.03.2010
Категории: HTML и CSS Дизайн

Сегодня случайно обнаружил, что новая Opera 10.51 (да и скорее всего все последующие) предоставляет удобные возможности по просмотру и анализу кода HTML страницы. Инструмент будет удобен и полезен для веб-дизайнеров и веб-мастеров. Все что необходимо, это просто кликнуть правой кнопкой мыши на странице, и выбрать «Проинспектировать элемент».

Opera "Проинспектировать элемент"

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

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

В общем лучше один раз увидеть.

Дизайн сайта Кудо

Дата: 18.02.2010

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

Дизайн сайта Кудо

Прочитать остальную часть записи »

Дизайн сайта «Великие люди»

Дата: 25.11.2009

Пару дней назад завершил разработку дизайна для сайта «Великие люди». Вот что у меня получилось:

greatsChrome

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

PNG в IE 6

Дата: 24.10.2009
Категории: HTML и CSS Дизайн

Как известно Internet Explorer 6 и версии ниже неправильно отображают файлы формата PNG 24bit, фон изображения скорее будет отображаться серым. Это конечно же не куда не годится. PNG с альфа-каналами позволяет значительно улучшить внешний вид дизайна сайта.

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

Решение 1

Решение можно найти на официальном сайте Microsoft. Решение заключается в использовании фильтра AlphaImageLoader и добавлении в стиль следующего:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',
   sizingMethod='scale');

Но меня это решение не устроило. Opera, FireFox и другие популярные браузеры, по всей видимости, не имеют фильтра AlphaImageLoader, и не отображают изображение вообще. А если помимо этого фильтра добавить в стиль Background, то появляются проблемы в IE.

Решение 2

Это решение немножко посложнее и автора этого решения сейчас уже сложно найти.

Итак, нам потребуется прозрачный GIF размером 1?1 px. И файл с кодом pngfix.htc. Скачиваем эти файлы отсюда.

Прочитать остальную часть записи »

Стиль первого элемента в списке UL

Дата: 16.10.2009
Категории: HTML и CSS Дизайн

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

#menu ul li {
   border-top: 1px #000000 solid;
}

Хотя это и отрывок кода, но из него понятно, что над (top) каждым элементом LI списка UL будет рисоваться сплошная (solid) линия в 1 пиксель черного (#000000) цвета. Почему я выбрал именно border-top, ведь можно было бы сделать так, чтобы отделение было снизу? Да все очень просто: я, как дизайнер, решил, что для моего дизайна у последнего элемента снизу не должно быть линии  (если бы я написал border-bottom, то последний элемент был бы с чертой снизу). Таким образом, получится примерно так: Прочитать остальную часть записи »

12