0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 5291 Просмотров
*

IvanSmirnov

  • Захожу иногда
  • 59
  • 0 / 0
Всем привет!

http://www.trxtraining.com/ На этой странице внизу есть текст с картинками.


Посмотрел по коду картинка выглядит так:


Предполагаю, что просто сделано обтекание поверх картинки. Но не могу найти как это сделать в JoomlaCK.

+ Бонус вопрос. Как сдедать две или три разных колонки с таким текстом как на первой картинке?
*

staticlight

  • Завсегдатай
  • 1086
  • 65 / 0
  • Staticlight
Re: Обтекание текста поверх картинки
« Ответ #1 : 20.07.2011, 23:15:05 »
самое простое решение:
1) сделать блок фиксированной ширины и как его бэкграунд картинку.
2) внутри блока уже можно абзацы или други блоки с текстом как угодно позиционировать.
Руководитель отдела сервисного обслуживания систем безопасности.
Устали от com_content - поставьте com_k2.
TRIPLE "F" POWER: Firefox+FireShot+Firebug. Chrome + Ctrl+Shift+I
*

IvanSmirnov

  • Захожу иногда
  • 59
  • 0 / 0
Re: Обтекание текста поверх картинки
« Ответ #2 : 20.07.2011, 23:20:46 »
самое простое решение:
1) сделать блок фиксированной ширины и как его бэкграунд картинку.
2) внутри блока уже можно абзацы или други блоки с текстом как угодно позиционировать.


 А есть какой-то удобный редактор Дивов?
*

Mihanja80

  • Завсегдатай
  • 1918
  • 168 / 4
  • Всю жизнь учусь...
Re: Обтекание текста поверх картинки
« Ответ #3 : 20.07.2011, 23:20:59 »
FireBug в руки и вперед!
Что сложного-то научиться пользоваться плагином для браузера?

поверх background-image лежит div уже по ширине, внутри которого находятся два заголовка и два параграфа (второй заголовок и параграф с отступом margin-left:60px и margin-top:20px)

Но не могу найти как это сделать в JoomlaCK.
Примерно вот так!
Я с мобильного, в основном...
*

IvanSmirnov

  • Захожу иногда
  • 59
  • 0 / 0
Re: Обтекание текста поверх картинки
« Ответ #4 : 20.07.2011, 23:53:56 »
Я понимаю что научиться можно всему. Но вопросы на форме и задаются для получения ответов :)

Я установил плагин, скопировал это:
Код
<div class="grid_11 alpha omega" style="background-image: url("/images/badges/640x312_index_baseline.jpg"); background-position: center top; background-repeat: no-repeat; margin-top: 0px; width: 640px; height: 320px; border-top: 1px solid rgb(238, 238, 238);">
<div class="grid_9 alpha" style="margin-top: 10px; font-family: Helvetica,Arial,sans-serif; color: rgb(51, 51, 51)! important;">
<h1 class="noindent" style="text-align: left; font-size: 14px; background: none repeat scroll 0% 0% transparent; line-height: 16px; margin: 0pt; padding: 0pt;">
<a style="color: rgb(51, 51, 51); font-weight: bold;" href="/learn/">
</a>
</h1>
<p style="text-align: left; line-height: 16px; font-size: 12px;">
The TRX is more than just the most versatile piece of exercise equipment available; it is a complete training system. To ensure your success, every TRX package includes complete usage instructions, training tips and a comprehensive full body workout that can be adapted as your fitness improves. We also offer a wide variety of exercise DVDs, hands&ndash;on
<br>
professional education courses, an online training resource...
<a style="color: rgb(0, 153, 255);" href="/learn/">Learn More »</a>
</p>
<h2 class="noindent" style="text-align: left; margin-top: 20px; margin-left: 60px; color: rgb(51, 51, 51)! important; font-size: 14px; font-weight: normal;">
<a style="color: rgb(51, 51, 51); font-weight: bold; font-family: Helvetica,Arial,sans-serif; padding: 0pt; margin-bottom: 0pt;" href="/compare">
</a>
</h2>
<p style="margin-left: 60px; margin-top: 0px; text-align: left; line-height: 16px; font-size: 12px;">
Use our TRX
<sup>&reg;</sup>
Compare feature to find the right TRX
<sup>&reg;</sup>
bundle for your fitness goals. See which bundle is intended for home use, for overall strength training and which one will give you enough programs to get you ready for anything.
<a style="color: rgb(0, 153, 255);" href="/compare">Learn More »</a>
</p>
</div>
</div>
<div class="grid_5 alpha" style="border-top: 1px solid rgb(238, 238, 238); padding-top: 20px;">
<a href="/company/genuine_trx.php">
<img alt="Shop Confidence" src="/images/badges/300x100_shop_confidence.gif">
</a>
<h5 class="noindent" style="text-align: left; margin-top: -5px; padding-bottom: 10px;">
<a style="color: rgb(51, 51, 51); font-weight: bold;" href="/company/genuine_trx.php">
Genuine TRX
<sup>&reg;</sup>
Promise
</a>
</h5>
<p style="text-align: left; line-height: 16px; font-size: 12px;">
TRX
<sup>&reg;</sup>
Training is committed to producing best-in-class products that are rigorously tested and constructed to withstand heavy daily use by the world's most demanding users. That's why top health clubs, professional athletes, the US Military and people just like you trust and use TRX equipment daily.
<a style="color: rgb(0, 153, 255);" href="/company/genuine_trx.php">Learn More »</a>
</p>
</div>
<div class="clear">&nbsp;</div>

Подставил где не хватало полный линк, но все равно ничего не вышло. )
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Joomla удаляет форматирование текста (настройка прав)

Автор Falkovichs

Ответов: 1
Просмотров: 1117
Последний ответ 22.01.2018, 19:41:50
от Falkovichs
Проблема с отображением русского текста в материале

Автор juvemen

Ответов: 4
Просмотров: 1207
Последний ответ 17.12.2016, 09:58:29
от vipiusss
При форматировании текста появляется лишний код

Автор alexey11

Ответов: 6
Просмотров: 1575
Последний ответ 21.11.2013, 21:19:32
от wishlight
не могу вставить картинки в материал

Автор vaymohk

Ответов: 17
Просмотров: 13135
Последний ответ 13.02.2012, 13:48:44
от Ruberoid
Прерывание текста

Автор gadjet

Ответов: 3
Просмотров: 2025
Последний ответ 02.02.2012, 10:40:26
от gadjet