Проблема:
Клиент, радостный, хочет выложить фото своей новой собаки. Открывает свой сайт, создаёт статью, вставляет картинку выравнивает её по левому краю. Сохраняет, смотрит на сайт…. и о боже, у картинки нету отступов! Или наоборот, они есть с обоих сторон…
Задача
Приделать отступы к картинкам, которые обтекает текст. Для «левых» картинок отступ справа, для «правых» отступ слева.
Решение
Решение это CSS2
ХТМЛ-редактор клиента вставляет картинку с атрибутом align="чего то там...", ага…
/* Классы для картинок в http://css-framework.ru/ */ /* Images ------------------------------ */ #content img { padding: 5px; border: 1px solid #ccc; margin-top: .4em; } img.f-left { margin-right: 1em; } img.f-right { margin-left: 1em; }
Если бы не самизнаетекакой браузер под номером 6(номер 7 вроде получше, но не суть, хватает пока номера 6). Мы писали бы так:
img[@align='left'], img.f-left { margin-right: 1em; }
img[@align='right'], img.f-right { margin-left: 1em; }
Утопия… номер 6 портит картину маслом. На помощь приходит JavaScript(спасибо pepelsbey).
Есть много библиотек, у нас в примере jQuery. Этот код вставляется в head документа.
<script type="text/javascript">
$(document).ready(function(){
$("img[@align='left']").addClass("f-left");
$("img[@align='right']").addClass("f-right");
});
</script>
Все довольны :)