CSS-এ একাধিক র‍্যাপার সহ লেআউট স্কিম

ডেভেলপমেন্টের সময় প্রায়শই এমন লেআউটের সম্মুখীন হতে হয়, যেখানে ব্লকগুলির ব্যাকগ্রাউন্ড পুরো পৃষ্ঠার প্রস্থ জুড়ে থাকে, কিন্তু এই ব্লকগুলির বিষয়বস্তু কেন্দ্রে অবস্থান করে। এমন একটি লেআউটের উদাহরণ এখানে দেওয়া হল:

এই ধরনের লেআউটে আমাদের একটি নয়, বরং বেশ কয়েকটি র‍্যাপার তৈরি করতে হবে - প্রতিটি ব্লকের জন্য। এক্ষেত্রে, র‍্যাপারের ভিতরে আরও একটি ব্লক থাকতে হবে, যা বিষয়বস্তুকে কেন্দ্রীভূত করার কাজ করে। এছাড়াও একটি ক্লাস থাকতে হবে যা বিষয়বস্তুর ব্যাকগ্রাউন্ড রং করার জন্য দায়ী।

আমাদের লেআউটের সাধারণ স্কিমটি নিম্নরূপ দেখাবে:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

center ক্লাসটি ব্লকগুলিকে কেন্দ্রীভূত করতে ব্যবহার করা হবে:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

line ক্লাসটি ব্লকগুলিকে রং করার জন্য ব্যবহার করা হবে:

.wrapper.line {
	background-color: #008040;
	color: white;
}

এবং wrapper ক্লাসটি প্রতিটি ব্লকের প্যারেন্ট হবে। ব্লকগুলির মধ্যে ফাঁকা স্থান নির্ধারণ করতে আমরা এটি ব্যবহার করব:

.wrapper {
	margin-bottom: 30px;
}

এখন আমাদের টাস্কের সম্পূর্ণ কোড লিখি:

<div class="wrapper">
	<div class="center">
		<h1>Main site header</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our company</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Our price</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our contacts</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}