kost’s blog

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

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

15:09 | css, html, opera | Комментарии (6)

Понадобилось проверить сайт в 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 — красивые тире и кавычки.

16:45 | apple, css, html, webdev | Комментарии (1)

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

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

16:42 | css, html | Комментарии (1)

Работающее, легко настраиваемое выпадающее меню на 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:29 | css, html | Комментарии (0)

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

Loading…

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

16:12 | html, webdev, картинки | Комментарии (0)

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

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

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

22:17 | css, html | Комментарии (0)

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

11:12 | html, пиздец | Комментарии (3)

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

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

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

11:12 | css, html | Комментарии (6)

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

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

16:14 | html, работа | Комментарии (2)

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

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

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

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

18:08 | css, html, работа | Комментарии (7)

Music: The Meteors — Johnny Remember Me

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

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

16:04 | html | Комментарии (1)

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

11:32 | html | Комментарии (0)

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

11:15 | html | Комментарии (0)

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

http://www.pansport.ru/

12:26 | html | Комментарии (0)

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

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

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

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

23:21 | css, html | Комментарии (0)

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…

15:21 | css, html, ie | Комментарии (0)

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

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

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

http://mbc.kost.ru

13:29 | html, сайт

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

10:57 | html, пиздец | Комментарии (2)

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

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

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

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

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

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

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

17:03 | css, html, вечер | Комментарии (4)

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

16:27 | html, работа | Комментарии (0)

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

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

10:57 | css, html, ч/ю | Комментарии (1)

Есть крупная компания. “Комиэнерго”. Уставный капитал — 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…

18:29 | css, html, верстка, пиздец | Комментарии (6)

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

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

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

18:06 | css, html, работа | Комментарии (3)

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

13:47 | html, w3c, работа | Комментарии (1)

Бридж.

♣ ♦ ♥ ♠

Видны масти?

15:25 | html | Комментарии (3)

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

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

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

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

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

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

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

11:28 | html, internet, ч/ю | Комментарии (1)

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


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


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

10:21 | html, верстка, работа | Комментарии (0)

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

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

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

19:04 | html, standards, w3c | Комментарии (0)

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

Nifty Corners: rounded corners without images

17:46 | css, html | Комментарии (2)

Внезапно охватили сомнения - надо ли указывать 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/

11:53 | html, standards, верстка | Комментарии (0)

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

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

04:38 | html, верстка | Комментарии (40)

Music: Gry with FM Einheit and his Orchestra — Ray

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

18:30 | html, дизайн | Комментарии (2)

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

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

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

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

20:24 | css, html, верстка | Комментарии (0)

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

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

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

20:51 | css, html, браузер, верстка | Комментарии (7)

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

13:07 | css, html, верстка, дизайн | Комментарии (2)

Music: Rita Marley — A Jah Jah

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

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

19:36 | html, фото

Music: eek a mouse — love me

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

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

16:50 | html | Комментарии (0)

Current music: Exploited — Don’t Blame Me

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

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

18:42 | css, html | Комментарии (0)

Current music: Toy Dolls — Pot Belly Bill

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

17:48 | html, w3c | Комментарии (0)

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

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

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

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

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

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

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

23:10 | html, бухло, работа | Комментарии (0)

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

00:45 | css, html, w3c | Комментарии (0)

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

18:53 | css, html, php, w3c | Комментарии (0)

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

17:28 | css, html | Комментарии (0)