Sign in to follow this  
sarcus

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

Recommended Posts

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

Share this post


Link to post
Share on other sites
Должно работать в IE6-..... есть у меня еще такие .

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

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

Share this post


Link to post
Share on other sites

 

Должно работать в IE6

 

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

 

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

 

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

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

 

image.png

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

<!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 by sarcus

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,554
    Total Members
    3,128
    Most Online
    Zzzione
    Newest Member
    Zzzione
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.