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

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3


Нужно сделать так, чтобы текст с перьями были как на скриншоте.
Я пытался сделать сам через правки в CSS файле но все равно получается криво.
Посмотрите пожалуйста.
Вот ссылка на страницу http://m.kaztranslate.kz/index.php/franshiza

Сайт на joomla 2.5 но создал тему в этом разделе, так как тут вроде больше людей.

*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #1 : 24.02.2022, 18:47:34 »
Я пытался сделать сам через правки в CSS файле но все равно получается криво.
Структура оставляет желать лучшего!
Но Вам поможет сетка grid что бы сделать три столбца и каждый элемент flex для того что бы выровнять по вертикали...
Код: html
<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);">
    <div id="sozd">
        <img src="/images/list1.jpg" border="0" width="40" height="114"> 
        <p>Самый выгодный паушальный взнос среди конкурентов!</p> 
    </div>
    <div id="podd">
        <img src="/images/list2.jpg" border="0" width="40" height="114">
        <p><b>Роялти:</b> 5% от оборота при не выполнении плана продаж в 400 000 тенге (~900$ или 70 000 руб) в месяц. <span style="color: #3366ff;"><em>(Скидка! Первые 4 месяца без роялти)</em></span></p>
    </div>
    <div id="perevodozvuchka">
        <img src="/images/list3.jpg" border="0" width="40" height="114">
        <p>
            <b>Стартовые инвестиции: от 970 000 тенге (~2 200$ или 160 000 руб) </b><em style="color: #3366ff;">*Стартовые инвестиции могут быть намного меньше в случае, если данная фарншиза будет в виде дополнительного бизнеса.</em>
        </p>
    </div>
</div>
Код: css
#obshee > div {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: large;
    font-weight: 600;
}
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3
Re: Сделать картинки по горизонтали
« Ответ #2 : 25.02.2022, 07:10:14 »
Структура оставляет желать лучшего!
Но Вам поможет сетка grid что бы сделать три столбца и каждый элемент flex для того что бы выровнять по вертикали...
Код: html
<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);">
    <div id="sozd">
        <img src="/images/list1.jpg" border="0" width="40" height="114"> 
        <p>Самый выгодный паушальный взнос среди конкурентов!</p> 
    </div>
    <div id="podd">
        <img src="/images/list2.jpg" border="0" width="40" height="114">
        <p><b>Роялти:</b> 5% от оборота при не выполнении плана продаж в 400 000 тенге (~900$ или 70 000 руб) в месяц. <span style="color: #3366ff;"><em>(Скидка! Первые 4 месяца без роялти)</em></span></p>
    </div>
    <div id="perevodozvuchka">
        <img src="/images/list3.jpg" border="0" width="40" height="114">
        <p>
            <b>Стартовые инвестиции: от 970 000 тенге (~2 200$ или 160 000 руб) </b><em style="color: #3366ff;">*Стартовые инвестиции могут быть намного меньше в случае, если данная фарншиза будет в виде дополнительного бизнеса.</em>
        </p>
    </div>
</div>
Код: css
#obshee > div {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: large;
    font-weight: 600;
}

Здравствуйте. Спасибо.
Да все работает. Я убрал черные рамки, которые занимали место. Это был s5_component_wrap я сделал padding 0px и убрал его чтобы можно было расширить растояние между блоками с текстом.

так как я его убрал и стало больше места, можете увеличить растояние между блоками с листьями? Как на этом скриншоте?


*

marksetter

  • Захожу иногда
  • 367
  • 7 / 0
Re: Сделать картинки по горизонтали
« Ответ #3 : 25.02.2022, 08:54:06 »
так если убрали padding то верните его для #obshee > div

*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #4 : 25.02.2022, 09:05:05 »
так как я его убрал и стало больше места, можете увеличить растояние между блоками с листьями? Как на этом скриншоте?
В этом Вам поможет свойство grid-gap
Код: html
<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap:16px;">
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3
Re: Сделать картинки по горизонтали
« Ответ #5 : 25.02.2022, 19:32:16 »
В этом Вам поможет свойство grid-gap
Код: html
<div id="obshee" style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap:16px;">

Да, все получилось. Но у меня таких блоков с листьями штук 6. Я думал что остальные 3 штуки сам сделаю на основании вашего примера. А можно ли в этой сетке создать 6 штук? или можно просто скопировать ваш код но уже с другим текстом и картинками?
Если можно сделать 6 штук то как это сделать?
Должно быть как на этом скрине

*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #6 : 25.02.2022, 21:11:53 »
А можно ли в этой сетке создать 6 штук?
Код: css
grid;grid-template-columns: repeat(6, 1fr);
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3
Re: Сделать картинки по горизонтали
« Ответ #7 : 26.02.2022, 14:21:11 »
grid;grid-template-columns: repeat(6, 1fr)

