Posted 23 мая, 20232 yr Здравствуйте скажите пожалуйста, как сделать такие же блоки ? То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. .
24 мая, 20232 yr Ну для примера можно использовать комбинацию 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 представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков. Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка. Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.
24 мая, 20232 yr 11 часов назад, Axxxmatov сказал: Здравствуйте скажите пожалуйста, как сделать такие же блоки ? То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. . Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать?
24 мая, 20232 yr Author 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 представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков. Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка. Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям. Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ?
24 мая, 20232 yr 45 минут назад, Axxxmatov сказал: Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы) А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает? Ну давайте я вам тогда помогу. Заходите в АЦ в приложение Страницы 1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки. 2. Создаёте блок с выводом нужной вам информации 3. Создаёте ,если нужно,шаблон для этого блока. 4.В созданной новой странице размещаете код блока в нужном вам месте. И все это стандартными средствами.
24 мая, 20232 yr Author 26 минут назад, AHristich сказал: А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает? Ну давайте я вам тогда помогу. Заходите в АЦ в приложение Страницы 1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки. 2. Создаёте блок с выводом нужной вам информации 3. Создаёте ,если нужно,шаблон для этого блока. 4.В созданной новой странице размещаете код блока в нужном вам месте. И все это стандартными средствами. Из всего этого, я понял что надо зайти в Ац, и создать страницу 🤣 Не проще код, готовый кто то скинул бы и все) Или пример Выше код не работает
25 мая, 20232 yr 19 часов назад, Axxxmatov сказал: Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ? Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице.
25 мая, 20232 yr 1 час назад, ryancoolround сказал: Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице. Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя. Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков. И все это адаптивно.
25 мая, 20232 yr Author 8 часов назад, AHristich сказал: Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя. Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков. И все это адаптивно. Опять вы со своими документациями)
26 мая, 20232 yr Author В 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> Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ?
26 мая, 20232 yr 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/
26 мая, 20232 yr Author 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/ Можете пожалуйста вот из этого кода, просто сделать что бы они в ряд были, я что то не могу. Я в программировании мало что понимаю.
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.