15.07.2008

Opera и text-shadow (CSS)

Opera 9.5 понимает свойство CSS text-shadow. По-моему, никакие другие браузеры этого не умеют. Пример можно посмотреть на моем блоге — вверху, заголовок “Hello, robots!”.

Upd. Safari тоже умеет.

24.04.2008

Несколько версий Safari на одном компьютере

multi-safari.png

Понадобилось проверить сайт в Safari 2 на Mac — заказчик жаловался, что что-то не так отображается. А на доступном компьютере стоит Safari 3, ибо обновляется автоматически. Как быть?

Все оказалось не так уж сложно. Гораздо проще, чем несколько версий Internet Explorer для Windows.

Нашел проект Multi-Safari — версии Safari от 1.0 до 2.04. Просто скачиваются нужные версии браузера, и запускаются.

Как оказалось, Safari 2 не понимает font-size:0. Заменил на font-size: 0.001pt (не спрашивайте, зачем мне это было нужно).

Кстати, у Michel Fortin (автора Multi-Safari) есть еще интересные и полезные проекты: PHP Markdown и PHP SmartyPants, о которых я когда-то уже писал. Markdown расставляет абзацы, списки и т.д., SmartyPants — красивые тире и кавычки.

12.06.2007

Закругленные углы (1 картинка)

Еще один способ сделать закругленные углы, используя только одну картинку примерно такого вида (только гораздо длиннее):

Rounded corners

Такой способ пригодится, если дизайнер-идиот нарисовал закругленные углы большого радиуса, и делать углы без картинок будет очень муторно.

25.03.2007

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

Работающее, легко настраиваемое выпадающее меню на CSS. 4 уровня, горизонтальное/вертикальное.

http://solardreamstudios.com/learn/css/cssmenus/

Via CSS Navigation Techniques (37 entries), via 25 Code Snippets for Web Designers (Part2), via CSSBlast

21.01.2007

Индикатор активности (gif-анимация)

Ajax loading gif generator — генератор картинок, призванных символизировать, что происходит какое-то действие на сайте, например, загружаются данные.

Wait...

Loading…

Читать полностью "Индикатор активности (gif-анимация)" →

08.09.2006

Табличная верстка

Сверстал сайт таблицами и без указания doctype. Пинайте меня.

Получился компактный код, и все работает.

Отказаться от doctype пришлось ради того, чтобы прижать футер к низу экрана. Нормальные xhtml варианты упорно не желали работать в Firefox. Даже footerStickAlt. Надо будет его поковырять.

02.05.2006

Гениальная статья

Охуенно гениальная статья на сайте студии Артемия Лебедева. Интересно, для кого это пишется?

13.04.2006

Хорошая верстка?

Обсуждение на форуме “аптемизаторов”.

Из этого макета сверстана вот такая страница. Все в топике говорят — хорошо сверстано.

По моему — сверстано отвратительно.

28.09.2005

Wysiwyg — наше все?

Испытываю потребность в Dreamweaver. Дожил.

Просто надо табличку из Word в html преобразовать. Ручками что-то не хочется.

21.09.2005

Резиновое меню

А как бы сделать списком и CSS горизонтальное меню, которое растягивается по ширине, и соответственно, изменются расстояния между пунктами? Которое элементарно делается таблицей…

Layout

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

Можно упростить задачу, отказавашись от резины между пунктами меню. Не получается сделать отступ нужного размера от правого края. Точнее, можно, если указать фиксированную высоту.

Очевидно, на новом крутом блочном сайте будет меню таблицей…

14.09.2005

Font size

Music: The Meteors — Johnny Remember Me

Я только что своими руками (правой и левой), замерзшими пальцами (у меня дома пиздец, как холодно, холоднее, чем на улице) написал font size="4" Вот как я умею. Точнее, я сначала написал “font-size”, но это не заработало.

А еще я два раза за неделю видел, как для того, чтобы у абзаца сделать отступ слева, используется blockquote.

31.08.2005

Календарь

Календарь

http://www.movie.ru/archiv_news/03/feb/feb1.html

16.08.2005

Ссылки-мнемоники для символов ISO 8859-1

Хорошая таблица кодов символов.

15.08.2005

Администрация сайта ответственности не несет

Сайт оптимизирован для просмотра в Microsoft Internet Explorer. За ошибки, возникающие при просмотре в других броузерах, администрация сайта ответственности не несет.

http://www.pansport.ru/