Сделал 6 штук, но теперь новые 3 штуки все стали только по горизонтали (скриншот прикрепил).
А можно ли сделать так, чтобы остальные 3 штуки стояли снизу? Или может ваш код еще раз повторить но уже поменять название дивов с новыми картинками и текстом?


*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #8 : 26.02.2022, 14:32:25 »
Сделал 6 штук, но теперь новые 3 штуки все стали только по горизонтали (скриншот прикрепил).
А можно ли сделать так, чтобы остальные 3 штуки стояли снизу? Или может ваш код еще раз повторить но уже поменять название дивов с новыми картинками и текстом?
Если вам нужно три колонки то измените с 6 на 3 и в коде добавьте новые 3 элемента, и они будут выводиться с низу как 2-й ряд
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3
Re: Сделать картинки по горизонтали
« Ответ #9 : 26.02.2022, 15:26:40 »
Если вам нужно три колонки то измените с 6 на 3 и в коде добавьте новые 3 элемента, и они будут выводиться с низу как 2-й ряд

Хорошо, попробую.
Я заметил, что в мобильной версии блоки не адаптируются, а сжимаются и все равно остаются в горизонтальном положении. (Скриншот прикрепил).
Как сделать так чтобы блоки с листьями были в вертикальном положении как на втром скриншоте? (скриншот тоже прикрепил).

*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #10 : 26.02.2022, 17:55:58 »
Как сделать так чтобы блоки с листьями были в вертикальном положении как на втром скриншоте?
Используя медиа запросы на определенном расширении укажите один столбец
Код: css
@media (max-width: 767.98px){
grid-template-columns: repeat(1, 1fr);
}
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

arma

  • Завсегдатай
  • 1728
  • 81 / 2
Re: Сделать картинки по горизонтали
« Ответ #11 : 26.02.2022, 18:21:01 »
Ну и при чём здесь "joomla - общие вопросы"? Человек просто не стремится  и не желает знать CSS - а вы ему просто код напишите
*

62411

  • Осваиваюсь на форуме
  • 47
  • 0 / 3
Re: Сделать картинки по горизонтали
« Ответ #12 : 26.02.2022, 19:32:00 »
@media (max-width: 767.98px){
grid-template-columns: repeat(1, 1fr);
}

Вставил в template.css но не работает.
Это в CSS файл надо вставлять или в сам материал?
*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #13 : 26.02.2022, 19:41:01 »
Вставил в template.css но не работает.
Я больше чем уверен что как дал код так и вставили, и даже не хотите включать голову! Конечно же это только часть кода....
Код: css
@media (max-width: 767.98px){
    #obshee {
        grid-template-columns: repeat(1, 1fr)!important;
    }
}
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
*

NewUsers

  • Живу я здесь
  • 2253
  • 203 / 0
  • +375 (25) 627-16-99 (WhatsApp, Telegram)
Re: Сделать картинки по горизонтали
« Ответ #14 : 27.02.2022, 15:06:43 »
А можно ли сделать так, чтобы остальные 3 штуки стояли снизу? Или может ваш код еще раз повторить но уже поменять название дивов с новыми картинками и текстом?
Вот как вам надо было сделать (не создавать новый div, а добавить в существующий)
Занимаюсь создание расширений для Joomla 3.9.x или выше | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на ЮMoney (бывшие Яндекс.Деньги). Помогу с переездом на PHP 7.x и исправлю ошибки PHP.
Занимаюсь создание Интернет магазинов с нуля на собственном компоненте + оптимизация загрузки страницы (после предоставляю техподдержку).
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Вывод картинки, находящейся внутри нескольких блоков, на всю ширину экрана

Автор GuDeVic

Ответов: 10
Просмотров: 282
Последний ответ 26.05.2022, 17:42:59
от marksetter
Как вставить описание картинки в Joomla 3.10.8?

Автор Benderalfa

Ответов: 8
Просмотров: 286
Последний ответ 25.04.2022, 21:51:55
от Benderalfa
Как сделать MVC Override в 2021-ом?

Автор fearlessfox

Ответов: 0
Просмотров: 174
Последний ответ 20.11.2021, 14:55:18
от fearlessfox
Не могу добавлять картинки, на доску объявлений

Автор igorMas

Ответов: 5
Просмотров: 255
Последний ответ 03.11.2021, 12:44:19
от arma
[Solved]Как сделать поле для количества с кнопками + -?

Автор Viclingvolive

Ответов: 5
Просмотров: 406
Последний ответ 18.10.2021, 10:30:19
от gartes