چینش صفحه – دو ستون – عرض ثابت

چینش صفحه با ساختار دو ستون با عرض ثابت به وسیله CSS

این نوع از چینش در بسیاری از وب سایت ها مورد استفاده قرار میگیرد و شما می توانید نمونه ای از این نوع ساختار را در همین وبلاگ ملاحظه نمائید. با توجه به نوع و تکنیک مورد استفاده در این نوع از چینش توضیحات بیشتری در مورد آن ارائه خواهد شد .

در این نوع از چینش یک بخش هایی با نام sideBar و contentBody اضافه شده است . با توجه به نوع و حتی رنگ پس زمینه این بخش ها , می توان از تکنیک های متفاوتی برای چینش صفحه استفاده نمود که در ادامه توضیحات بیشتری در این زمینه ارائه خواهد شد.

مهمترین نکته در این نوع از طراحی همسان بودن ارتفاع sideBar و contentBody است . این همسانی ارتفاع در زمانی نمایان خواهد بود که تفاوت رنگ و یا طرح در پس زمینه sideBar و contentBody وجود داشته باشد و در غیر اینصورت این تفاوت ارتفاع به دلیل یکسان بودن رنگ و طرح پس زمینه از دید بازدید کنندگان پنهان خواهد بود .

در نمونه و مثال نخست با توجه به نوع طرح و رنگ یکسان پس زمینه sideBar و contentBody همسان نبودن ارتفاع از دید مخاطب پنهان خواهد ماند و نا هماهنگی در طرح ایجاد نخواهد کرد .

DEMO

ساختار HTML

---

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>دو ستون - عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا می شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

---

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */ 
/* [email protected]  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	width:960px;
	margin: 0 auto;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	background:#eee;
}

.contentBody
{
	width:650px;
	float:right;
	padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;

	float:left ;
	padding:20px 0 20px 20px;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}

برای ظاهر شدن این ناهماهنگی در چینش صفحه کافیست که sideBar و contentBody دارای رنگ پس زمینه متفاوتی شوند

.sideBar
{
	width:250px;
	float:left ;
	padding:20px 0 20px 20px;
    background:#ddd;

}

نکات مهم در چینش صفحه

---

• ارتفاع یکسان sidebar و contentBody

  ناهماهنگی در ارتفاع این دو قسمت در زمانی قابل رویت خواهد بود که ارتفاع محتوا contentBody بیشتر از sideBar باشد که به طور معمول نیز این چنین است . برای بر طرف نمودن این ناهماهنگی می توانید از تکنیک بسیار ساده و هوشمندانه زیر استفاده نمائید .

• .clearfloat

  اگر مطلب آشنایی با CSS float را مطالعه نموده باشید متوجه خواهید شد در مواردی استفاده از float می تواند باعث ایجاد نا هماهنگی در نمایش صفحات و چینش گردد . در این چینش از تکنیک clearfloat که یکی از شناخته شده ترین تکنیک ها برای بر طرف نمودن این مشکل است استفاده شده است . از این تکنیک در مواردی استفاده میشود که می خواهیم اثرات float بر یک عنصر را خنثی کنیم . در مورد این تکنیک در آینده مطالبه نوشته خواهد شد .

در ایتدا یک تصویر با رنگ پس زمینه , ارتفاع 1px و عرض مورد نظرتان برای sideBar درست کنید . در این مثال رنگ پس زمینه #ddd و عرض مورد نظر 270px خواهد بود .سپس این تصویر را در پس زمینه content قرار دهید و برای قرارگیری تصویر پس زمینه ساخته شده در جای مناسب از background-position استفاده نمائید . برای قرار گیری مناسب تصویر در پس زمینه sideBar با توجه به ارتفاع در نظر گرفته شده ، تصویر در جهت y تکرار خواهد شد .

در این رابطه بهتر است مطالب زیر را مطالعه نمائید

• آشنایی با مفهوم Margin , Padding , Border در CSS
• Margin , Padding – خلاصه نویسی دستورات CSS
• خلاصه نویسی دستورات CSS – Background

رنگ مورد استفاده در پس زمینه sideBar در ابتدای این مثال را نیز حذف نمائید .به همین سادگی به نظر می رسد که نا هماهنگی بر طرف شده باشد . ملاحظه می نمائید که با افزایش محتویات contentBody همچنان در چینش ناهماهنگی به وجود نخواهد آمد و contentBody و sideBar دارای ارتفاع یکسان و رنگ پس زمینه متفاوت خواهند بود .

نمایش صفحه

ساختار HTML

---

<div class="container">
	<div class="header">
        <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
        <h2>دو ستون - عرض ثابت</h2>
	</div>
	<div class="navigation">
		<ul>
			<li><a href="#">خانه</a></li>
			<li><a href="#">درباره ما</a></li>
			<li><a href="#">خدمات</a></li>
			<li><a href="#">ارتباط با ما</a></li>
		</ul>
	</div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا می شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

---

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */ 
/* [email protected]  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
ol, ul {
	list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;/* font-size 1em = 10px */ direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
	width:960px;
	margin: 0 auto;
	background:#fff;
}

.header
{
	background:#ccc;
	padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 
.navigation
{
	background:#333;
	height:30px;
	line-height:30px;
}

.navigation ul li
{
	float:right;
}

.navigation li a
{
	display: block;
	height:30px;
	padding:0 15px;
	color:#fff;
	text-decoration: none;
	border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
	background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
	width:650px;
	float:right;
	padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;
	float:left ;
	padding:20px 10px;

}
.sideBar h3
{
	margin: 0 0 .5em;
}

.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}