Posted 23 мая, 20231 yr comment_193549 Здравствуйте скажите пожалуйста, как сделать такие же блоки ? То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. . Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/ Share on other sites Больше вариантов
24 мая, 20231 yr comment_193566 Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать: HTML: <div class="block"> <div class="image"> <img src="путь_к_изображению" alt="Описание изображения"> </div> <div class="description"> <h3>Заголовок описания</h3> <p>Текст описания блока.</p> <a href="ссылка_на_страницу">Перейти</a> </div> </div> CSS: .block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; } .image { width: 100%; max-width: 300px; /* Измените размер по своему усмотрению */ } .description { margin-top: 10px; } h3 { margin-bottom: 5px; } a { display: inline-block; padding: 10px 20px; background-color: #f2f2f2; text-decoration: none; color: #333; border-radius: 5px; } В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков. Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка. Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям. Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193566 Share on other sites Больше вариантов
24 мая, 20231 yr comment_193567 11 часов назад, Axxxmatov сказал: Здравствуйте скажите пожалуйста, как сделать такие же блоки ? То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. . Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать? Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193567 Share on other sites Больше вариантов
24 мая, 20231 yr Author comment_193585 10 часов назад, AHristich сказал: Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать? Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы) 11 часов назад, ryancoolround сказал: Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать: HTML: <div class="block"> <div class="image"> <img src="путь_к_изображению" alt="Описание изображения"> </div> <div class="description"> <h3>Заголовок описания</h3> <p>Текст описания блока.</p> <a href="ссылка_на_страницу">Перейти</a> </div> </div> CSS: .block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; } .image { width: 100%; max-width: 300px; /* Измените размер по своему усмотрению */ } .description { margin-top: 10px; } h3 { margin-bottom: 5px; } a { display: inline-block; padding: 10px 20px; background-color: #f2f2f2; text-decoration: none; color: #333; border-radius: 5px; } В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков. Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка. Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям. Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ? Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193585 Share on other sites Больше вариантов
24 мая, 20231 yr comment_193591 45 минут назад, Axxxmatov сказал: Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы) А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает? Ну давайте я вам тогда помогу. Заходите в АЦ в приложение Страницы 1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки. 2. Создаёте блок с выводом нужной вам информации 3. Создаёте ,если нужно,шаблон для этого блока. 4.В созданной новой странице размещаете код блока в нужном вам месте. И все это стандартными средствами. Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193591 Share on other sites Больше вариантов
24 мая, 20231 yr Author comment_193594 26 минут назад, AHristich сказал: А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает? Ну давайте я вам тогда помогу. Заходите в АЦ в приложение Страницы 1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки. 2. Создаёте блок с выводом нужной вам информации 3. Создаёте ,если нужно,шаблон для этого блока. 4.В созданной новой странице размещаете код блока в нужном вам месте. И все это стандартными средствами. Из всего этого, я понял что надо зайти в Ац, и создать страницу 🤣 Не проще код, готовый кто то скинул бы и все) Или пример Выше код не работает Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193594 Share on other sites Больше вариантов
25 мая, 20231 yr comment_193610 19 часов назад, Axxxmatov сказал: Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ? Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице. Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193610 Share on other sites Больше вариантов
25 мая, 20231 yr comment_193613 1 час назад, ryancoolround сказал: Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице. Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя. Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков. И все это адаптивно. Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193613 Share on other sites Больше вариантов
25 мая, 20231 yr Author comment_193621 8 часов назад, AHristich сказал: Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя. Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков. И все это адаптивно. Опять вы со своими документациями) Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193621 Share on other sites Больше вариантов
26 мая, 20231 yr Author comment_193630 В 24.05.2023 в 07:04, ryancoolround сказал: Ну для примера можно использовать комбинацию HTML, CSS и возможно JavaScript. Вот простой пример кода, который может тебе помочь начать: HTML: <div class="block"> <div class="image"> <img src="путь_к_изображению" alt="Описание изображения"> </div> <div class="description"> <h3>Заголовок описания</h3> <p>Текст описания блока.</p> <a href="ссылка_на_страницу">Перейти</a> </div> </div> CSS: .block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; } .image { width: 100%; max-width: 300px; /* Измените размер по своему усмотрению */ } .description { margin-top: 10px; } h3 { margin-bottom: 5px; } a { display: inline-block; padding: 10px 20px; background-color: #f2f2f2; text-decoration: none; color: #333; border-radius: 5px; } В этом примере .block представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков. Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка. Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям. бРАТ, ВОТ Я АЛЬТЕРНАТИВУ НАШЕЛ, ТОКА КАК ОТЦЕНТРОВАТЬ ЭТОТ КОД, ЧТО БЫ ОНИ В РЯД БЫЛИ Спойлер <div class="photo-block"> <img src="/media/123.jpg" width="400" height="400" alt="Первая фотография"> <h3>Название первой фотографии</h3> <html> <head> <meta charset="utf-8"> <title>Обратная связь</title> <style> .btn { display: inline-block; /* Строчно-блочный элемент */ background: #ADD8E6; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } </style> </head> <body> <a href="https://islamitochka.ru/index.php?/contact/" class="btn">Обратная связь</a> </body> </html> Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ? Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193630 Share on other sites Больше вариантов
26 мая, 20231 yr comment_193634 7 часов назад, Axxxmatov сказал: Опять вы со своими документациями) вопрос был "как", а не "сделайте за меня" можно воспользоваться подобными классами реализованными внутри ips https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/layout-grids-r90/ так же в ips есть js UI widget, подойдет для автоматической подгонки высоты например: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuigrid-r53/ Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193634 Share on other sites Больше вариантов
26 мая, 20231 yr Author comment_193658 21 час назад, Axxxmatov сказал: бРАТ, ВОТ Я АЛЬТЕРНАТИВУ НАШЕЛ, ТОКА КАК ОТЦЕНТРОВАТЬ ЭТОТ КОД, ЧТО БЫ ОНИ В РЯД БЫЛИ Показать контент <div class="photo-block"> <img src="/media/123.jpg" width="400" height="400" alt="Первая фотография"> <h3>Название первой фотографии</h3> <html> <head> <meta charset="utf-8"> <title>Обратная связь</title> <style> .btn { display: inline-block; /* Строчно-блочный элемент */ background: #ADD8E6; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } </style> </head> <body> <a href="https://islamitochka.ru/index.php?/contact/" class="btn">Обратная связь</a> </body> </html> Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ? 17 часов назад, Exception сказал: вопрос был "как", а не "сделайте за меня" можно воспользоваться подобными классами реализованными внутри ips https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/layout-grids-r90/ так же в ips есть js UI widget, подойдет для автоматической подгонки высоты например: https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuigrid-r53/ Можете пожалуйста вот из этого кода, просто сделать что бы они в ряд были, я что то не могу. Я в программировании мало что понимаю. Link to comment https://ipbmafia.ru/topic/25703-kak-sdelat-takei-bloki/?&do=findComment&comment=193658 Share on other sites Больше вариантов
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.