09.08.2005

Оформление форм

Как обычно оформляют формы вида: слева название поля, справа — поле ввода? Таблицами. Что не приятно.

Надо делать по-человечески, и это просто.

Styling form fields и примеры.

Просто tab в браузере хотел закрыть, а ссылку не потерять.

08.08.2005

CSS и Internet Explorer

CSS и Internet Explorer — это удивительное сочетание. Особенно, когда имеешь несчастье проверять в разных версиях самого популярного браузера. Недавно столкнулся с такой штукой. Знал, что не получится, но стало интересно.

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

#foo + table td.bar {
color:#D94800;
}

где #foo — id заголовка, bar — class для ячейки, шрифт в которой надо покрасить.

Работает в Opera, Firefox, и… Internet Explorer 5.01. В IE 5.5 и IE 6 — не работает. Почему? Загадка.

Пришлось написать классы для таблиц, и отдельно описать.

.foo td.bar {
color:#D94800;
}

Можно было сделать проще — назначить id не заголовку, а завернуть заголовок и таблицу в div и ему указать id.

А на IE5, особенно 5.5 я часто и долго матерно ругался в процессе работы. Надо было сделать все таблицами, а не вые div+css…

29.07.2005

Мой первый сайт (1998)

More Beer Crew

Мой первый сайт. 1998 год. Размещался по адресу kostxx.webjump.com. Все как положено: фреймы, черный фон, font. Страницу про ролики я стал делать позже, осваивая верстку таблицами.

Логотип на главной странице был сделан с помощью какого-то онлайн-сервиса: вводишь текст, тебе выдают картинку со шрифтами/эффектами. Потом слегка обработан в Фотошопе.

Нашел старый диск с архивом, выложил — почти сразу все заработало. Очевидно, webjump.com работал под Windoze, так как встречаются файлы с именами в разных регистрах, и пути с бэкслэшами. Пратически ничего не исправлял, только несколько файлов перевел в нижний регистр, и убрал font size=0 на главной странице, а то невозможно было читать. Наверное, в то время мониторы имели разрешение 800×600, и такой шрифт был нормальным.

http://mbc.kost.ru

28.07.2005

Гениально!

<tr><td width=100%><hr></td></tr>

21.07.2005

Новые знания, новые умения

За последнию неделю я узнал много нового и полезного.

Я научился разделять абзацы двумя тегами br, потому что для всех элементов в CSS обнулены отступы.

Научился редактировать в Dreamweaver. Редактировать текст, а особенно вставлять из MS Word в нем удобно. Но как делать layout, я с трудом могу представить. Ничего, научусь.

Научился использовать только inline-стили.

Много интересного я узнал, многому полезному научился.

Я понял, что компактный, логичный код никому на хуй не нужен. Не зря у A List Apart на логотипе хуй.

Буду учиться верстать таблицами

Dreamweaver

Как оказалось, Dreamweaver отлично подходит для преобразования в html всякого говна в виде файлов .doc со списками, выделением жирным и прочей фигней. И даже код вполне приличный.

20.07.2005

Чудеса верстки

А как вам такое использование CSS: делаем все ссылки без подчеркивания и такого же цвета, как основной шрифт. А потом нам захотелось (и не один раз!) сделать ссылку зеленой и с подчеркиванием. Все просто, в коде страниц пишем:

<a href=# style='color:#005C54;'><u>Текст ссылки</u></a>

14.07.2005

Как не надо делать сайты

Есть крупная компания. “Комиэнерго”. Уставный капитал — 4 603 128 852 рубля (четыре миллиарда). У нее есть сайт. Сайт регулярно, иногда несколько раз в день, обновляется. Сдуру согласился заниматься его обновлением, за небольшие деньги.

Все страницы статичные, даже без инклудов. Copy-paste, edit, upload… Если захочется что-то глобально поменять, то придется не сладко, ибо страниц этих не мало. В корне сайта лежит около 500 файлов.

Зачем-то на сайте огромная горизонтальная полоса прокрутки.

Меню, включая баннеры снизу, полностью формируется с помощью JavaScript. Так что, в принципе, меню можно легко изменить. Правда, оно может не отображаться….

Тот, кто делал сайт, познал огромные возможности CSS. Посмотрим на файл стилей. Его размер больше 6 Кб. Значит, все оформление можно вынести в него и оставить легкий и логичный код. Но…

Сначала лихо обнуляем margin и padding для всех элементов:

