CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 3 Today
» 1 Yesterday
» 4 Week
» 17 Month
» 323 Year
» 473 Total
Record: 35 (09.11.2018)

Create containers structure

Now it's time to create required subcontainers/block in relevant structural containers. Specify their dimensions and positions within the standard template.

template.htm

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="body">
	<div class="top-container inner">
		<div class="logo">
			<!-- logo -->
			LOGO
		</div>
		<div class="sitename">
			<!-- sitename -->
			SITENAME
		</div>
		<div class="languagemenu">
			<!-- languagemenu -->
			LANGUAGEMENU
		</div>
		<div class="clear"></div>
	</div>
	
	<div class="banner-container">
		<!-- banner-container -->
		<img src="images/banner.jpg">
		<div class="slogan">
			<!-- slogan -->
			SLOGAN
		</div>
	</div>
	<div class="clear"></div>
	<div class="locator-container inner">
		<!-- locator-conteiner -->
		<div class="locator">
			<!-- locator -->
			LOCATOR
		</div>
		<div class="searchbox">
			<!-- searchbox -->
			SEARCHBOX
		</div>
		<div class="clear"></div>
	</div>

	<div class="main-container inner">
		<!-- main-container -->
		<div class="navigation">
			<!-- navigation -->
			NAVIGATION
		</div>
		<div class="content">
			<!-- content START -->
			CONTENT
		</div>
		<div class="news">
		<!-- news container -->
			<div class="box">
				<!-- newsbox 1 -->
				NEWSBOX 1
			</div>
			<div class="box">
				<!--newsbox 2 -->
				NEWSBOX 2
			</div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="footer-container inner">
		<!-- footer-container -->
		<!-- footer -->
		FOOTER CONTAINER
	</div>
</body>
</html>

 

It is somtime very usefull to use % or vh/vw units. The block are then dependat on device dimensions and are "plastic".

stylesheet.css

...
/*** step 3 ***/
/* container blocks */
/* top-container */
.logo{
	width: 20%;
	min-width: 150px;
	float: left;
	background: orange;
}
.sitename{
	width: 60%;
	min-width: 300px;
	float: left;
	background: lime;
}
.languagemenu{
	width: 20%;
	min-width: 150px;
	float: left;
	background: green;
}
/* locator-container */
.locator{
	width: 80%;
	min-width: 300px;
	float: left;
	background: aqua;
}
.searchbox{
	width: 20%;
	min-width: 250px;
	float: left;
	text-align: right;
	background: lime;
}
/* main-container */
.navigation{
	width: 20%;
	min-width: 150px;
	float: left;
	background: pink;
}
.content{
	width: 60%;
	min-width: 300px;
	float: left;
	background: magenta;
}
.news{
	width: 20%;
	min-width: 150px;
	float: left;
	background: beige;
}
.box{
	width: 100%;
	background: white;
}

 

 

PREVIEW

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED