Ограниченая по высоте левая рамка

sarcus · March 17, 2016

<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-..... есть у меня еще такие .

wwt · March 17, 2016

On 3/17/2016 at 5:43 AM, sarcus said:
Должно работать в IE6

о_О Верстайте таблицами.

Shurikkan · March 17, 2016

On 3/17/2016 at 5:43 AM, sarcus said:
Должно работать в IE6-..... есть у меня еще такие .

"Такие" называются боты.

IE6 умер окончательно, IE7 можно приравнять к статистической погрешности

sarcus · March 18, 2016

On 3/17/2016 at 8:02 AM, wwt said:

On 3/17/2016 at 5:43 AM, sarcus said:
Должно работать в IE6

о_О Верстайте таблицами.

Таблицами не получиться красиво сделать.

Ну и на счет ботов. Не могу спать спокойно когда они существуют Да и самому стало интересно голову сломать. Но сделал. Долго мучился.

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

Меню полностью прозрачное что мне и нужно было (под ним фон будет с рисунком). Элементы пока подсветил чтобы видеть что получается. Можно конечно проще, например с помощью картинок, но у меня другая задача.

Reveal hidden contents

<!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;  ; }</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>

Edited March 18, 2016 by sarcus

Launder · March 25, 2016

У меня получилось как-то так...

Sign In

Ограниченая по высоте левая рамка

Question

sarcus

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

Shurikkan

Link to comment

Share on other sites

sarcus

Link to comment

Share on other sites

Launder

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information