Подскажите как сделать border

@Evgeniy55 · Регистрация: 14.03.2014

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

Добрый вечер, целый день пытаюсь понять как реализовать border как на картинке (без применения float к блокам, только flex или inline-block), но какие бы я манипуляции не делал, безуспешно, помогите решить проблему

вот как надо:

как получилось:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
header.main_header.container_mod
            ul.gl_list
                li.gl_item
                    div.subscribe_block
                        div.subscribe_text
                            p Subscribe Now
                        div.subscribe
                            div.subscribe_w
                                a.subscribe_ico.fb(href="#")
                            div.subscribe_w
                                a.subscribe_ico.tw(href="#")
                            div.subscribe_w
                                a.subscribe_ico.rss(href="#")
 
            ul.gl_list.space_between_mod
                li.gl_item
                    div.logo_block
                        div.logo_text
                            p <span class="red_mod">news</span><span class="black_mod">plex</span><br>
                                |<span class="grey_mod">premium magazine theme</span>
                li.gl_item
                    div.banner_block
                        div.banner_w 468x60

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
$width-global: 1220px;
$margin-global: 130px;
 
$width-main: 961px;
 
$font-main: Arial, Verdana, sans-serif;
$font-add: Anton, Arial, sans-serif;
 
$bg-main: #f3ede4;
$bg-1: #1a1c20;
$bg-2: #d9042b;
$bg-3: #fbfbfa;
 
$text-color-1: #d9042b;
$text-color-2: #1d2024;
$text-color-3: #303030;
$text-color-4: #9d9da1;
 
$border-color-1: #dadada;
 
@mixin maket-margin($maket-width: 1220px, $maket-margin: 130px) {
  margin-left: ($margin-global / $width-global) * 100%;
  margin-right: ($margin-global / $width-global) * 100%;
}
 
body {
  font-family: $font-main;
  background: $bg-main;
}
 
.container_mod {
  @include maket-margin()
}
 
/*header start*/
 
.subscribe_block {
  outline: 1px solid darkgreen;
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-bottom: 50px;
  border-top: 5px solid $bg-1;
}
 
.subscribe_text {
  padding-right: (80px / $width-main)*100%;
  color: $text-color-3;
}
 
.subscribe {
  padding-right: (20px / $width-main)*100%;
}
 
 
.subscribe_w {
  display: inline-block;
}
 
.subscribe_ico {
  display: block;
  width: 16px;
  height: 16px;
  background: url(../i/subscribe-ico.png) no-repeat;
 
  &.fb {
    background-position: -5px -5px;
  }
  &.tw {
    background-position: -5px -31px;
  }
  &.rss {
    background-position: -5px -57px;
  }
}
 
 
.gl_list{
  &.space_between_mod {
    outline: 1px solid darkgreen;
    display: flex;
    justify-content: space-between;
  }
}
 
.logo_block {
 
}
 
.logo_text {
  padding-top: 10px;
  text-transform: uppercase;
  line-height: 1em;
 
  .red_mod {
    font-family: $font-add;
    font-size: 2.5em;
    color: $text-color-1;
  }
  .black_mod {
    font-family: $font-add;
    font-size: 2.5em;
    color: $text-color-2;
  }
  .grey_mod {
    font-family: $font-add;
    color: $text-color-4;
  }
}
 
.banner_block {
  
}
 
.banner_w {
  width: 468px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: $bg-3;
 
}

песочница: http://codepen.io/evgeniyprowe... ors=1100#0

П.С. как вставить в кодпен соц кнопки как на картинках выше я не знаю

@mrtoxas · 03.09.2016, 20:46

Добавьте

CSS
1
2
3
4
5
.gl_list{
  margin: 0;
  padding: 0;
  list-style: none;
}

@Evgeniy55 · 03.09.2016, 20:51 **[ТС]**

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

.gl_list{
* margin: 0;
* padding: 0;
* list-style: none;
}

у меня для этого есть reset.css, я не понимаю как сделать рамку как на первой картинке в верхнем правом углу

@mrtoxas · 03.09.2016, 20:52

Не по теме:

Да я уже понял, сбило с толку то, что все поехавшее в кодепене было

@Fedor92 · 03.09.2016, 21:11

Evgeniy55, попробуйте убрать у блока с классом .subscribe_block свойство:

CSS
1
padding-top:8px

И добавить для блока .subscribe_text такие свойства:

CSS
1
2
3
border-left: 3px solid yellow;
border-right: 3px solid yellow;
border-bottom: 3px solid yellow

Как вариант, если я правильно понял суть вопроса.

@Evgeniy55 · 03.09.2016, 21:17 **[ТС]**

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

И добавить для блока .subscribe_text такие свойства:
CSSВыделить код
1
2
3
border-left: 3px solid yellow;
border-right: 3px solid yellow;
border-bottom: 3px solid yellow
Как вариант, если я правильно понял суть вопроса.

почти... мне нужно чтобы рамка была не только вокруг .subscribe_text, а общая вокруг .subscribe_text и div.subscribe(соц кнопки) как на первом скрине, вот это как реализовать ?

@mrtoxas · 03.09.2016, 21:22

Вот вам суть.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
  display:flex;
  justify-content: flex-end;
  align-items: flex-start;
  border:1px solid red;
  width:80%;
  margin:0 auto;
  height:50px;
}
.subsc{
  padding:5px;
  border:1px solid black;
}

HTML5
1
2
3
4
5
6
7
8
<div class="box">  
<div class="subsc">
  <span>Subscribe</span>
  <a href="#">F</a>
  <a href="#">T</a>
  <a href="#">V</a>
  </div>
</div>

Результат

@Fedor92 · 03.09.2016, 21:22

Evgeniy55, а сделать общую обёртку для двух блоков не вариант?

@Evgeniy55 · 03.09.2016, 22:53 **[ТС]**

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

Вот вам суть.

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

Evgeniy55, а сделать общую обёртку для двух блоков не вариант?

делал обертку, только получалась такая фигня что либо текст переносился, либо соц кнопки переносились на вторую строку, в примере кодпена mrtoxas я когда дописал:

HTML5
1
span {padding-right: 20%;}

получилось также, начало слезать на 2ую строку, но стоило мне поменять проценты на "em" и все устаканилось, я понимаю что ширина ни одному блоку не задана и поэтому в моем случае стоит вопрос "процент от чего оно должно считать ?", но все же если идет фактический отступ за счет процента почему тогда переносит на вторую строку ? ведь есть же место, я тогда эту логику не пойму что то

@mrtoxas · 03.09.2016, 23:32

Просто не надо задавать проценты непонятно от чего. И все будет хорошо

@Evgeniy55 · 03.09.2016, 23:36 **[ТС]**

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

Просто не надо задавать проценты непонятно от чего. И все будет хорошо

понял..спасибо

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@mrtoxas
	03.09.2016, 20:52
	Не по теме: Да я уже понял, сбило с толку то, что все поехавшее в кодепене было 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.09.2016, 21:22
	Evgeniy55, а сделать общую обёртку для двух блоков не вариант? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.09.2016, 23:32
	Просто не надо задавать проценты непонятно от чего. И все будет хорошо 0

Подскажите как сделать border

Решение