Кто сможет так?

@iluxandri · Регистрация: 12.06.2015

Студворк — интернет-сервис помощи студентам

Помогите, сделал подобное:

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

@сахей · 22.07.2015, 13:18

iluxandri, покажи свои наработки

@iluxandri · 22.07.2015, 13:45 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
#block1 {
    margin-top: 25px;
    background: #fff;
    position: relative;
    width: 225px; height: 225px;
    margin-left: 655px;
    color: #000;
}
#block1::after {
    content: ''; 
    position: absolute;
    left: -19px; top: 35px;
    border: 10px solid transparent;
    border-right: 10px solid white;
}
#block1 img {
    margin-left: -225px;
    margin-top: -107px;
}
 
 
#block2 {
    margin-top: 25px;
    background: #fff;
    position: relative;
    width: 225px; height: 225px;
    margin-left:1105px;
    margin-top: -225px;
    color: #000;
}
#block2::after {
    content: ''; 
    position: absolute;
    left: -19px; top: 35px;
    border: 10px solid transparent;
    border-right: 10px solid white;
}
#block2 img {
    margin-left: -225px;
    margin-top: -107px;
}
 
 
#block3 {
    margin-top: 25px;
    background: #fff;
    position: relative;
    width: 225px; height: 225px;
    margin-left:880px;
    margin-top: -25px;
    color: #000;
}
#block3::after {
    content: ''; 
    position: absolute;
    right: -19px; top: 35px;
    border: 10px solid transparent;
    border-left: 10px solid white;
}
#block3 img {
    margin-left: 225px;
    margin-top: -107px;
}
 
#block4 {
    margin-top: 25px;
    background: #fff;
    position: relative;
    width: 225px; height: 225px;
    margin-left:430px;
    margin-top: -225px;
    color: #000;
}
#block4::after {
    content: ''; 
    position: absolute;
    right: -19px; top: 35px;
    border: 10px solid transparent;
    border-left: 10px solid white;
}
#block4 img {
    margin-left: 225px;
    margin-top: -107px;
}
 
.block  p {
    padding: 0px 20px;
    color: #989898;
}
.block h1{
    padding: 20px 20px 0px 20px;
}
.block img{
 
    width: 225px;
    height: 225px;
}
.block {
    font-family: 'Open Sans', sans-serif;
}

after сделал в один класс, но в другом варианте

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
     <div class="block">
     <div id="block1">
        <h1>lorem</h1>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
        <img src="https://www.cyberforum.ru/img/bg8.png">
    </div>
    <div id="block2">
        <h1>lorem</h1>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
        <img src="https://www.cyberforum.ru/img/bg9.jpg">
    </div>
    <div id="block3">
        <h1>lorem</h1>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
        <img src="https://www.cyberforum.ru/img/bg10.jpg">
    </div>
    <div id="block4">
        <h1>lorem</h1>
        <p>Lorem ipsum dolor sit amet, consectetur.</p>
        <img src="https://www.cyberforum.ru/img/bg11.jpg">
    </div>
</div>

Добавлено через 18 минут
Ну,что?

@Fedor92 · 22.07.2015, 22:35

iluxandri, а чем такая вёрстка не нравится?

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
    </head>
    <style>
        html, body{width:100%;height:100%;  margin:0}
        .blocks{width:90%; height:100%;  margin:0 auto}
        #block1, #block3, #block5{float:left; width:30%; height:50%; background:red}
        #block2, #block4, #block6{float:left; width:30%; height:50%; display:table}
        p{display:table-cell; vertical-align:middle; text-align:center; font: 18px/1.25 Tahoma, monoscape}
    </style>
    <body>
         <div class="blocks">
            <div id="block1">
            
            </div>
            <div id="block2">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
            <div id="block3"></div>
            <div id="block4">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
            <div id="block5"></div>
            <div id="block6">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
    </div>
</div>
    </body>
</html>

@iluxandri · 23.07.2015, 08:55 **[ТС]**

Спасибо, но вопрос, как перенести блоки на след строку, тк, блоки у меня по 150px.

