JSFiddle - React, Tailwind, and code Playground

by Zeya

HTML

<body>
<!--оформление страницы сайта-->
<div id="wrap">
<!--блок шапки сайта header -->
<div id="header">
             <jdoc:include type="modules" name="top" style="xhtml" />шапка
</div>
        
<!--вывод модуля горизонтального меню в позиции user2-->
<div id="topmenu" align="center" >
              <jdoc:include type="modules" name="user2" style="xhtml" /> 
                     </div> 
<!--вывод всего содержимого-->                 
<div id="body">
<!--вывод содержимого контента-->          
<div id="content"> 
              <jdoc:include type="component" style="xhtml" />контент
      </div>
       
<!--вывод правой колонки-->      
<div id="right">
              <jdoc:include type="modules" name="right" style="xhtml" />правое
              ололололллллллллллллллллллллллллллллллллллл
              </div>
</div>

<!--вывод сведений модуля с информацией об авторских правах в позиции footer -->
<div id="bottom">
<jdoc:include type="modules" name="bottom" style="xhtml" />
<a href="malito: [email protected]"> [email protected] </a>
</div>

</div>
</body>
</html>

CSS

body, html {
background-color: #38616b; 
margin:0px;
padding:0px;
}

#wrap{
width: 1024px;
margin:0 auto;
}

#header {
background: url(../images/header.jpg) no-repeat;
width:1001px;
height: 222px;
margin:0 auto;
}

#topmenu{
background: url(../images/menu_fon.jpg) no-repeat;
width:1001px;
height: 55px;
}

#body{
width:100%;
}

#content {
background: url(../images/fon_left.jpg)  repeat-y;
width: 767px;
}

#right {
background: url(../images/fon_right.jpg)  repeat-y;
width: 232px;

}

#bottom {
background: url(../images/bottom.jpg) no-repeat;
width:999px;
height: 120px;
margin:0 auto;
padding-bottom: 35px;
padding-top: 116px;
text-indent: 16em; /* Отступ первой строки */
color: #3d6a55;
}

JavaScript

var JCaption=new Class({initialize:function(b){this.selector=b;var a=$$(b);a.each(function(c){this.createCaption(c)},this)},createCaption:function(c){var b=document.createTextNode(c.title);var a=document.createElement("div");var e=document.createElement("p");var d=c.getAttribute("width");var f=c.getAttribute("align");if(!d){d=c.width}if(!f){f=c.getStyle("float")}if(!f){f=c.style.styleFloat}if(f==""||!f){f="none"}e.appendChild(b);e.className=this.selector.replace(".","_");c.parentNode.insertBefore(a,c);a.appendChild(c);if(c.title!=""){a.appendChild(e)}a.className=this.selector.replace(".","_");a.className=a.className+" "+f;a.setAttribute("style","float:"+f);a.style.width=d+"px"}});document.caption=null;window.addEvent("load",function(){var a=new JCaption("img.caption");document.caption=a});