CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 1 Today
» 1 Yesterday
» 2 Week
» 15 Month
» 321 Year
» 471 Total
Record: 35 (09.11.2018)

Create page containers

Create logical containers and add a class with reasonable descriptive names to each. It is also helpful in future steps adding comments into each container (<!-- comment -->)

template.htm

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="body">
	<div class="top-container">
		<!-- top-container -->
		TOP CONTAINER
	</div>
	<div class="banner-container">
		<!-- top-container -->
		BANNER CONTAINER
	</div>
	<div class="locator-container">
		<!-- locator-conteiner -->
		LOCATOR CONTAINER
	</div>
	<div class="main-container">
		<!-- main-container -->
		MAIN CONTAINER
	</div>
	<div class="footer-container">
		<!-- footer-container -->
		FOOTER CONTAINER
	</div>
</body>
</html>

 

It is also good for better visual control and orientation give a background color to each container.

stylesheet.css

...
/*** step 2 ***/
/* containers */
/* remove borders and add background only to non-divided containers */
.top-container{width: 100%; background: red;}
.banner-container{width: 100%; background: yellow;}
.locator-container{width: 100%; background: red;}
.main-container{width: 100%; background: blue;}
.footer-container{width: 100%; background: #666;}

 

PREVIEW

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED