среда, 22 апреля 2009 г.

Верстка изображений с обтеканием текстом с помощью внешнего CSS


Обнаружил, что текст с вставленной картинкой, выравненной по левому или правому краю, может быть красиво сверстан с применением в теге картинки одного только атрибута align, но без встроенного атрибута style со свойством margin, задающим отступ от обтекающего текста.

Тупое добавление align="left или style="float:left" выдает такой результат:
bighands_s.jpgLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Как видите, текст обтекает картинку вплотную, что есть нехорошо. Что я делал раньше, чтобы исправить сиутацию:
Добавлял в тег изображения атрибут style="margin ....", чтобы указать отступы:
<img src="...." align="left" style="margin: 0 10px 5px 0;" .... />
или просто писал в стиле тега атрибут float, не используя align:
<img src="...." style="float: left; margin: 0 10px 5px 0;" .... />
В результате изображение обтекалось текстом не вплотную, что радовало глаз:
bighands_s.jpgLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Теперь знаю, что можно делать намного удобнее:
<img src="...." align="left" .... />
а во внешнем css достаточно прописать следующее:
img[align="left"]{ margin-right: 10px; margin-bottom: 5px; }

Результат такой же, как и в случае с отступами, заданными в теге.

Как говорится, век живи - век учись. Сколько я уже пересмотрел кода CSS, но такого почему-то не встречал до сих пор. Нашел, кстати, в коде стилей хабра, за что благодарен его верстальщикам. Беглый поиск в интернете дает лишь советы, как сделать аналог align="left" с помощью CSS, не влезая в HTML, что всем мало-мальски продвинутым верстальщикам уже давно неинтересно. Так что надесь, что этот пост пригодится многим.

P.S. Увы, но самый нелюбимый верстальщиками браузер этот стиль не понимает. Остается только порадоваться тому, что он сдает свои позиции в пользу более современных.

четверг, 16 апреля 2009 г.

Texster.ru - быстро и удобно выбрать шрифт для сайта


Нашел сегодня замечательный сервис, который не только поможет веб-дизайнеру выбрать подходящий шрифт для сайта, но и подобрать наиболее подходящие размер шрифта, высоту строки, а также увидеть, как будет выглядеть этот шрифт при выделении курсивом, жирным, цветом и т.п.
Ccылка на сайт: http://texster.ru/

среда, 1 апреля 2009 г.

Форумно-околопрограммистское


Довольно часто вижу на различных форумах, посвященных программированию, просьбы пользователей помочь им разрешить какую-либо проблему, связанную с необходимостью правки исходного кода их программ. И часто наблюдается такая картина: пользователь что-то спрашивает, а какой-нибудь программист ему отвечает, выдавая некоторое количество кода программы и инструкций. Через некоторое время появляется следующее сообщение от пользователя - мол, не работает и выдает такую-то ошибку. Программист смотрит в код, который он написал - точно, есть ошибка. И пишет ответ в духе "Извините, писал с бодуна" или "у нас тут в Англии утро, а я не успел еще глаза продрать, вам отвечая, - вот и ошибся". После чего, собственно, пишет тот же код, но уже исправленный.
К чему я это все написал? Да к тому, что я уверен, что любой программист, находясь в здравом уме и твердой памяти, способен наделать ошибок в коде, особенно если он его пишет из головы и не тестирует тут же в работе (про опечатки и т.п. я даже не заикаюсь). Но некоторые программисты почему-то стремятся скрыть этот факт. И со стороны это похоже на стремление показать, что они всегда с первого раза пишут чудесный безошибочный код (но тут что-то их бес попутал). Но возможно ли такое вообще, особенно если ты пишешь не очередной "Hello, World!"?