Шаблон Joomla

В пакете установки 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;
}

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