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)

Tune containers structure

To get closer to the final view of a webpage, a padding is added to each main container (class "inner")

template.htm

<!DOCTYPE HTML>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="body">
	<div class="top-container inner">
		<!-- top-container -->
		<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-container -->
		<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>

 

Note: Padding: 1% means that the space around each block will be the same - 1% of the display width.

On a display e.g. 1920px the padding will be 19px. Whereas on a smartphone with 640px it will be only 6px.

stylesheet.css

...
/*** step 4 ***/
/* inner padding */
.inner{padding: 1%;}

 

 

PREVIEW

 

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED