Как сделать левый border c отступом?

@SergeyAM555 · Регистрация: 17.03.2016

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
   .div1, .div2 {
   display: block;
   line-height:14px;
   
   border: solid gray;
   border-width: 0 0 0 1px;
}
.div1 { background-color: #ffcccc; }
.div2 { background-color: #fffccc; }
</style>
<div class="div1">текст текст текст текст текст</div>
<br />
<div class="div2">текст текст текст текст текст</div>

Задача такая. Есть два блока одинаковой высоты (14). Нужно чтобы у верхнего блока, левая рамка была с регулируемым отступом сверху, т е высота рамки меньше чем у нижнего. При переносе текста рамки растягиваются. Оба дива будут прозрачными без фона;

Добавлено через 8 минут
Должно работать в IE6-..... есть у меня еще такие .

@dzendev · 17.03.2016, 11:06

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

Нужно чтобы у верхнего блока, левая рамка была с регулируемым отступом сверху, т е высота рамки меньше чем у нижнего. При переносе текста рамки растягиваются. Оба дива будут прозрачными без фона;

Не понятно что Вы хотите. Может картинку какую сделаете.

@Kraken73 · 17.03.2016, 12:04

если я правильно понял то
https://jsfiddle.net/r2d4x7bw/2/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="content">
   <div class="content_wrap">
     <div class="border_content">
       Текст  Текст  Текст  Текст  Текст  Текст  Текст 
       Текст м Текст  Текст  Текст  Текст  Текст  Текст 
       Текст  Текст  Текст  Текст  Текст  Текст  Текст 
     </div>
   </div>
</div>
 
<div class="content">
  <div class="content_wrap">
     Текст  Текст  Текст  Текст  Текст  Текст 
    Текст  Текст  Текст  Текст  Текст  Текст 
     Текст  Текст  Текст  Текст  Текст  Текст 
      Текст  Текст  Текст  Текст  Текст  Текст 
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.content {
  border:1px solid aqua;
  height:150px;
  margin: 50px;
}
.content_wrap {
  margin:10px;
}
.border_content {
  margin-left:200px;
}

и у класса .border_content регулируй отступ слева

@SergeyAM555 · 17.03.2016, 14:29 **[ТС]**

Нет, не правильно понял. Левый бордер у 1-го блока должен быть ниже по высоте чем блок, у второго левая линия на всю высоту Для меню нужно.
Уже вроде сделал. Проверю и завтра покажу что хотел. Может найдется решение по лучше.

@SergeyAM555 · 17.03.2016, 20:09 **[ТС]**

Вот что получилось.
Не знал как уменьшить по высоте border-left у первого элемента. Решил отрицательным margin-top-ом (Вывел внутренний блок .ele за границы внешнего .wrap). Ну и немного продолжил делать меню.
Название: результат.png
Просмотров: 29

Размер: 982 байт

Название: результат.png
Просмотров: 29

Размер: 982 байт

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

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
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
<!DOCTYPE html PUBLIC>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<style type="text/css" media="all">
 body {font-family: Arial, Tahoma, sans-serif; margin: 10px; font-size: 12px;}
  ul, li { 
   list-style: none;
   list-style-type:none; 
   list-style-image:none;
   list-style-position:outside;
   margin:0; padding:0;
   vertical-align : top;
}
 
ul li { 
   line-height: 18px; 
   padding-top: 10px;
   zoom: 1;
} 
 
ul li.next { padding-top: 0px; }
.wrap {
   border-style: solid; 
   border-width: 1px 1px 0 1px; 
   border-color: transparent transparent red red; 
   display: block;
   positon:relative;   
   _border-top-color: #ff00ff;
   _filter:chroma(color=#ff00ff);
   _height: 1px; 
   zoom:1; 
   zmargin: 0 0 0 14px;
 
}
.ele {
      position:relative; 
      margin:-10px 0 0 0;
      padding : 0 0 4px 10px;
      zoom:1;
}
.ele.next {
   margin: 0;
}
 
.ele:after {
   content: ''; display: block; clear: both;
}
.ele p {
   top: 10px;
   background-color:#ffcccc;
   display:block;
   position:relative;
   float:left; 
   margin: 0;
}
 
 .bl { 
  position: absolute;
  width: 8px; 
  border: solid green; 
  border-width: 1px 0 0 0; 
  margin-left:-1px;
 }
</style>
 
<body>
<ul>
<li>
   <div class="wrap">
      <div class="ele"><p>ddfffff через через через через через</p></div>
      <div class="bl"></div>
   </div>
</li>
<li class="next">
   <div class="wrap">
      <div class="ele next"><p>ddfffff через через через через через</p></div>
      <div class="bl"></div>
   </div>
</li>
</ul>
</body>
</html>

@dzendev · 18.03.2016, 09:16

Вы так и не сделали картинку того что хотите получить. Из вашего текста я этого понять не могу.

@SergeyAM555 · 18.03.2016, 12:21 **[ТС]**

Странно. У меня рисунок отображается нормально, у Вас нет некоторых линий. Вот еще раз :
Название: result.JPG
Просмотров: 24

Размер: 32.2 Кб

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

Прежде чем делать смотрел примеры. но там решается проблема либо закрашиванием линий (наложением фона элементов), либо картинками. Мне это не подходит.

Как бы сделал уже, но интересны были варианты.

PHP/HTML
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
<!DOCTYPE html PUBLIC>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<style type="text/css" media="all">
body {
    font-family: Arial, Tahoma, sans-serif; margin: 10px; font-size: 12px;
    background: transparent url('gif/back.gif');
}
 
ul.mm-l, li { 
    list-style: none;
    list-style-type:none; 
    list-style-image:none;
    list-style-position:outside;
    margin:0; padding:0;
    vertical-align : top;
}
 
 
ul.mm-l li ul.mm-l li, .mm-w  { margin: 0 0 0 14px;}
ul.mm-l li ul.mm-l li { border-left: 1px solid silver; }
 
ul.mm-l li { 
    line-height: 14px; 
    padding-top: 10px;
    /* для IE6-7 */
    zoom: 1;
} 
 
ul.mm-l li.next { padding-top: 0px; } 
 
.mm-w { /* main menu wrap */
    border-left: solid 1px red; 
    display: block;
    positon: relative;   
    padding: 6px 0 0 10px; /*расстояние между элементами + отступ слева*/
    zoom: 1;
}
 
.mm-e { /* main menu element */
    top: 6px;
    display: block;
    position: relative; 
    margin-top: -10px; /*регулируем левую рамку по высоте*/
    padding : 0 2px 0 0;
    float:left; 
    zoom: 1;
    
    border: solid 1px green;
}
 
.mm-e.next { margin-top: 0; } /*левая рамка на всю высоту блока*/
 
.mm-w:after { content: ''; display: block; clear: both; }
 
.bl { /* нижняя линия */
    position: relative;
    width: 8px; 
    border-bottom: 1px solid green; 
    padding:0;
    margin: 0 0 0 14px;
    line-height:0px; font-size:0px;
}
 
</style>
 
<body>
<br />
<br />
<div id="tt" style="border: solid 1px blue; padding:5px 10px 10px 230px;">
<ul class="mm-l">
<li>
    <div class="mm-w"><div class="mm-e">Элемент 1</div></div>
    <div class="bl"></div>
    <!--<ul class="mm-l">
        <li>
            <div class="mm-w"><div class="mm-e">ddfffff через через через через через</div></div>
            <div class="bl"></div>
        </li>
        <li class="next">
            <div class="mm-w"><div class="mm-e next">ddfffff через через через через через</div></div>
            <div class="bl"></div>
        </li>
    </ul>
</li>-->
<li class="next">
    <div class="mm-w"><div class="mm-e next">Элемент 2</div></div>
    <div class="bl"></div>
</li>
</ul>
</div>
<br />
<br />
<br />
 
</body>
</html>

@SergeyAM555 · 19.03.2016, 10:00 **[ТС]**

Ну или вот :
Ограниченная по высоте левая/( можно правая) линия

PHP/HTML
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
<!DOCTYPE html PUBLIC>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<style type="text/css" media="all">
 body {font-family: Arial, Tahoma, sans-serif; margin: 10px; font-size: 14px;}
 
.wrap {
   display: block;
   position:relative;
   border-left: 1px solid red; 
   padding: 0 0 1px 0;
   line-height:20px;
}
.ele {
      display: block;
      background-color: #ffcccc;
      positon:relative;
      margin-top:-8px;
      float:left;
}
</style>
<body>
<div style="border: solid 1px blue; padding: 18px 10px 18px 10px;">
   <div class="wrap">
      <div class="ele">Элемент</div><div style="clear:both;"></div>
   </div>
</div>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
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 19.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. Пошагово создадим проект для загрузки изображения. . .

@SergeyAM555 0 / 0 / 0 Регистрация: 17.03.2016 Сообщений: 7
	17.03.2016, 14:29 [ТС]
	Нет, не правильно понял. Левый бордер у 1-го блока должен быть ниже по высоте чем блок, у второго левая линия на всю высоту Для меню нужно. Уже вроде сделал. Проверю и завтра покажу что хотел. Может найдется решение по лучше. 0

@dzendev 181 / 103 / 48 Регистрация: 12.03.2016 Сообщений: 260
	18.03.2016, 09:16
	Вы так и не сделали картинку того что хотите получить. Из вашего текста я этого понять не могу. Миниатюры 0