* {margin:0; padding:0;}

и, конечно же, покрасим scrollbar. Далее описывается куча (6 Кб) различных классов с загадочными названиями, которые определяют размеры, поля, отступы, фон, размер шрифта и т.д. И чтобы поставить обычную ссылку, приходится писать примерно так:

<a class="pr18 tc3 td0 hu" href="1.html">О КОМПАНИИ</a>

Так как мы обнулили отступы у всех элементов, чтобы разделить абзацы приходится вставлять 2 тега
<br />…

Встречаются еще такие забавные конструкции:

<td class="bgc2 bdbw1 bdbc4 fs1"> </td>

Хорошая штука CSS…

08.07.2005

Поработал

Я сегодня на работе поработал по работе. На сайте конторы осталось 13 вложенных таблиц. Когда я пришел, их было 40 (сорок). Думаю, в итоге останется четыре, которые будут отображать табличные данные. А если очень попрет, поробую сделать 4 колонки на CSS.

Убрал кучу кода, стили повыносил во внешний файл.

Полезная статья — “display:table”.

20.05.2005

Развлечение/работа

Придумал себе адское развлечение: привести сайт “Комиинформ” к Valid HTML. Думаю, работы на месяц, минимум. Сейчас там всего лишь 319 ошибок.

19.05.2005

♣ ♦ ♥ ♠

Бридж.

♣ ♦ ♥ ♠

Видны масти?

13.05.2005

Таблицы html: Секреты и Тонкости их создания

Что говорите? CSS? Стандарты? Дивы?


“Создать профессиональный сайт отныне может любой желающий. Всё, что для этого потребуется — это овладение навыком написания и применения таблиц языка html. Профессионала от любителя отличает одно: профессионал всё делает своими руками и мозгами. Я покажу тебе, как ты можешь стать профессиональным сайтостроителем, овладев простой технологией построения таблиц html.”

С удовольствием размещаю ссылку, так как сайт мне очень понравился. “Таблицы html: Секреты и Тонкости их создания

Еще пара цитат с сайта.

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

Сразу уточню, что я довольно хорошо знаю из всех Сетевых языков только html, но уже это позволяет мне утверждать, что Профессиональный Сайт в Интернете — это сайт, который создан вручную с чистого листа именно на языке html.

Наслаждаемся тонкостями создания таблиц.

05.04.2005

Поддержка сайтов

Мне в наследство досталась куча сайтов, которые нужно поддерживать, обновлять, и т.п. Сверстаны ужасно, куча таблиц, прозрачных gif’ов, CSS практически не используется. Встречаются вот такие перлы:


<td width=100% style="background:url('/images/spacer.gif');
background-repeat:repeat-x;">

Где spacer.gif — прозрачный gif размером 1×1 пиксел.

04.04.2005

Flash, valid HTML

Верстал страницу, где используется Flash. Зачем он там нужен, так и не понял, ибо представляет из он статическую картинку. Для соблюдения стандартов, вставил его по-умному. Жалуются — в Opera не видно. Причем на локальной машине все ок.

Оказалось, сервер неправильно определяет MIME type: отдает .swf как video/x-msvideo, вместо application/x-shockwave-flash. Закачал на правильный сервер — все отлично.

Почему постоянно я считаю, что проблема во мне, хотя она в ком-то (в чем-то) другом?

22.03.2005

CSS. Закругленные углы без картинок

Красота! Закругленные углы без картинок!

Nifty Corners: rounded corners without images

Title и charset

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

Думаю, стоит указывать charset до начала вывода каких-либо символов. Хотя, если сервер отдает страницы в их родной кодировке, то это не столь критично.

Посмотрел в интернете - везде по разному.

Charset до title

  • http://www.w3.org/
  • http://www.wellstyled.com/
  • http://www.boxesandarrows.com/
  • http://www.kottke.org/
  • http://csszengarden.com/

Charset после title

  • http://alistapart.com/
  • http://zeldman.com/
  • http://mezzoblue.com/
  • http://stopdesign.com/
  • http://webmascon.com/

07.02.2004

Kremlin.ru

Это правда, что kremlin.ru — официальный сайт нашего президента? Заглянем в source.

Интересно, кто этот сайт делал? Зачем там 2 (два) <head>, ни говоря уж об остальной жути кода? Конечно, герб Роcсии — двуглавый орел, но это не повод делать два <head> на сайте.

28.01.2004