Добавлено через 18 минут
И, как мне сделать треугольник, получается какая-то фигня

@Fedor92 · 23.07.2015, 09:03

Сообщение от iluxandri

Спасибо, но вопрос, как перенести блоки на след строку, тк, блоки у меня по 150px.

Сделать общий див 450px - это же решение напрашивается...

Сообщение от iluxandri

И, как мне сделать треугольник, получается какая-то фигня

Какой ещё треугольник? Зачем Вы себе проблемы придумываете? Есть три чётных дива и три нечётных... Три с текстом - три с картинками... Причём три дива с картинками и три дива с текстом - по содержанию разные... Из чего вывод, что их должно быть именно шесть, а не три или четыре или два... Короче я Вам предложил вариант, если не нравится: на нет и суда нет...

@iluxandri · 23.07.2015, 10:16 **[ТС]**

Там есть текст, и треугольник в картинку. посмотри вверху. как сделатЬ7

@Fedor92 · 23.07.2015, 12:04

iluxandri, не умеете баблс делать?

Это не треугольники...

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML>
<html>
    <head>
        <title>Database Site Template</title>
        <meta charset="utf-8">
    </head>
    <style>
        html, body{width:100%;height:100%;  margin:0}
        .blocks{width:450px; height:300px;  margin:0 auto}
        #block1, #block3, #block5{float:left; width:150px; height:150px; background:red}
        #block2, #block4, #block6{float:left; position:relative; width:150px; height:150px; display:table}
        p{display:table-cell; vertical-align:middle; text-align:center; font: 18px/1.25 Tahoma, monoscape}
        #block2:after{content: ''; position: absolute; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; left: -10px; top: 21px;}
        #block4:after{content: ''; position: absolute; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; right: -9px; top: 21px;}
        #block6:after{content: ''; position: absolute; border-style: solid; border-width: 0 10px 10px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; top: -9px; left: 115px;}
    </style>
    <body>
         <div class="blocks">
            <div id="block1"></div>
            <div id="block2">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
            <div id="block3"></div>
            <div id="block4">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
            <div id="block5"></div>
            <div id="block6">
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
            </div>
    </div>
</div>
    </body>
</html>

Когда будете ставить картинки в свойстве картинок пропишите position:relative... Обязательно! А лучше вставьте картинки фоном в блок будет меньше мороки... А по центру иконочный шрифт для пиктограмм, если найдёте конечно подходящий...

@iluxandri · 23.07.2015, 15:09 **[ТС]**

У bubble, тоже надо было relative поставить, а так спасибо, добился того, чего хотел

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@iluxandri 0 / 0 / 0 Регистрация: 12.06.2015 Сообщений: 57

	Кто сможет так? 22.07.2015, 13:08. Показов 682. Ответов 8 Метки нет (Все метки) Помогите, сделал подобное: Но получилось, что когда меняю текст все сьезжает, кто сделает, буду благодарен, можно и без иконки, на картинки. 0

@сахей 65 / 65 / 20 Регистрация: 26.02.2013 Сообщений: 336 Записей в блоге: 1
	22.07.2015, 13:18
	iluxandri, покажи свои наработки 0

@iluxandri 0 / 0 / 0 Регистрация: 12.06.2015 Сообщений: 57
	23.07.2015, 08:55 [ТС]
	Спасибо, но вопрос, как перенести блоки на след строку, тк, блоки у меня по 150px. Добавлено через 18 минут И, как мне сделать треугольник, получается какая-то фигня 0

@iluxandri 0 / 0 / 0 Регистрация: 12.06.2015 Сообщений: 57
	23.07.2015, 10:16 [ТС]
	Там есть текст, и треугольник в картинку. посмотри вверху. как сделатЬ7 0

@iluxandri 0 / 0 / 0 Регистрация: 12.06.2015 Сообщений: 57
	23.07.2015, 15:09 [ТС]
	У bubble, тоже надо было relative поставить, а так спасибо, добился того, чего хотел 0