Поддержка Проблемы и решения обтекание текста вокруг миниатюры картинки?

  • Решено Иван

    (@cotic2013)


    Здравствуйте! Искал по форуму не нашел, решил создать тему.
    Нужно как то поправить обтекание текста вокруг миниатюры картинки в фоксе нормально, ниже есть скриншот.
    Буду ждать ответа так как уже давно мучаюсь с этим, сам новичок. Заранее спасибо за помощь!
    http://limagi.ru/shapki-v-nalichii/
    http://s52.radikal.ru/i138/1303/ed/3441ca6fc971.jpg

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Модератор Yuri

    (@yube)

    Искал по форуму не нашел

    Если б Вы искали не «обтекаемость» (это термин из аэро- или гидродинамики?), но и простое русское слово «обтекание», то точно нашли бы что-то.

    ниже есть скриншот

    А не проще ли было дать ссылку на сайт? Тут мало кто умеет лечить по
    фотографии.

    Есть старый, проверенный временем твик. Кстати, можете проверить, работает или нет 🙂

    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    a img.alignright {float:right; margin:0 0 1em 1em}
    a img.alignleft {float:left; margin:0 1em 1em 0}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

    Автор Иван

    (@cotic2013)

    Спасибо! Не помогло, может я его не туда пихнул, в стили в конце…

    img.alignright {float:right; margin:0 0 1em 1em}
    img.alignleft {float:left; margin:0 1em 1em 0}
    img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    a img.alignright {float:right; margin:0 0 1em 1em}
    a img.alignleft {float:left; margin:0 1em 1em 0}
    a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

    Не помогло, может я его не туда пихнул, в стили в конце…

    Иногда помогает CTRL+F5 в браузере (очищаем кеш), если не помогло, тогда попробуйте убрать из всех правил тег img

    .alignright {float:right; margin:0 0 1em 1em}
    .alignleft {float:left; margin:0 1em 1em 0}
    .aligncenter {display: block; margin-left: auto; margin-right: auto}

    Автор Иван

    (@cotic2013)

    Какие еще есть способы, самое интересное что только в фоксе нормально, не могу понять ошибку и где ковырять, привью поста как то странно реагирует на остальные браузеры с планшета заходил так же коряво отображается.

    Какие еще есть способы

    Надо живьем смотреть на ваш сайт, там виднее будет..

    Автор Иван

    (@cotic2013)

    Делаю привязку к опере через Кросс-браузерный CSS при помощи .isOpera
    что отвечает за обтекании текста вокруг привью картинки в посте? Для разных браузеров поменял картинку в фоксе с лева в опере с права, но текст так и остался без изменений…

    /* [gallery] shortcode */
    .entry .gallery .gallery-item { max-width:150px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; margin: 10px; }
    .entry .gallery { clear: both; margin: auto; text-align: center; }
    
    /* Images align */
    .entry .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
    .alignleft, .entry .alignleft { float: left; margin: 5px 15px 5px 3px; }
    .alignright, .entry .alignright { float: right; margin: 5px 4px 5px 15px; }
    
    /* Caption for Images */
    .entry .wp-caption { max-width:600px; padding: 1px; text-align:center;   }
    .entry .wp-caption img { background:none; margin:0; }
    .entry .wp-caption-text { color:#A7A3A3; font:11px/22px Arial, Helvetica, sans-serif; margin:0; padding:4px 0 0; text-align:center; }
    .entry .wp-caption.aligncenter { margin:0 auto 15px; }
    
    img.wp-smiley { border: none; padding: 0; }
    .thumbnails {  clear: both; float: left; font-size: 11px; line-height: 1.6em; margin: 10px 0 20px 15px; padding: 10px 10px 5px; }
    .thumbnails img { height: 100px; margin: 5px 15px 10px; width: 100px; }

    Иван, я бы посмотрел ваш сайт «вживую», но к сожалению не хожу по ссылкам. И телепат из меня в последнее время никакой 🙂 Возможно, кто-нибудь посмотрит на сайт и подскажет, что и как подправить.

    Автор Иван

    (@cotic2013)

    На моем сайте в опере и хроме, нет обтекания текста вокруг миниатюры картинки в привью, только в фоксе. Как можно поправить стандартный скрипт взятый с этого сайта. Что бы хотя бы в опере отображалось как нужно. Знаю можно приставить .Opera но не знаю вариантов скрипта для правильной верстки обтекания только этот. стандартный работает только на одном браузере.

    .entry .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
    .alignleft, .entry .alignleft { float: left; margin: 5px 15px 5px 3px; }
    .alignright, .entry .alignright { float: right; margin: 5px 4px 5px 15px; }

    или

    .alignright {float:right; margin:0 0 1em 1em}
    .alignleft {float:left; margin:0 1em 1em 0}
    .aligncenter {display: block; margin-left: auto; margin-right: auto}

    Заранее спасибо за помощь!

    Модератор Yuri

    (@yube)

    После картинки идет
    <div class="art-postcontent clearfix">
    со стилем clear: both; (матчасть)
    Так что это как раз firefox неправильно показывает.

    Автор Иван

    (@cotic2013)

    Почитал спасибо! Я со скриптами не дружу направьте пожалуйста в нужно направлении! Где его поправить, сам не нашел!

    Модератор Yuri

    (@yube)

    Я со скриптами не дружу

    А где Вы там скрипты увидели?

    направьте пожалуйста в нужно направлении!

    Уже ж направил на htmlbook 🙂 Это и есть нужное сайтостроителю направление (одно из).

    Попробуйте убрать из <div class="art-postcontent clearfix"> класс clearfix.

    PS Нет, я не знаю, в каком это шаблоне. И вообще я в гробу видел темы, произведенные на свет противоестественным путем через программу Artisteer.

    Автор Иван

    (@cotic2013)

    Хороший PS, полностью согласен, если еще придется делать блог, но точно не с помощью Artisteer.
    Проблема решена, настроил в стилях, всем спасибо!

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Тема «обтекание текста вокруг миниатюры картинки?» закрыта для новых ответов.