В пакете установки Joomla идет шаблон rhuk_milkyway. На его примере можно посмотреть как реализовано обрамление вокруг содержания сайта.

Разметка шаблона выглядит так:

<div class="center" align="center"><br />&nbsp;&nbsp;&nbsp; <div id="wrapper"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="wrapper_r">
<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;    <div id="header">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="header_l"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="header_r"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Текст</p><p>Текст</p><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Текст</p><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Текст</p><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Текст</p><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="footer"> <br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;        <div id="footer_l"><br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;         <divid="footer_r"><br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             <p>Текст</p><br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;         </div><br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;        </div><br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;    </div>
<br />&nbsp;&nbsp; &nbsp;    </div><br />&nbsp;&nbsp;&nbsp; </div><br /></div>

CSS:

для тега с id wrapper

div#wrapper {<br />        background: #f7f7f7 url(../images/mw_shadow_l.png) 0 0 repeat-y;<br />}

mw_shadow_l

для wrapper_r

div#wrapper_r {<br />    background: url(../images/mw_shadow_r.png) 100% 0 repeat-y;<br />}

mw_shadow_r.png

для header

div#header {<br />    background: url(../images/mw_header_t.png) 0 0 repeat-x;<br />}

mw_header_t

для header_l

div#header_l {<br />    background: url(../images/mw_header_t_l.png) 0 0 no-repeat;<br />}<br />

mw_header_t_l

для header_r

div#header_r {<br />    background: url(../images/mw_header_t_r.png) 100% 0 no-repeat;<br />    height:115px;
} <br />

mw_header_t_r

для footer

div#footer {<br />    background: #f7f7f7 url(../images/mw_footer_b.png) 0 100% repeat-x;<br />}<br />

mw_footer_b

для footer_l

div#footer_l {<br />    background: url(../images/mw_footer_b_l.png) 0 0 no-repeat;<br />}<br />

mw_footer_b_l

для footer_r

div#footer_r {<br />    background: url(../images/mw_footer_b_r.png) 100% 0 no-repeat;
    height:57px;<br />}<br />

mw_footer_b_r 

Загрузить этот пример

Чтобы сделать комментарий, нужно авторизоваться на сайте!