Kod
<div style="width: 220px;">
<div>
<div id="top-left-win">
</div>
<div id="top-middle-win">
</div>
<div id="top-right-win">
</div>
</div>
<div id="middle">
<div id="left-win">
</div>
<div id="middle-win">
<b>WSTAWIANY OBIEKT</b>
</div>
<div id="right-win">
</div>
</div>
<div id="bottom">
<div id="bottom-left-win">
</div>
<div id="bottom-middle-win">
</div>
<div id="bottom-right-win">
</div>
</div>
</div>
Style wygladaja tak:
Kod
#header,#top-left-win,#top-middle-win,#top-right-win {
height: 28px;
}
#bottom-left-win,#bottom-middle-win,#bottom-right-win{
height: 15px;
}
#middle
{
clear: left;
}
#bottom{
clear: left;
}
#top-left-win{
width: 9px;
background: url(okno/top-left-blue.png) no-repeat;
float: left;
}
#top-middle-win{
/*padding-right: 20px;*/
background: url(okno/top-middle-blue.png);
float: left;
}
#top-right-win{
width: 15px;
background: url(okno/top-right-blue.png);
float: right;
}
#left-win
{
width: 9px;
background: url(okno/left-blue.png);
float: left;
}
#middle-win{
float: left;
}
#right-win{
width: 15px;
background: url(okno/right-blue.png);
float: left;
}
#bottom-left-win{
width: 9px;
background: url(okno/bottom-left-blue.png);
float: left;
}
#bottom-middle-win{
background: url(okno/bottom-middle-blue.png);
float: left;
}
#bottom-right-win{
width: 15px;
background: url(okno/bottom-right-blue.png);
float: right;
}
Chcialbym, aby np. top-middle-win sam mi sie rozszezal. Moge to zrobic wpisujac styl padding, ale takich obramowan chce wiecej i nie bardzo mam ochote kopiowac ten kod wiele razy. Chcialbym, zeby to sie automatycznie robilo.