Hej, naprawdę działa pięknie :) szkoda że nie da się css'em.
Ten kodzik potrzebuję aby zrobić zautomatyzowane obramowanie z zaokrąglonymi narożnikami. Ogólnie działa to tak, że każdy narożnik jest w transparent png. Do tego dochodzi gif na top,left,right,bottom i cała sztuka polega na tym aby pod narożnikami nie znalazły się gify boczne bo inaczej nie widać pod nimi tła tylko właśnie boczne obramowanie. Jeśli to brzmi dziwnie to podaję kod. Trochę nad tym posiedziałem i myślę, że jest to rozwiązanie uniwersalne i nieskomplikowane w użyciu i ma swoje zalety (np. można użyć dowolnie skomplikowanego tła pod dowolny zestaw ramek)
Styl css
div.core-border { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
div.core-border div.cb-top { position: relative; width: 100%; height: 66px; left: 0; top: 0; }
div.core-border div.cb-top div.cbtl { position: relative; display: inline-block; width: 10px; height: 66px; background: url(../images/core-border-tl.png) 0 0 no-repeat; }
div.core-border div.cb-top div.cbtc { position: relative; display: inline-block; width: 970px; height: 66px; background: url(../images/core-border-t.gif) 0 0 repeat-x; }
div.core-border div.cb-top div.cbtr { position: relative; display: inline-block; width: 10px; height: 66px; background: url(../images/core-border-tr.png) 100% 0 no-repeat; }
div.core-border div.cb-center { position: relative; width: 100%; height: 100%; }
div.core-border div.cb-center div.cbcl { position: relative; display: inline-block; width: 10px; height: 100%; background: url(../images/core-border-l.gif) 0 0 repeat-y; }
div.core-border div.cb-center div.cbcc { position: relative; display: inline-block; width: 970px; height: 100%; background: #d8d8d8; }
div.core-border div.cb-center div.cbcr { position: relative; display: inline-block; width: 10px; height: 100%; background: url(../images/core-border-r.gif) 100% 0 repeat-y; }
div.core-border div.cb-bottom { position: relative; width: 100%; height: 10px; top: -2px; }
div.core-border div.cb-bottom div.cbbl { position: relative; display: inline-block; width: 10px; height: 10px; background: url(../images/core-border-bl.png) 0 0 no-repeat; }
div.core-border div.cb-bottom div.cbbc { position: relative; display: inline-block; width: 970px; height: 10px; background: url(../images/core-border-b.gif) 0 0 repeat-x; }
div.core-border div.cb-bottom div.cbbr { position: relative; display: inline-block; width: 10px; height: 10px; background: url(../images/core-border-br.png) 100% 0 no-repeat; }
Całe obramowanie siedzi w div typu absolute a więc można go dowolnie ustawić
<div class="core-border" id="page">
<div class="cb-top"><div class="cbtl"></div><div class="cbtc"></div><div class="cbtr"></div></div>
<div class="cb-center" id="id1"><div class="cbcl"></div><div class="cbcc"></div><div class="cbcr"></div></div>
<div class="cb-bottom"><div class="cbbl"></div><div class="cbbc"></div><div class="cbbr"></div></div>
</div>';
Na koniec powyższa funkcja do dopasowania środkowej ramki tak aby obramowanie automatycznie dostosowało swoją wysokość do div'a, którego otacza
<script type="text/javascript">
function setHeight(id1,id2,height) {
document.getElementById(id1).style.height = document.getElementById(id2).offsetHeight - height+'px';
}
</script>
i wywołanie funkcji
<script type="text/javascript">setHeight('page','id1',76);</script>
(76px = div.cb-top height + div.cb-bottom height)
No i niech ktoś powie, że to rozwiązanie nie jest szalone :))
EDIT:
Właśnie zauważyłem, że w Chrome i Safari funkcja setHeight niezbyt dobrze wylicza poprawną wysokość i obramowanie jest za krótkie :(
Zgaduję, że może to wynikać z tego że skrypt uruchamia się za szybko zanim jeszcze przeglądarka poprawnie zinterpretuje height: 100%; w div.core-border.
Pomogła konstrukcja:
<script type="text/javascript">setTimeout("setHeight('page','id1',76),1000)";</script>