Все для создания сайта

При загрузке изображений в записи новостей встроенными средствами Ucoz тэги изображений вписываются след. образом:

img style="margin:0;padding:0;border:0;" src=...

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

Исправить это не очень красивое поведение изображений можно 2 способами.

1. Ручная правка

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

2. Прописывание стиля для изображения в файле стилей (CSS)

Заходим в админку. Из списка "Дополнительные функции" в левом верхнем углу выбираем "Управление дизайном (стили)". Теперь нам нужно добавить описание стиля для всех изображений, вставлемых в новости. Тут есть 2 важные особенности.

Во-первых, по сути задачи нам нужно определить стиль только для тех изображений, которые вставлены в новости. Другие изображения (логотип, баннеры и пр.) не должны быть затронуты. Если вы не меняли шаблон сообщений, текст новости и соот. изображения выводятся в строке таблицы, которой сопоставлен класс "entryBodyTd". Укажем, что стиль должен применяться только для тех изображений, которые находятся в строке таблицы "entryBodyTd", то есть теле новости:

.entryBodyTd img {здесь чуть позднее будет описание стиля}

Во-вторых, поскольку стиль для изображения, прописываемый системой, указан в теге изображения, он имеет приоритет выше, чем все стили, которые мы можем прописать в файле стилей. Но есть простой выход. Пропишем для каждого из свойств создаваемого стиля параметр "!important". Это укажет браузеру что это свойство нужно применить обязательно, оно имеет наивысший возможный приоритет.

.entryBodyTd img {здесь чуть позднее будет описание стиля !important;}

Теперь перейдем к описанию стиля.

Вариант №1. Простое отделение текста от изображения.

.entryBodyTd img {margin:7px 7px 7px 0 !important;}

Этим мы добавили 7-ми пиксельную невидимую границу вокруг изображения.

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текстn текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Вариант №2. Чуть посложнее.

.entryBodyTd img {margin:7px 7px 7px 0 !important; border: 2px dashed orange !important;}

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текстn текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

Здесь мы добавили пунктирную оранжевую границу. Можете поэкспериментировать и создать собственный уникальный стиль.

(+) Если у вас отключена реклама и прописан корректный Doctype, можно сделать двойную границу у изображения, указав свойство padding и background для изображения.

Стиль для изображений в новостях прописывается один раз. В дальнейшем все добавленные в новости изображения выводятся в этом стиле.

Описание этого способа заняло много места, но зато (я надеюсь) вы поняли как он работает, и сможете его применить. На это врядли уйдет больше 5 минут.

Источник: http://webgrower.ru/articles/layout-and-scripting/ucoz-image-style-fix.html