أهلا بكم في درس جديد من دروس CSS هذا الدرس متقدم بعض الشئ عن الدروس السابقة و التي تناولت فيها أساسيات CSS … سنتناول في هذا الدرس طريقة عمل إطار قابل للتمدد من الصور لمجموعه من المحتويات  باستخدام CSS فقط  . بشكل أوضح نريد الوصول لتخطيط الشكل ليكون بهذه الطريقه :


سأستخدم هذا النموذج كتطبيق للشرح :

حسناً .. لديك الان نموذج شبيه بالنموذج السابق عليك الان تقطيعه الى 8 أجزاء … الصورة التالية توضح أسلوب التقطيع ..

الان لدينا 8 صور سنقوم بحفظهم بأسماء مفهومة و واضحة ليسهل علينا استخدامهم لاحقاُ وليكن بالشكل التالي :


هناك أساليب أخرى لحفظ الصور مثل جمع كل الصور في صورة واحدة و استخدام خواص css لتعين كل جزء من الصورة لكلاس معين .. هذا الدرس للأخ كتوم يشرح الفكرة ..

تخطيط HTML :

<!-- Box >> Start -->
<div class="box">
 
	<!-- Box Header >> Start -->
	<div class="box-header">
		<div class="box-header-right"></div>
		<div class="box-header-left"></div>
	<!-- Box Header >> End -->
	</div>
 
	<!-- Box Body >> Start -->
	<div class="box-body">
		<div class="box-body-right">
		<div class="box-body-left">
			المحتويات
		</div>
		</div>
	<!-- Box Body >> End -->
	</div>
 
	<!-- Box Footer >> Start -->
	<div class="box-footer">
		<div class="box-footer-right"></div>
		<div class="box-footer-left"></div>
	<!-- Box Footer >> End -->
	</div>
 
<!-- Box >> End -->
</div>

شرح التخطيط :
1- Box: وهو div حاوي و وظيفته الاساسية هو تحديد عرض الصندوق كاملاً ومحاذاته وغيرها من الصفات التي نريد تطبيقها على الصندوق ككل .
2- Box-Header : وهو رأس الصندوق و الذي سيحتوي على 2 div أحدهما للصورة على اليمين وهو box-header-right و الأخر للصورة على اليسار وهو box-header-left وفي نفس الوقت سيكون مسؤول عن عرض الخلفية المتمددة بين الصورتين .
3- Box-Body : وهو جسم الصندوق و الذي سيحتوي على محتويات الصندوق ويكون محاط من الجانبين بعمودين وسنقوم بعملهما من خلال 2 div متداخلين هما box-body-right و box-body-left على الترتيب كما انه هو المسؤل عن تغير لون خلفية المحتويات .
4- Box-Footer : و هو ذيل الصندوق و تركيبه مثل تركيب Box-Header .

تخطيط CSS :

/*  ------------------------------------------
    1-Box
    ------------------------------------------   */
.box{
	width:600px;
	margin:0 auto;
	background-color:#FFF;
}
 
/*  ------------------------------------------
    2-Box Header
    ------------------------------------------   */
.box-header{
	background:url(images/header-bg.gif) repeat-x top;
	height:61px;
}
	.box-header-right{
		background:url(images/header-right.gif) no-repeat top right;
		height:61px;
		width:203px;
		float:right;
	}
	.box-header-left{
		background:url(images/header-left.gif) no-repeat top left;
		height:61px;
		width:46px;
		float:left;
	}
 
/*  ------------------------------------------
    3-Box Body
    ------------------------------------------   */
.box-body{
	background-color:#FFF;
	text-align:justify;
 
}
	.box-body-right{
		background:transparent url(images/body-right.gif) repeat-y right;
	}
	.box-body-left{
		background:transparent url(images/body-left.gif) repeat-y left;
		padding:20px;	
	}
 
/*  ------------------------------------------
    4-Box Footer
    ------------------------------------------   */
.box-footer{
	background:url(images/footer-bg.gif) repeat-x bottom;
 
	height:49px;
}
	.box-footer-right{
		background:url(images/footer-right.gif) no-repeat bottom right;
		height:49px;
		width:49px;
		float:right;
	}
	.box-footer-left{
		background:url(images/footer-left.gif) no-repeat bottom left;
		height:49px;
		width:49px;
		float:left;
	}

الأكواد بسيطة ولا تحتاج لشرح مفصل ولكن لاحظ .. في الكلاسين box-body-left و box-body-right يجب أن تكون خلفيتهما شفافة transparent حتى يطبق لون الخلفية المعين في الكلاس box-body يمكنك أيضا الاستغناء عن كتابتها صراحة لأن الخلفية الافتراضي للكلاسات تكون شفافه .. لذلك يمكنك كتابتها بالشكل التالي

.box-body-right{
	background:url(images/body-right.gif) repeat-y right;
}
.box-body-left{
	background:url(images/body-left.gif) repeat-y left;
	padding:20px;
}

هناك الكثير من الأفكار التي يمكن تطبيقها على الهيكل مثل الغاء box-body ونقل خواصها الى box-body-right و box-body-left .. كما يمكنك اختصار اكواد CSS عن طريق جمع الاكواد المتكررة ومنحهم لأكثر من كلاس باستخدام طريقة Grouping .

هذا التطبيق يعمل بشكل سليم على المتصفحات الكبيرة .

images-wrapper (2149)
معاينة

الحمد لله الذي تتم بنعمته الصالحات