есть такая конструкция
<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: в комментариях блок посложнее прикрепил, струкрура и ксс теже самые
что в нем необычного? я такое давно через border-radius+pie делаю. фигачить углы в конце 2011 года — да ну нафиг.
ну ты умник не понял меня….
мб тут плохо видно, носо всех сторон внутренняя тень и вверху и внизу они различаются немного.
это с помощью чистого css не сделать я думаю..
закруглить углы я и так знаю, тут совсем другое….
Внутреннюю тень через box-shadow, а то, что старые ИЕ не поддерживают — забить! ;)
не по существу — следите за базаром своим.
по существу — изучите box-shadow, как вам тут уже успели написать.
«носо всех сторон внутренняя тень и вверху и внизу они различаются немного»
а если мы 2 тени внутренних наложим — такое ксс позволяет?
UPD: различаются тени, я правильно понял?
css позволяет внутреннюю тень сделать??
UPD: различаются тени, я правильно понял?
да сверху и снизу они чуток различны…
А если так попробовать:
ахренеть, а я не знал даже чето :D
с PIE для ИЕ покатит ведь тоже?
На сколько я знаю pie пока не поддерживает внутреннюю тень :(
Автор pie сюда направляет: https://github.com/lojjic/PIE/issues/3
ну с этим разобрались, а вот такой блок резиновый посложнее будет…
код css и структура таже самая