• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.
    Помогите модератору этого раздела killoff лично.

Помощь Текст должен красиво "обтекать" картинку

Статус
В этой теме нельзя размещать новые ответы.

Dagazz

Создатель
Регистрация
24 Янв 2010
Сообщения
41
Реакции
3
Когда вставляю картинку в новости вот таким образом:

Код:
[img=left]http://site.ru/uploads/posts/image.jpg[/img] Текст, текст, текст

текст который должен её "обтекать" прикладывается к картинке без зазора слишком близко. Знаю что для отступа в css нужно прописать для картинки margin, но не могу сообразить как..

помогите разобраться.
 
HTML:
CSS
#block {
    color: #F9F9F2;
    background: url("/uploads/posts/image.jpg") repeat-x scroll 0 0 #F8F8EF;
    display: block;
    float: left;
    height: 23px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}
html
<div><div id="block"></div>  Текст, текст, текст </div>
Или без отдельного CSS
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Обтекание</title>
  <style type="text/css">
   .leftimg {
    float:left; 
    margin: 7px 7px 7px 0; 
   }
   .rightimg  {
    float: right;  
    margin: 7px 0 7px 7px; 
   }
  </style>
 </head>
 <body>
  <h2>Доклад лейтенанта Бокатуева</h2>
  <p><img src="images/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg" />
     Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного 
     противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной 
     контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава 
     потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился 
     в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы 
     своего взвода. В результате операции были захвачены элементы внеземной культуры, которые 
     переданы аналитической группе.</p>
     <h2>Пресс-релиз аналитической группы</h2>
  <p><img src="images/n2.jpg" alt="Ученые, находящиеся в состоянии аффекта" class="rightimg" />
     В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось
     психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших 
     над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии 
     аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в 
     состоянии аффекта.</p>
 </body>
</html>
 
HTML:
CSS
#block {
    color: #F9F9F2;
    background: url("/uploads/posts/image.jpg") repeat-x scroll 0 0 #F8F8EF;
    display: block;
    float: left;
    height: 23px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}
html
<div><div id="block"></div>  Текст, текст, текст </div>
Или без отдельного CSS
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Обтекание</title>
  <style type="text/css">
   .leftimg {
    float:left; 
    margin: 7px 7px 7px 0; 
   }
   .rightimg  {
    float: right;  
    margin: 7px 0 7px 7px; 
   }
  </style>
 </head>
 <body>
  <h2>Доклад лейтенанта Бокатуева</h2>
  <p><img src="images/n1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg" />
     Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного 
     противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной 
     контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава 
     потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился 
     в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы 
     своего взвода. В результате операции были захвачены элементы внеземной культуры, которые 
     переданы аналитической группе.</p>
     <h2>Пресс-релиз аналитической группы</h2>
  <p><img src="images/n2.jpg" alt="Ученые, находящиеся в состоянии аффекта" class="rightimg" />
     В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось
     психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших 
     над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии 
     аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в 
     состоянии аффекта.</p>
 </body>
</html>

спасибо, я это всё понимаю, но мне надо чтоб просто в админке ДЛЕ когда я буду добавлять новость вот такого типа
Код:
[img=left]http://site.ru/uploads/posts/image.jpg[/img] Текст, текст, текст
у меня всё выводилось красиво с отступом например в 10px
 
Думаю нужно в CSS найти строчку отвечающюю за img вывода в shortstory, fullstory и добавить:
float:left;
margin: 7px 7px 7px 0;
Который подстроить под себя.
То что выше detanatar привел.Это готовый html пример.

Также посмотри хак под названием Вывод картинки тегом последней версии.
 
Код:
[img=left]http://site.ru/uploads/posts/image.jpg[/img] Текст, текст, текст
Понимаете ли Dagazz в чем дело, у Вас ссылка в ВВ коде (когда Вы пишете сообщение на этом форуме вы тоже ими пользуетесь) ВВ код вам по себе не позволяет управлять HTML разметкой.
Нужно (как написано в посте выше) найти куда вставилась данная картинка и текст (уже в HTML странице - правая кнопка мышки "исходный код страницы") и в CSS найти название блока и управление картинками этого блока, и там менять параметры margin.
 
Спрошу здесь, чтобы не заводить новую тему, вопрос то у меня тоже про админку.Хоть и не про картинки - про текст. Пишу в блокноте,смотрю в бровзере - все отлично,вставляю в админке в "создание новости" - кошмар, не видит ни отступов у абзацев,ни выделений текста цветом.В style.css отступ абзацев прописан.Значит еще где-то нужно указывать?А что с цветом текста делать?
И как можно публиковать без админки,напрямую?
 
без админки можно публиковать по адресу
твойcайт/addnews.html
--
а по поводу разметки, тут без адреса твоего сайта не обойтись, т.к. телепаты на другом форуме.
 
Когда вставляю картинку в новости вот таким образом:

Код:
[img=left]http://site.ru/uploads/posts/image.jpg[/img] Текст, текст, текст
текст который должен её "обтекать" прикладывается к картинке без зазора слишком близко. Знаю что для отступа в css нужно прописать для картинки margin, но не могу сообразить как..

помогите разобраться.
Все оч. просто.....
Есть стиль самой новости, к примеру
Это стиль который отвечает за вывод всей новости на сайте (смотри какой у тебя там есть)
<div class="shortnews-body">

Ищем этот стиль в файлах стиля и дописываем следующее значение:
HTML:
.shortnews-body img {margin: 0 15px 5px 0; display: block; float: left; padding: 15px;}

теперь у нас все картинки в новостях слева с отступом, с обтеканием текста ..
 
без админки можно публиковать по адресу
твойcайт/addnews.html
--
а по поводу разметки, тут без адреса твоего сайта не обойтись, т.к. телепаты на другом форуме.

Адреса нету,тестирую локально. Получилось у меня через админку отправить,чтобы цветной шрифт отображался.Для этого нужно перед текстом прописать <div class="мое значение">. Но это уже не особо актуально, так как я попробовал через addnews.html - там все отлично.Благодарю.
Еще один косяк (для меня).Когда я в блокноте пишу,то при переносе на следующую строку ставится <br>,а после этого enter ,чтобы курсур прыгнул на следующую строчку.Ну чтобы в блокноте легче ориентироваться по записи.И в обычной статичной странице текст после этого просто идет со следующей строки.А в DLE уже получается с разрывом,пустой строкой,как после параграфа. DLE учитывает этот enter. С этим,наверное,уже ничего не сделать?
 
так в чем проблема? просто не ставь тег br, а просто щелкай свой enter.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху