|
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>
Изменено: Anafay, 10-07-2003 в 07:01
|
Только с помощью картинок...
