81_44

есть такая конструкция

        	<div class="blok">
           <div class="blok-up"><div class="l"></div><div class="r"></div><div class="up"></div></div>
           <div class="blok-cont"><div class="cont"><div class="main"><div class="bg">
bla bla bla
...
...
...
           </div></div></div></div>
           <div class="blok-down"><div class="l"></div><div class="r"></div><div class="down"></div></div>
            </div><!--end blok-->

CSS

/******************************** bblok ************************************/
div.blok{ position:relative;float:left; margin:5px;}
div.blok div.blok-up {float:left; width:100%; height:9px;}
div.blok div.blok-up div.l {float:left; background:url(../img/f-ul.png) no-repeat; width:10px; height:9px;}
div.blok div.blok-up div.r {float:right; background:url(../img/f-ur.png) no-repeat; width:10px; height:9px;}
div.blok div.blok-up div.up {background:url(../img/f-up.png) repeat-x; margin:0 10px; height:9px;}
div.blok div.blok-down {float:left; width:100%; height:9px;}
div.blok div.blok-down div.l {float:left; background:url(../img/f-dl.png) no-repeat; width:10px; height:9px;}
div.blok div.blok-down div.r {float:right; background:url(../img/f-dr.png) no-repeat; width:10px; height:9px;}
div.blok div.blok-down div.down {background:url(../img/f-d.png) repeat-x; margin:0 10px; height:9px;}
div.blok div.blok-cont {float:left; width:100%; background:url(../img/f-l.png) 0 0 repeat-y;}
div.blok div.blok-cont div.cont {float:left; width:100%;background:url(../img/f-r.png)  100% 0 repeat-y; }
div.blok div.blok-cont div.cont div.main {margin:0 10px;}
div.blok div.blok-cont div.cont div.main div.bg { background:url(../img/f-bg.png) repeat;float:left; width:100%;}
/******************************** bblok ************************************/

вот ИЕ наш любимый коряво отображает да и в FF почемуто справа отступ непонятный образуется.
а если вместо бла бла вставить например textarea то вроде выглядит все нормально и не ламается.
подскажите может есть уже такие методы чтобы велосипеды не придумывать.

вот как должно выглядеть, и таких блоков на сайте много будет….

UPD: в комментариях блок посложнее прикрепил, струкрура и ксс теже самые

348_Bezimeni2jpg

Оценить:|
  
Комментировать
Раздел: Помощь    
Просмотров: 2229
Комментариев (10)
  1. cssfish
    18.10.2011 в 08:06

    что в нем необычного? я такое давно через border-radius+pie делаю. фигачить углы в конце 2011 года — да ну нафиг.

    • Xap4o
      Роман [Xap4o]
      18.10.2011 в 08:35

      ну ты умник не понял меня….
      мб тут плохо видно, носо всех сторон внутренняя тень и вверху и внизу они различаются немного.
      это с помощью чистого css не сделать я думаю..
      закруглить углы я и так знаю, тут совсем другое….

  2. Иван [Miro]
    18.10.2011 в 09:00

    «носо всех сторон внутренняя тень и вверху и внизу они различаются немного»
    а если мы 2 тени внутренних наложим — такое ксс позволяет?
    UPD: различаются тени, я правильно понял?

  3. Xap4o
    Роман [Xap4o]
    18.10.2011 в 09:53

    ну с этим разобрались, а вот такой блок резиновый посложнее будет…
    код css и структура таже самая

    348_Bezimeni2jpg

Оставить комментарий