Обтекание текста поверх картинки

[IvanSmirnov]

Всем привет!

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


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


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

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

[staticlight]

самое простое решение:
1) сделать блок фиксированной ширины и как его бэкграунд картинку.
2) внутри блока уже можно абзацы или други блоки с текстом как угодно позиционировать.

[IvanSmirnov]

самое простое решение:
1) сделать блок фиксированной ширины и как его бэкграунд картинку.
2) внутри блока уже можно абзацы или други блоки с текстом как угодно позиционировать.

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

[Mihanja80]

FireBug в руки и вперед!
Что сложного-то научиться пользоваться плагином для браузера?

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

Но не могу найти как это сделать в JoomlaCK.

Примерно вот так!

[IvanSmirnov]

Я понимаю что научиться можно всему. Но вопросы на форме и задаются для получения ответов

Я установил плагин, скопировал это:

Код:

<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
^&reg;
Compare feature to find the right TRX
^&reg;
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
^&reg;
Promise
</a>
</h5>
<p style="text-align: left; line-height: 16px; font-size: 12px;">
TRX
^&reg;
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>

Подставил где не хватало полный линк, но все равно ничего не вышло. )