Question

Здравствуйте.

Собственно вопрос в том, как через CSS прописать свойства для img так, чтобы у изображений был отступ. Но...

Загвоздка в том, что для картинки с обтеканием справа (вставка в редактор кодом $IMAGE2-right$) padding выглядит так 0 0 10px 10px, а для картинки с обтеканием слева (вставка в редактор простым кодом $IMAGE2$) padding уже должен выглядеть так 0 10px 10px 0.

А для изображения, которое будет расположено по центру, отступов не было.

Возможно ли вообще такое реализовать? :)

 

Comments

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

---

Так почему не получается, у меня вообще нет идей как это прописать в CSS.

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

Для правой: 0 0 10 10

Для левой: 0 10 10 0

Вот тестовый материал: http://golosinfo.com/news/zagolovok/2015-01-01-123

---

Вы добавляете изображение через виз.редактор? если да, то после добавления переключитесь в html и увидите код, в style="margin:тут ваши цифры" затем сохраняете.

---

Да, через визуальный рекдактор.

Спасибо, прописать стиль через редактор — это проще всего, но добавляет лишней работы :) Мне нужна автоматизация, ведь материалов планируется добавлять много, хочется упростить труд :)

Все это нужно сделать через CSS, чтобы каждый раз при добавлении изображения $IMAGE2-right$ (справа), $IMAGE2$ (слева) или по-центру <div style="text-align: center;">$IMAGE2$</div>, сделать разные отступы через margin или padding.

---

Дело в том, что это не так просто, когда изображения с разных сторон, но можете попытаться сделать через псевдокласс, почитайте http://htmlbook.ru/css/nth-of-type

---

Спасибо, об этом я уже думал. Но дело здесь не четности-нечотности, нумерации и последовательности, а в — выравнивании (float). Т.е. как в CSS задать отдельный стиль для img, если он имеет float:left или float:right, как нам предлагает визаульный редактор uCoz. Ведь там по умолчанию прописано style="margin:0;padding:0;border:0;" и это, как я понимаю, прописывается самим uCoz'ом.

---

Да, так работает виз. редактор, моё предложение про псевдокласс имелось ввиду выбирать изо. по нахождению в дереве нтмл, ладно если такой способ не подходит то можете внести своё предложение на доработку виз. редактора здесь http://all.uwishlist.ru/forums/235131-Идеи-по-системе-ucoz

Answer 1

Можно применить решение которое у вас уже есть на сайте (возможно я просто опаздал с ответом) c помощью div. У вас в таблице стилей есть класс .img1. Для того чтобы не путаться можно создать классы .imgL, .imgR, .imgC  Написать стили типа: 

.imdR{padding: 0px 10px 10px 0px; float: right}
.imgL{padding: 0px 0px 10px 10px; float: left}
.imgC{text-align: center;}

Ну а дальше, добавляем картинку так: 

<div class="imgR">$IMAGE1$</div>

 

Comments

Спасибо Юрий, однако это не совсем то, что нужно.

Суть в том, чтобы сделать в CSS так, чтобы не прописывать классы и div для картинки в редакторе, а стили уже были прописаны в CSS.

Т.е. если я добавлю картинку через редактор с обычным кодом без div и класса такого вида $IMAGE2-right$, то у неё появились соответствующие отступы, а для картинки $IMAGE3$ уже другие.

---

А вот собственно и ответ, может кому-то пригодится.

.eMessage img[align="right"], .ulightbox > img[align="right"] {margin: 0 0 15px 15px !important;}

Взято из htmlbook и доработано под Ucoz.

То есть, конструкция img[align="right"] указывает, что если для img есть стиль align:right или как было раньше img[float="right"], по ходу сейчас это изменили в визуальном редакторе юкоза, то ему можно задать нужные стили. Остается указать к правилу весь правильный путь.

Либо, если картинка будет по-центру, как у меня иногда бывает, дополнительно можно так:

.eMessage div[style="text-align: center;"] img, .eMessage div[style="text-align: center;"] .ulightbox > img {margin: 15px 0 !important;}