Размещения картинки в нужном месте шаблона? - Joomla 2.5: Шаблоны, разметка и макеты вывода

Здравствуйте! Подскажите каким способом лучше разместить картинку с ссылкой на заказ обратного звонка в шаблоне.
1. Создать новую позицию с шаблоне и вставить модулем эту картинку.
2. В ручную вставлять картинку в этот блок.
Как будет правильнее и легче.
Спасибо!
Сайт www. sdsua . com

<div class="callme"><div>

.callme {
background: url(/images/callme.png) no-repeat;
padding-***:***px;
}

Можно просто между дивами картинку, тогда в CSS убрать background.

Добавил новую позицию в модуль.

Помогите настроить стиль как на картинке, указывать расстояние в процентах или в пикселях?

я не пойму, вы хотите чтоб телефоны были в прямоугольнике?

я не пойму, вы хотите чтоб телефоны были в прямоугольнике?

Как можно ближе к блоку телефонов.

#callme {
    display: block;
    position: absolute;
    top: 91px;
    left: 59%;
}

Только я не смотрел, как вы тот div делаете и как это будет на других устройствах.
Это вообще нужно в 1 диве делать, а не как вы разбросали по кусочкам.

#callme {
    display: block;
    position: absolute;
    top: 91px;
    left: 59%;
}

Только я не смотрел, как вы тот div делаете и как это будет на других устройствах.
Это вообще нужно в 1 диве делать, а не как вы разбросали по кусочкам.

вот div

я имел ввиду с телефонами сделать всё в 1 модуле и в нём в 1 диве.
а у вас модули разные, дивы разные.

Для картинки вы р-99 сделали, телефоны в позиции search.
Почему не сделаете сразу всё в одном месте?

я имел ввиду с телефонами сделать всё в 1 модуле и в нём в 1 диве.
а у вас модули разные, дивы разные.

Для картинки вы р-99 сделали, телефоны в позиции search.
Почему не сделаете сразу всё в одном месте?

К сожалению знаний не хватает (((
Я и так уже третий день сижу это колбашу ))))
Спасибо Вам и на этом)))

щас, нарисую вам ваш div, освобожусь, напишу тут

Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .

Перенесите <div id="callme"> в <div id="header">
тогда вам проще будет его спозиционировать .

Куда что перенести?

    <div id="callme">
      <jdoc:include type="modules" name="position-99" />
    </div>
перенесите над
    <!-- Search -->
    <div id="search">
      <jdoc:include type="modules" name="position-0" />
    </div>

Так зачем в разные модули?
Вот вам готовое:вставьте дивы в модуль один, CSS  в шаблон.
Плясал от левого края.
Сделал вам с цифрами спец, чтобы вы могли регулировать если что отступы всех частей.
Так что некоторые падинги и маргины удалите сами.

Картинку измените:я её уменьшил.
Размер:210х70

Вот и вы сделайте вашу гифку такого размера, на прозрачном фоне, внутри надписи никакие писать не надо!

Так зачем в разные модули?
Вот вам готовое:вставьте дивы в модуль один, CSS  в шаблон.
Плясал от левого края.
Сделал вам с цифрами спец, чтобы вы могли регулировать если что отступы всех частей.
Так что некоторые падинги и маргины удалите сами.

Картинку измените:я её уменьшил.
Размер:210х70

Вот и вы сделайте вашу гифку такого размера, на прозрачном фоне, внутри надписи никакие писать не надо!

Спойлер

[свернуть]

Спойлер

[свернуть]

Принципе Вы правы по поводу двух модулей! Почему я сразу не догадался)))
НО! К чему я пришел!
В данный момент поставил модуль mod_callback и эта позиция которую я сделал как раз к месту)))
Неправда ли?

Там в калбеке модуле div есть, помоему vopros-1 или както так, навскидку не помню, вот div с картинкой оберните дивом модуля и будет вам она кликабельна с функциями модуля обр.звонка.
Т.е. мой div вставьте вместо <php текст Обратный звонок?> в модуле обр.звонка.

Все сделал, только выровнять как надо осталось!

