Рамка вокруг окна с контентом
В стандартном пакете установки Joomla вы найдёте шаблон rhuk_milkyway, который послужит нам примером обрамления контента.
Следующим образом выглядит разметка:
<div class="center" align="center">
<div id="wrapper">
<div id="wrapper_r">
<div id="header">
<div id="header_l">
<div id="header_r">
<p>Текст</p><p>Текст</p>
</div>
</div>
</div>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<div id="footer">
<div id="footer_l">
<divid="footer_r">
<p>Текст</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
для тега с id wrapper
div#wrapper {
background: #f7f7f7 url(../images/mw_shadow_l.png) 0 0 repeat-y;
}
для wrapper_r
div#wrapper_r {
background: url('/../images/mw_shadow_r.png') 100% 0 repeat-y;
}
для header
div#header {
background: url('/../images/mw_header_t.png') 0 0 repeat-x;
}
для header_l
div#header_l {
background: url('/../images/mw_header_t_l.png') 0 0 no-repeat;
}
для header_r
div#header_r {
background: url('/../images/mw_header_t_r.png') 100% 0 no-repeat;
height:115px;
}
для footer
div#footer {
background: #f7f7f7 url(../images/mw_footer_b.png) 0 100% repeat-x;
}
для footer_l
div#footer_l {
background: url('/../images/mw_footer_b_l.png') 0 0 no-repeat;
}
для footer_r
div#footer_r {
background: url('/../images/mw_footer_b_r.png') 100% 0 no-repeat;
height:57px;
}