как сделать такеи блоки?

Posted 23 мая, 20231 yr

comment_193549

Здравствуйте скажите пожалуйста, как сделать такие же блоки ?
То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. .

Цитата

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 представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков.

Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка.

Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.

Цитата

24 мая, 20231 yr

comment_193567

11 часов назад, Axxxmatov сказал:

Здравствуйте скажите пожалуйста, как сделать такие же блоки ?
То есть в ряду 3 блока с фотками под ним описание и кнопка переводит на страницу. .

Это все можно сделать с помощью стандартных средств движка,но долго объяснять,потому что получится пересказ документации по приложению Pages (Страницы),кстати,ссылку на которую вам скидывал в другой вашей теме. Лень читать/изучать?

Цитата

Axxxmatov
1

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 представляет отдельный блок с фотографией и описанием. Ты можешь добавить несколько таких блоков на свою страницу, чтобы получить ряд из трех блоков.

Замени "путь_к_изображению" на фактический путь к изображению, "Описание изображения" на текст, описывающий изображение, "Заголовок описания" на заголовок блока, "Текст описания блока" на описание блока и "ссылка_на_страницу" на адрес страницы, на которую должна переходить кнопка.

Это просто базовый пример, и ты можешь доработать стили и расположение блоков согласно своим потребностям.

Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ?

Цитата

24 мая, 20231 yr

comment_193591

45 минут назад, Axxxmatov сказал:

Не то что лень, а пока я потрачу 6 часов на разбор и нечего не пойму тут опытные люди скажут где и что конкретно смотреть и читать, а не как вы)

А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает?

Ну давайте я вам тогда помогу.

Заходите в АЦ в приложение Страницы

1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки.

2. Создаёте блок с выводом нужной вам информации

3. Создаёте ,если нужно,шаблон для этого блока.

4.В созданной новой странице размещаете код блока в нужном вам месте.

И все это стандартными средствами.

Цитата

Axxxmatov
1

24 мая, 20231 yr

Author

comment_193594

26 минут назад, AHristich сказал:

А вы думаете что опытные люди смОгут объяснить что-то в трёх словах тому кто в этом ничего не понимает?

Ну давайте я вам тогда помогу.

Заходите в АЦ в приложение Страницы

1. Создаёте новую страницу,в ней размещаете вёрстку в виде колонок или сетки.

2. Создаёте блок с выводом нужной вам информации

3. Создаёте ,если нужно,шаблон для этого блока.

4.В созданной новой странице размещаете код блока в нужном вам месте.

И все это стандартными средствами.

Из всего этого, я понял что надо зайти в Ац, и создать страницу 🤣

Не проще код, готовый кто то скинул бы и все) Или пример Выше код не работает

Цитата

AHristich
1

25 мая, 20231 yr

comment_193610

19 часов назад, Axxxmatov сказал:

Брат, дай бог тебе здоровья, но почему то размеры не меняется, есть вариант почему ?

Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице.

Цитата

Axxxmatov
1

25 мая, 20231 yr

comment_193613

1 час назад, ryancoolround сказал:

Если размеры не меняются, возможно, это связано с другими правилами CSS, примененными на твоей странице.

Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя.

Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков.

1920591264_2022-03-1220-42-13.png.ef28c4bdd18bb0102978e2ac5143d947.png.a5d1e5172fd3c41812a0ab4b0e8a7dce.png

И все это адаптивно.

Цитата

Axxxmatov
1

25 мая, 20231 yr

Author

comment_193621

8 часов назад, AHristich сказал:

Для таких случаев есть стандартные ips-овские классы адаптивности. А как их применять можно увидеть в документации... Но это не в правилах данного юзверя.

Вот личный пример главной страницы,где используются только стандартные ипсовские разметка,классы и выводится все с помощью блоков.

И все это адаптивно.

Опять вы со своими документациями)

Цитата

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>

Это один блок, пример, вот у меня три таких, но как их сделать в ряд что бы были они ?

Цитата

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/

Цитата

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/

Можете пожалуйста вот из этого кода, просто сделать что бы они в ряд были, я что то не могу. Я в программировании мало что понимаю.

Цитата

Sign In

как сделать такеи блоки?

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search