18 октября 2010 в 6:51
Надоело смотреть как текст упирается в картинки. Порылся в поиске, нашел много информации о том, как это сделать, но... всё это было написано о нодах, в которых картинки располагаются однотипно, с одной стороны. Мне же по душе в текст вставлять картинки по очереди - одна - справа, другая - слева, как на газетной странице.
У меня сделано так: в шаблоне "BuEditor - OneClick" добавил к картинке align=right. "Левые" картинки исправляю вручную на align=left.
Как сделать так, чтобы текст не доходил до картинок, ни до "правых", ни до "левых"?
Комментарии
вообще это все делается через CSS свойством float, а отступы - свойством margin
Если бы было все так просто, я не стал бы создавать еще один пост. Всё что касается float и margin в нашем случае относится не к отдельной картинке, а ко всему контенту ноды, а у меня для разных картинок разные значения...
ну дак и пишите для разных картинок разный style, для левой, вместо align=left -
style="float:left; margin:5px;", для правойstyle="float:right; margin:5px;"Создавайте для каждой картинки отдельный контейнер, определите для этого контейнера класс.
Потом, к примеру класс у нас будет img_cont, впишите в файл css следующее:
.img_cont img {padding: 10px;}
И будет у Вас поле изображения в 10px.
Попробовал по вашему методу - картинка с style="float:right; margin:5px;" осталась слева
Вот как у меня написано:
<a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" alt="" style="float:right; margin:5px;"/></a>Приветствуем вас......Почитайте учебник по CSS и вопросов не будет
Я не штампую сайты на движках, я всего лишь созидаю один свой сайт, в котором мне один раз нужно поправить, и забыть... и вы предлагаете мне ради этого по каждому вопросу учебники читать? У меня кроме программирования навалом дел... или я не правильно понял? Может быть Друпал только для программистов?
Ну знаете, есть люди которые этим занимаются. У вас буде точень много вопросов, т.к что вы хотите сделать выходит за рамки простого пользователя на друпал
Хм... а я почему-то решил, что на друпале можно сделать практически всё... не то что там какие-то отступы... видно я ошибся
Сделать-то можно. Можно и руками для каждой картинки, можно и полезть в темплайт темы и там прописать. Но вы же спросите как это сделать и в итоге за вас сделают всё
дык Вы сами картинку-то выравняйте по правому краю!!!!!
Просто на этом форуме куча топиков с ответом как это сделать. Потратив немного времени вы найдёте как это сделать. А через час придёт такой же как вы и спросит как это сделать?
Пробовал так:
<a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" class="editor-right-button" style="float:right; margin:5px;"/></a>Приветствуем вас...Так:
<a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank" class="editor-right-button"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" alt="" style="float:right; margin:5px;"/></a>И так:
<div class="editor-right-button"><a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" alt="" style="float:right; margin:5px;"/></a></div>Толку нет. Всё-равно слева картинка
Видимо вы невнимательно читали мой вопрос изначально:
«...Порылся в поиске, нашел много информации о том, как это сделать, но... всё это было написано о нодах, в которых картинки располагаются однотипно, с одной стороны...»
пропишите
align='left'или куда вам там надо картинку сдвинуть?И тем не менее почитайте о том как создаётся тема . И вообще через СSS можно написать, чтобы для любой картинки на сайте был отступ.
Прочитайте пожалуйста мой изначальный вопрос. У меня так и было. Проблема была не в "правости и левости", а в "отступе" текста и там, и там...
Автор, не пойти ли тебе... и не почитать ли мануал по CSS?
Я так понял из твоих реплик, что ты все "знаешь". А вопросы тогда зачем задаешь? Четыре раза тебе ЯВНО ответили на вопрос.
И тут ни при чем Друпал, CSS и HTML. Если руки кривые, то картинки все равно будут торчать не так, как тебе надо.
Не взывай к Милостивому, ибо тут люди, которые хотели помочь, но ты уперся. Прочесть и понять про форматирование через CSS не можешь... Друпал тебе только функционал дал, а кнопки нажимать за тебя он не будет. Ошибайся дальше.
Для особо одаренных:
ТАК НЕПРАВИЛЬНО:
<a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank" class="editor-right-button"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" alt="" style="float:right; margin:5px;"/></a>А ВОТ ТАК ПРАВИЛЬНО:
<div style="float:right; margin:5px;"><a href="/sites/default/files/BuEditor/nn06250.jpg" target="_blank" class="editor-right-button"><img src="/sites/default/files/imagecache/240x240/BuEditor/nn06250.jpg" alt="" /></a></div>Прочти умную книжку, и пойми где была ошибка. Это домашнее задание.
Если правильно, то почему не работает? Все равно картинка слева, и текст не оптекает, а снизу?
Видимо кому-то стоит повторить пройденный материал
Что могу вам сказать: о правильности и неправильности. Без ссылки на проект гадания в слепую не увенчаются успехом. Потому что вы здесь что-то прописали, а после некие другие стили перекрыли то что вы написали и вот вам эффект - 0 . Так что устанавливайте firebug читайте CSS и не ударяйтесь лбом об стену
Видимо, что-то где-то намудрено со стилями. Ссылку на страницу дайте, будет понятнее.
Поставьте вместо BuEditor Wysiwyg + TinyMCE и будет Вам выравнивание какое угодно
Молодой человек, почему же я должен делать ваше домашнее задание?
Разъясню: в том месте, где НЕПРАВИЛЬНО, стиль применяется внутри тэга
<img>. Сразу предвижу то, что есть внешний css стиль, который подгружается после генерации страницы и меняет стиль вашего<img>. Это следует из того, что у вас не проявляются изменения.Теперь о том месте, где ПРАВИЛЬНО. Ввиду изложенного выше, а так же опираясь на код, который вы любезно предоставили, я попытался обойти проблему переопределения тэга
<img>путем применения форматирования ко всему коду, который нашел у вас в тексте.Резюме: если мое предложение не сработало, то я делаю вывод, что правило
floatбыло переопределено в контейнере, который лежит снаружи этого кода. На пальцах: сколь угодно долго можно перемещать помидоры внутри банки в правый угол комнаты и не получить результата, пока банку снаружи кто-то толкает в левый угол комнаты. Засуньте этого кого-то вместе с банкой в тележку, и вот уже тележку толкайте в правый угол.Я не вижу вашего CSS кода, не вижу и исходников страницы целиком, чтобы пальцем ткнуть в нужное место. Поэтому учите матчасть, чтобы самим делать домашнее задание, а не меня просить это сделать вслепую за вас.
Добавлю: Есть опасение, что засовывая
style="float:right; margin:5px;"сколь угодно глубоко, вы не добьетесь результата. Потому что ваш стиль окажется переопределен...Так что раскопать где возникает кривость вам поможет firefox + firebug. Или аналог этой связки.
А какой формат ввода вы используете при создании ноды?
Вот ссылка на саму страницу, которую я пытаюсь изменить: http://blessing.ru/node/1408
Обычная Заметка, все стандартное
Ниже поля ввода заметки есть Поле Формат ввода
Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
Строки и параграфы переносятся автоматически.
Full HTML
Адреса страниц и электронной почты автоматически преобразуются в ссылки.
Строки и параграфы переносятся автоматически.
Если установлен первый, то он обрезает все не нужные теги HTML
ТС обычный зануда, это видно невооружённым взглядом.
Так и есть - всё. Можно даже за пивом послать
Я предпочитаю Оперу, Мозилу не люблю за ее долгий запуск с разными проверками версий
обычно такое происходит если тема генерировалась прогами типа Arteesteer
Сайт итак перегружен всякими штучками, из-за каких-то пяти пикселей ставить Wysiwyg + TinyMCE считаю неразумным
Тема обычная, стандартная, которая идет по умолчанию
Поставил плагин файфоксовский, сижу, пол часа уже рассматриваю разные теги, уже мозги на бекрень
А кто сказал что будет просто???
мой фильтр не трогает
Среди них я вижу и img и a href и div
"Не так" текст в плотную к картинкам, как я понял.
В таком виде между картинкой и текстом нет зазора. Если же я пробую делать то, что мне советуют, то правая картинка перемещается влево и теряется вообще всякое обтекание. Вчера пол дня так и висело... могу для примера снова поставить то что было вчера...
О! Получилось! Спасибо всем, и прошу прощения, что отнял у вас столько драгоценного времени. Проблема была действительно в фильтре, уж никак я не мог предположить, что теги обычных ссылок
<a>отфильтровываются.Особое спасибо Ветру и AI (за терпение)
Ан нет
рановато обрадовался. тэг
<a>присутствует в списке, это тут, на форуме он вырезался почему-то... Однако фильтр вырезает изнутри тэга<div>код style="float:right; margin:5px;"Как сделать так, чтобы он оставался после фильтрации?
Ну, вроде наконец-то добился я своего... В конце концов тэги картинок вернулись в свое изначальное состояние, где было прописано только лишь align, а в style.css темы добавлена строчка .node img { margin: 5px; } Это всё. Спасибо за внимание