Чудеса веб-дизайна

Music: Gry with FM Einheit and his Orchestra — Ray

Сайт, посвященный удаленной работе — goody.ru. Главное меню зачем-то сделано из кнопок <input type=submit>. Зачем? Есть подозрение, что создатели — ArtIn.ru — начитались “Советов вебдизайнеру” от всемирно известной студии “Потуги, и восприняли их черезчур серьезно.

08.12.2003

CSS. Контент в первом блоке

Music: Shirley Bassey — Where Do I Begin (Away Team Mix)

Придумал себе задачу: сверстать сайт без таблиц, в три колонки, резиновый. Левая и правая колонки — фиксированной ширины, центральная — резиновая, хедер/футер. Причем блок с контентом центральной колонки должен идти в коде первым, после хедера, длина правой колонки неизвестна, а левая отличается цветом, и должна идти до футера. Пока не придумал, как сделать.

Нашел, как это сделать для страницы фиксированной ширины.

Еще одна интересная ссылка для совсем ленивых: Generate a CSS layout for your site. Ставите галочки напротив нужных элементов (правая колнка, левая колнка, футер и т.п.), выбираете цвета, жмете кнопку и гененрируется html и css. Красота!

06.12.2003

CSS. 3 колонки

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

Запутался где-то. В IE и NN6 все ок, в Opera какой-то отступ пикселов в 50, в результате чего появляется горизонтальная полоса прокрутки.

Разберусь в понедельник, а сейчас пойду пить коньяк.

25.11.2003

CSS-дизайн

Чем верстка с помощью CSS лучше таблиц. И о многом другом. Доступно описано и прекрасно иллюстрировано.
www.hotdesign.com/seybold/

02.10.2003

Ащте

Music: Rita Marley — A Jah Jah

Как я писал, нащел в Гугле по запросу “ащте” Проект русского HTML (ЯРГТ).

Поискал в Яндексе, оказалось — люди успешно используют ЯРГТ.

01.10.2003

HTML

Music: eek a mouse — love me

Если <HTML> набрать русским буквами, получится “БреьдЮ”.
Занимаюсь бредом целыми днями.

Случайно обнаружил, набрав в Google ащте (font) Проект русского HTML (ЯРГТ) у Артемия Лебедева.

16.07.2003

CSS-верстка

Current music: Exploited — Don’t Blame Me

Две колонки разного цвета с хедером и футером на CSS — легко!
Здесь.

upd: После меня там уже десять человек поковырялись в коде.

11.06.2003

Валидатор

Current music: Toy Dolls — Pot Belly Bill

Добиваюсь валидности кода (html 4.01).
Валидатор ругается, если в head вставлять непарные теги, заканчивающиеся слешем, как этого требует xhtml.

04.06.2003

Вроде, еще не выходные

Я ковыряюсь в носу в публичном месте.

Сегодня я заработал денег веб-мастерингом, сколько еще ни разу не зарабатывал. 1000 рублей за 2 часа. Точнее, началось это в понедельник. Люди попросили разобраться с их сайтом — не отображались картинки и не работали ссылки. Еще бы! Сайт — просто супер. Мой первый сайт в 1996 году выглядел гораздо приличнее. Они сохранили страницы чужого сайта Експлорером, потом изуродовали их Dreamveaver’ом, называя при этом страницы по-русски. Я посмотрел на все это дело и предложил два варианта:

1. Я все настраиваю (ставлю картинки на место и делаю рабочими ссылки) за тысячу рублей
2. Я объясняю, что делать за 150 рублей.

Люди выбрали первый вариант. Отлично! Я взял предоплату 20%, повозился пару часов, сегодня получил остальное.

Антон сказал: “Постарайся донести хоть часть денег до дома!”
Я донес. Часть.

Я сегодня поужинал. Впервые за две недели.
А потом пошел гулять.

Скорей всего, сейчас я пойду в “Циник”. Куда же еще?

20.04.2003

Valid!

Перелопатил кучу чужого (чу чу) кода — теперь VALID CSS и VALID HTML!

18.04.2003

CSS

Now playing: Offspring — Mota
Переделал сайт, теперь все на CSS. Таблицы только там, где они являются таблицами. Работают кнопки “туды-сюды”.
Перелопатил код, теперь Valid HTML!

17.04.2003

DOCTYPE

Now playing: Cesaria Evora — Pe di boi (Quarrel)
Осталось немного — just one fix!