Мастерам верстки. Верстка окон.

[haZe]

Здравствуйте господа!

Я пишу систему диалоговых окон и конечно столкнулся с верстанием их. Окна должны иметь возможность изменения размера. Целей своих я добился, но терзают меня сомнения, что сверстать эти окна можно более качественно. Окно имеет область содержимого, заголовок и восемь сторон масштабирования.

Во время масштабирования мне приходится учитывать массу параметров (ширину левого бордэра, высоту заголовка и пр.), все эти значения участвуют в расчетах. Меняю я размеры практически всех элементов, в первую очередь область контента, также ширину заголовка, высоту левого и правого бордэра. При изменения размера общего контейнера(window), верстка съезжает, поэтому приходится менять размеры, внутренних элементов.

Вопрос: Возможно ли сверстать так, чтоб размер внутренних элементов, автоматически подгонялись под размер общего контейнера?

Заранее благодарю, за советы!

html:

            
      <div class="window">
            <div class="tline">
                <div class="ltb"></div>
                <div class="rtb"></div>
            </div>

            <div class="cline">
                <div class="lb"></div>
                <div style="float:left">
                    <div class="title_line"> </div>
                    <div class="window_content">

                    </div>
                </div>
                <div class="rb"></div>
            </div>

            <div class="bline">
                <div class="lbb"></div>
                <div class="rbb"></div>
            </div>
      </div>

css:

.window{position:fixed;top:200px;left:150px;}

.ltb{cursor:nw-resize;height:3px;  width:3px;  float:left;background:#999}
.tb{cursor:n-resize;  height:3px;  width:100%;float:left;background:#939}
.rtb{cursor:ne-resize;height:3px;  width:3px;  float:right;background:#999}

.lb{cursor:w-resize;  height:624px;width:3px;  float:left;background:#939}
.window_content{height:600px;width:800px;background:#444444;}
.rb{cursor:e-resize;  height:624px;width:3px;  float:left;background:#939}

.lbb{cursor:sw-resize;height:3px;  width:3px;  float:left;background:#999}
.bb{cursor:s-resize;  height:3px;  width:100%;float:left;background:#999}
.rbb{cursor:se-resize;height:3px;  width:3px;  float:right;background:#999}
.tline{height:3px;  width:100%;  float:left;cursor:n-resize;  background:#939}
.bline{height:3px;  width:100%;  float:left;cursor:s-resize;  background:#939}
.cline{  width:806px;  float:left;}
.title_line{height:2em;width:800px;background:#449994;}

[psywalker]

Замути отдельную страницу с примером. И дай ссылку.

[XprogeR]

Может вам подойдет jQueriUI(http://jqueryui.com/demos/dialog/)?

Edited November 7, 2010 by XprogeR