Короче что-то я со стилями запутался((( 

а что вы с картинкой сделали? не можете адекватно уменьшать-уменьшите в CSS (добавьте к стилю) width:210px;height:70px;
А картинку загрузите старую (только текст внутри удалите)
И чего у вас там прыгают номера?
Я же дал css:у меня ровненько всё.

К сожалению у меня не получается((( 
Вообще не пойму что не так... Всё кривое... и картинка не меняет размер. а пропадает куда-то.

Делаю следующие!

в файл index.php
вставляю...
Без строки <div class="callme_text_1">Заказ обратного звонка</div> т.к. я слова сделал одной картинкой.

далее файл template.css настройки стиля

.callme_text_1 убрал так как текст не нужен.

И все криво отображается!

далее: Вы предлагаете

Там в калбеке модуле div есть, помоему vopros-1 или както так, навскидку не помню, вот div с картинкой оберните дивом модуля и будет вам она кликабельна с функциями модуля обр.звонка.
Т.е. мой div вставьте вместо <php текст Обратный звонок?> в модуле обр.звонка.

Нашел папку с модулем:
Перерыл все файлы, не могу разобраться.

это просто праздник какой-то...
да при чём тут индекс шаблона?
и почему слова на картинке?они же будут искажаться в зависимости от устройства!

вам же ещё @media нужно адаптировать под мобильные и нетбуки и т.д. блока.
/// Короче ждите, по мере свободности изменю  вам калбек ваш, вам только надо будет его установить в позицию Search и опубликовать.
Вопрос:можно ли подобрать другую гифку?Или именно эта нужна?Она не качественная ну ни как!

///

Типа что-то flat-кнопки: на оранжевом фоне(раз у вас оранж) будет надпись Заказать звонок обр., сама трубочка пульсирует, сбоку телефоны, в каком виде ещё не придумал, но если идея нравится-сделаю, вы напишите стоит ли менять, чтоб не направсно делал.
Кнопка будет кликабельна со всплывашкой вашей, там соответственно тоже видо изменить кнопку в стиль и сменить бардюры под дизайн кнопки.
Жду ответ.

Вот как пульсирует кнопка:

Она состоит из двух элементов, поэтому не смог выложить сразу скомпанованную, компануется всё при поможи CSS.

Кнопка будет кликабельна со всплывашкой вашей, там соответственно тоже видо изменить кнопку в стиль и сменить бардюры под дизайн кнопки.
Жду ответ.

Если Вам не составит труда, то жду.
Если необходима помощь, готов помочь.

Кнопку делал сам, цвет выбирал чтоб в один тон с логотипом был.

А вообще конечно самому хотелось сделать потому что интересно мне это))

ок, тогда сделаю, вышлю сюда

 

ок, тогда сделаю, вышлю сюда

Опубликуйте чистый callback в нужную вам позицию (у вас Search).
http://webservice.in.ua/call.zip
Распакуйте архив, замените на папку /modules/mod_callback
Вызов всплывашки сделал только на слова "Заказать обратный звонок"

Будет(трубка пульсирует):





Обратите внимание, что я прописал также (навсяк) ссылку на телефоны.
Захотите-повесите туда ссылку на контакты, хотите-уберите.
Ещё там чёрный фон встречается иногда, т.к. я тестил на белом сайте, уберите его: /modules/mod_callback/tpl/style.css.
там же и всякие отступы можете подредактировать под себя.
Всплывашку уже сами подрихтуете, копирайт тоже сами поставите, я скрыл его, чтоб мне не мешался display: none; тут:


@media не делал, всё на скорую руку, уже сами допиливайте.
Вам всё равно там стили править, т.к. у вас на сайте белый цвет указан и слова на белом фоне на всплывашке будут невидны.

Я конечно благодарен Вам) Но не работает(
Не хочет почему-то подгружать картинки(

Не хочет почему-то подгружать картинки(

Потому что пути неправильно указаны в CSS
background: url('../../../images/c2.png')
background: #000 url('../../../images/c1.gif')
Надо вот так
background: url('../images/c2.png')
background: #000 url('../images/c1.gif')

Пути в стилях измените, у меня стояли относительные, вот у вас и ищет из папки имидж из корня.
Путь измените на папку модуля и в папку, где они лежат.
И #000 уберите, то я для себя делал, т.к. картинки "прозрачные", а у вас тёмный и так фон.
К стилям new_link добавьте     text-decoration: none; - подчёркивания не будет
Я видно в шаблоне уже ставил ранее себе.

Телефонный блок внизу.
Не могу понять какой стиль отвечает за его расположение.
И полоса на картинке. подскажите где поправить?
Спасибо!

p.s. как вариант оставить только модуль. Телефоны убрать.
и включить модуль с телефонами как было ранее.
Что скажите?

вам надо только 1 модуль включить, калбэк, там уже он с телефонами.
ваш отключите.

Ну посмотрите, у вас #callme в индексе стоит в темплейте, удалите же старый стиль этот.
У вас навсяк чистый в стиле модуля уже стоит, чтоб вы могли управлять всеми дивами сразу.