CSS

  • 16 08.09

    Seleckis’ method vs Pixy’s method

    Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить...

    » Читать полностью » Комментарии (9)
  • 06 08.09

    Min-width и max-width в IE6 с помощью expression

    Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины,...

    » Читать полностью » Комментарии (7)
  • 31 07.09

    «Резиновое» поле ввода в форме

    Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие...

    » Читать полностью » Комментарии (22)
  • 28 02.09

    Строчная кнопка как кнопка submit

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

    » Читать полностью » Комментарии (15)
  • 02 02.09

    Cтрочная кнопка как ссылка

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

    » Читать полностью » Комментарии (13)
  • 14 01.09

    Списки с разделителями между элементами

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

    » Читать полностью » Комментарии (9)
  • 19 11.08

    Графические маркеры у списков

    Не сказать, что это новшество, но поскольку часто спрашивают… Такие простые вещи, которые, казалось бы, должны решаться на уровне браузера в итоге выглядят убого. Нет, в браузерах сделанных на совесть выглядит всё достаточно неплохо, но правда не гибко,  но Opera и IE располагает маркеры выше, чем нужно. Все, кто знает об этих проблемах с маркерами, те забыли CSS-свойство list-style-image...

    » Читать полностью » Комментарии (8)
  • 16 10.08

    Закругленные углы без использования картинок

    Не мне вам рассказывать какая это проблема для верстальщика. Начиная от соблюдения семантики в написании HTML кода, продолжая валидностью в CSS и заканчивая подгрузкой JavaScript, все спотыкается об него — об Тот, про который не хочется не просто говорить, но, самое главное, видеть и знать, что он существует. Но начнем с самого хорошего. Картинки против CSS Когда можно обойтись инструкцией CSS —...

    » Читать полностью » Комментарии (5)
  • 26 05.08

    Reset CSS

    Написал свой Reset, который буду использовать в web-проектах. Конечно по мере исследований он будет дополняться. Раньше использовал известный ресет Эрика Мейера. Итак: html,body,address,blockquote,div,p,pre,h1,h2,h3,h4,h5,h6,hr, /* блочные элементы */ dd,dl,dt,ul,ol,li, /* списки */ a,abbr,acronym,b,big,br,cite,code,del,dfn,em,i, /* строчные элементы...

    » Читать полностью » Комментарии (40)
  • 24 05.08

    Горизонтальный разделитель <hr />

    Существует элемент <hr />. Существует он для логического разделения блоков текста. Используется в том случае, если нужно разделить некоторый текст, а подзаголовок неуместен или необязателен. Именно поэтому следует использовать именно этот элемент, а не заменители, на подобие <div class="hr"></div> Всемирно известная проблема (я говорю об MS IE) отображает горизонтальный...

    » Читать полностью » Комментарии (20)
  • 15 05.08

    5 советов верстальщику

    Стартуем эстафету среди специалистов по вёрстке! Условия: Речь идёт о html/xhtml/css вёрстке. Передавать эстафету нужно другому блоггеру только в том случае, если вы уверены, что он действительно в этом разбирается. Не используйте в качестве советов элементарные правила html/xhtml/css. Особенно приветствуются хитрости исправляющие баги в IE без использования хаков. Мало рассказать о...

    » Читать полностью » Комментарии (33)
  • 09 04.08

    Дизайн текста 3.5: Вложенные списки, графические маркеры

    Хочу напомнить (чтоб не было лишних вопросов), что упомянутые в статьях «Дизайн текста» элементы HTML используются для стандартного способа отображения содержимого. Здесь не рассматриваются варианты нестандартной вёрстки страницы с помощью этих элементов. Вложенные неупорядоченные списки В прошлой статье, мы рассмотрели вариант размещения списка приближённого к предыдущему абзацу, для того,...

    » Читать полностью » Комментарии (11)
  • 20 03.08

    Дизайн текста 2: Цитаты

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

    » Читать полностью » Комментарии (10)
  • 10 03.08

    IE8 не проходит Acid2 тест

    Но уже гораздо лучше. Радует тот факт, что в M$ зачесались и стали работать в направлении поддержки стандартов. В особенности это касается правильного отображения инструкций CSS 2.1. Правда, есть косяки с отображением png. То ли он болезненно относится к экспрешенам в CSS, то ли к собственным фильтрам. Примечательно, что IE8 имеет возможность включить эмуляцию IE7 (не забудьте после...

    » Читать полностью » Комментарии (19)
  • 30 01.08

    Позиционирование картинок для галереи

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

    » Читать полностью » Комментарии (34)
  • 18 01.08

    Градиентный текст с помощью CSS

    Иногда бывают дни, когда не хватает времени, иногда бывают моменты, когда не хочется ничего выдумывать. Тогда приходят спасительный копи-пэйст! В этом посте я не буду ничего исследовать, придумывать, обучать и выбирать. Просто поделюсь с вами ссылкой на замечательный пост дизайнера Nick La. Nick получит на свой пост очередной трекбек, а расслаблюсь ещё на пару дней. Итак, если вы хотите...

    » Читать полностью » Комментарии (11)
  • 02 01.08

    Иерархический список с помощью jQuery

    Написал очень простой и функциональный скрипт организации иерархического списка. Но смысл заключается не только в скрипте, но и в правильной вёрстке. HTML Вот из такого небольшого обычного списка мы сделаем раскрывающийся иерархический список. Модель статусных групп (классов) Л. Уорнера Высший класс Верхний-высший класс, включал так называемые старые семьи. Низший-высший...

    » Читать полностью » Комментарии (19)
  • 18 12.07

    Метод Pixy?

    Размышлял о методе подстановки картинок с помощью CSS. Так называемый метод «pixy»(кому пришло в голову такое странное название?) сейчас во всю используется в css-вёрстке вместо картинок. Смысл в том, чтобы в тэг-контейнер поместить альтернативный текст, а сразу за ним пустой тэг. Этот пустой тэг будет играть роль картинки, т. е. с помощью CSS мы накладываем его сверху на текст. Если у бразуера...

    » Читать полностью » Комментарии (34)
  • 04 12.07

    Merapi.lv, типографика и так, по мелочи.

    В последнее время, нет времени (Каков каламбур получился!). Поэтому почти ничего не пишу на блоге. Но я буду стараться выкрасть минутку-другую записать предложенице. Всё чаще и чаще задумываюсь заняться микроблоггингом. Часто стал замечать, что некоторые слова и словосочетания говорю на латышский манер, например: «Мне нет этого файла», а не «У меня нет этого файла». Хотя, с латышским у меня плохо...

    » Читать полностью » Комментарии (14)
  • 29 11.07

    Разный фон на одном уровне в псевдорезиновой вёрстке

    Терминология: Разный фон на одном уровне — слева один, справа другой. Не ломается в окнах разного размера. Управляемая коллизия. псевдорезиновой вёрсткой я называю, когда фоновая часть растягивается, а контентная центрируется. Задача: Написать CSS так чтобы справа повторялась одна текстура, а слева — другая. По центру была контентная часть или переходный для фона...

    » Читать полностью » Комментарии (8)
  • 14 09.07

    Универсальное графическое меню

    Учтя замечания моих уважаемых комменаторов к посту о графическом меню выкладываю код и исходник обновлённого варианта графического меню. ul#mainmenu, ul#mainmenu li, ul#mainmenu li a{ margin: 0; padding: 0; height: 32px; display: block } ul#mainmenu, ul#mainmenu li{ list-style: none } ul#mainmenu li{ float: left; position: relative } ul#mainmenu li a{ text-align: center; width:...

    » Читать полностью » Комментарии (0)
  • 11 09.07

    Скажи "НЕТ" <img> в вёрстке

    Тэг IMG не очень удобен в качестве "кубика" нашего "сайтоконструктора" поскольку содержит некоторые ньюансы расположения и взаимодействия c другими "кубиками". Конечно-же мы можем представить <img> как блочный элемент, для этого всего лишь нужно в css описании элемента указать свойство display: block, в этом случае тэг унаследует свойства блочного тэга (div). Но тогда какая уж тут логика?...

    » Читать полностью » Комментарии (23)
  • 17 05.07

    CSS фильтры (хаки)

    Когда ты верстаешь бессонными ночами, когда в Осле дивы не хотят становиться рядом, а спускаются вниз, когда Огнелис расширяет расширяет див складывая его ширину и паддинг, когда в ie7 появляются непонятные вертикальные расстояния, когда Лис с Оперой не хотят продливать бэкграунд по всему контенту, когда ie6 не хочет... да он вообще ничего не хочет делать! Приходят на выручку они - CSS...

    » Читать полностью » Комментарии (3)
  • 26 04.07

    Seleckis.lv в IE7

    Обратил внимание что в IE7 мой блог справа немного перекашивает. Вспоминается известная диаграмма работы web-мастера. Часто такое бывает из-за line-height и font-size. IE видите ли оставляет место хотябы для одной строчки текста в div'е. Поэтому нужно писать в css для этого div'a: line-height: 0px; font-size: 0px; А внутренним элементам в свою очередь уже надо возвращать эти значения, иначе...

    » Читать полностью » Комментарии (3)
Google     
01 03.10

Международная выставка образования «Школа-2010»

С 25 по 28 февраля в Международном выставочном центре «Кипсала» прошла ежегодная выставка «Школа-2010», в которой Школа веб-технологий участвовала в первый раз. В первый раз участвовать в таких глобальных мероприятиях было трудно, особенно первый день, но мы выдержали и добились определённого успеха. Как минимум «засветились» среди высших (и не очень) учебных заведений, как Школа предлагающая профессиональное образование в сфере веб-технологий. Как максимум, нас запомнили и проявили интерес к нашей Школе сотни (если не тысячи) людей, а несколько человек сразу записалось на веб-дизайн, мультимедиа дизайн, веб-программирование и сетевое и веб-администрирование. Кроме того, в качестве успеха мы можем засчитать многочисленные предложения по сотрудничеству от владельцев предприятий, государственных организаций и даже высших учебных заведений. Фотографии и видео можно посмотреть соответственно на фейсбуке и на ютубе. Ну а в последний день выставки Туриба вместе с...

Категории: События | Фото | ВидеоТэги: » Читать полностью » Комментарии (2)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
23 11.09

Первая проба записи видео-лекций по PHP в Школе веб-технологий

Решили попробовать записывать лекции Школы веб-технологий на видео. Обработка занимает к сожалению больше времени, поэтому показываю только первые 10 минут (после монтажа) с основами синтаксиса. Сама лекция предназначена для тех, кто уже начал изучать PHP. Так сказать для закрепления материала. Преподаватель Арвид Годюк, очень волнуется, уж не забрасывайте помидорами, а вот оператора (меня) можете забросать: штатива нет, руки дрожат, поставил было на полку шкафа, так вдруг фокус стал пропадать. Не профессионал, что делать… Первая попытка даёт старт серии лекций по разным веб-технологиям.

Категории: Видео | PHP | КурсыТэги: » Читать полностью » Комментарии (9)
02 09.09

Новый amigos.lv

Сегодня была запущена новая социальная сеть Латвии amigos.lv, к разработке которого я имею непосредственное отношение (лого, дизайн и вёрстка). Особенности данного проекта изложены на главной странице (если пользователь не залогинен или не зарегистрирован). Особо хочу обратить внимание на следующий функционал: Ленты событий — всё что создаётся вашими друзьями, комментируются ваши записи в блоге и фотографии, пишутся ответы на ваши вопросы, всё это отражается в соответствующих лентах. Ответы — формат QNA с возможностью создания вопросов, опросов и фотовопросов, а отвечать можно только один раз. Интересы — это тэги, на которые можно подписаться и получать всё новое связанное с интересующими вас темами. Оценки — всё оценивается и за действия получаются оценки, причём за счёт хитрой системы накрутка фактически исключена. В общем, пробуйте. Хотелось бы знать ваше мнение, только конструктивно, без фанатизма.

Категории: События | ЛогоТэги: » Читать полностью » Комментарии (10)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (12)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (22)
28 07.09

Элементы управления в веб-сервисах

В продолжение предыдущей статьи посвящённой организации навигации в социальных сетях, пройдусь по другим темам. Существуют следующие виды элементов управления в веб-проектах: Контент-ссылки Контролы Контент-ссылки — это те ссылки которые позволяют перейти на страницу с каким-либо содержимым. Они могут быть следующего вида: Ссылки Иконки Ссылки с иконками Кнопки Табы Навигационное меню Контролы — это те ссылки, которые подразумевают какие-либо действия: добавить, удалить, изменить, искать, отправить и т. д. Внешний вид может быть: Ссылки Иконки Ссылки с иконками Кнопки И кстати говоря, кнопки могут быть тоже разные: С текстом С иконкой С текстом и иконкой Иконка сверху Иконка слева Иконка справа Также контролы можно классифицировать по эмоциональному признаку: Позитивные Негативные Нейтральные Бонусы Их может быть и больше, но эти основные. Следующим примером иллюстрируются различия этих контролов по...

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (7)