View Single Post
Old 10-07-2003, 09:33   #8
Anafay
 
Anafay's Avatar
 
Join Date: сен 2001
Location: Воронеж
Сообщений: 2,162
Dimitrius
Да откуда у меня линки-то. Просто делаешь так:

Блок с абсолютным позиционированием бьется на 9 частей, как обычно. Но части эти, кроме средней, делаем тоже с абсолютным позиционированием: левый верхний угол с top:0px;left:0px, правый верхний - top:0px;right:0px и т.п. Картинки рамки - фон в блоках-краях.

Для растягиваемых элементов, - середин сторон, - устанавливаем повтор фона.

Для среднего блока - margin, чтобы не наезжал на блоки-границы.

И в главный блок помещается сначала середина, а потом все остальное, чтобы изменение размера корректно отображалось.

Вот пример: надо только фоны расставить. Вниз растягивается корректно.

<html>
<head>
<style type="text/css">
body
{
margin :0px;
background-color :white;
}
div
{
border :1px solid black;
}
#main
{
position :absolute;
top :0px
left :0px;
width :100%;
height :400px;
}
#lefttop
{
position :absolute;
top :0px;
left :0px;
width :50px;
height :50px;
}
#righttop
{
position :absolute;
top :0px;
right :0px;
width :50px;
height :50px;
}
#leftbottom
{
position :absolute;
bottom :0px;
left :0px;
width :50px;
height :50px;
}
#rightbottom
{
position :absolute;
bottom :0px;
right :0px;
width :50px;
height :50px;
}
#top
{
position :absolute;
top :0px;
left :50px;
right :50px;
height :50px;
width :100%;
}
#bottom
{
position :absolute;
bottom :0px;
left :50px;
right :50px;
height :50px;
width :100%;
}
#left
{
position :absolute;
bottom :50px;
left :0px;
height :100%;
width :50px;
}
#right
{
position :absolute;
bottom :50px;
right :0px;
height :100%;
width :50px;
}
#center
{
margin :50px;
width :100%;
height :450px;
}
</style>
</head>
<body>
<div id="main">
<div id="center"><!--Должен быть первым --></div>
<div id="lefttop"></div>
<div id="righttop"></div>
<div id="leftbottom"></div>
<div id="rightbottom"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

Last edited by Anafay; 10-07-2003 at 10:01.
Anafay is offline   [Ответить с цитированием]