-
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
«Резиновое» поле ввода в форме
Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие...
» Читать полностью » Комментарии (23) -
28
02.09
Строчная кнопка как кнопка submit
Требуется создать строчную кнопку submit неопределённой ширины с фоновой картинкой. Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками. Стандартным способом мы можем указать фон для кнопки, добавить...
» Читать полностью » Комментарии (16) -
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, /* строчные элементы...
» Читать полностью » Комментарии (41) -
24
05.08
Горизонтальный разделитель <hr />
Существует элемент <hr />. Существует он для логического разделения блоков текста. Используется в том случае, если нужно разделить некоторый текст, а подзаголовок неуместен или необязателен. Именно поэтому следует использовать именно этот элемент, а не заменители, на подобие <div class="hr"></div> Всемирно известная проблема (я говорю об MS IE) отображает горизонтальный...
» Читать полностью » Комментарии (22) -
15
05.08
5 советов верстальщику
Стартуем эстафету среди специалистов по вёрстке! Условия: Речь идёт о html/xhtml/css вёрстке. Передавать эстафету нужно другому блоггеру только в том случае, если вы уверены, что он действительно в этом разбирается. Не используйте в качестве советов элементарные правила html/xhtml/css. Особенно приветствуются хитрости исправляющие баги в IE без использования хаков. Мало рассказать о...
» Читать полностью » Комментарии (36) -
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 получит на свой пост очередной трекбек, а расслаблюсь ещё на пару дней. Итак, если вы хотите...
» Читать полностью » Комментарии (27) -
02
01.08
Иерархический список с помощью jQuery
Написал очень простой и функциональный скрипт организации иерархического списка. Но смысл заключается не только в скрипте, но и в правильной вёрстке. HTML Вот из такого небольшого обычного списка мы сделаем раскрывающийся иерархический список. Модель статусных групп (классов) Л. Уорнера Высший класс Верхний-высший класс, включал так называемые старые семьи. Низший-высший...
» Читать полностью » Комментарии (19) -
18
12.07
Метод Pixy?
Размышлял о методе подстановки картинок с помощью CSS. Так называемый метод «pixy»(кому пришло в голову такое странное название?) сейчас во всю используется в css-вёрстке вместо картинок. Смысл в том, чтобы в тэг-контейнер поместить альтернативный текст, а сразу за ним пустой тэг. Этот пустой тэг будет играть роль картинки, т. е. с помощью CSS мы накладываем его сверху на текст. Если у бразуера...
» Читать полностью » Комментарии (36) -
04
12.07
Merapi.lv, типографика и так, по мелочи.
В последнее время, нет времени (Каков каламбур получился!). Поэтому почти ничего не пишу на блоге. Но я буду стараться выкрасть минутку-другую записать предложенице. Всё чаще и чаще задумываюсь заняться микроблоггингом. Часто стал замечать, что некоторые слова и словосочетания говорю на латышский манер, например: «Мне нет этого файла», а не «У меня нет этого файла». Хотя, с латышским у меня плохо...
» Читать полностью » Комментарии (14) -
29
11.07
Разный фон на одном уровне в псевдорезиновой вёрстке
Терминология: Разный фон на одном уровне — слева один, справа другой. Не ломается в окнах разного размера. Управляемая коллизия. псевдорезиновой вёрсткой я называю, когда фоновая часть растягивается, а контентная центрируется. Задача: Написать CSS так чтобы справа повторялась одна текстура, а слева — другая. По центру была контентная часть или переходный для фона...
» Читать полностью » Комментарии (10) -
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)
