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

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


۷ دیدگاه CSS , HTML , اصول طراحی وب سایت سه شنبه, ۲۱ام تیر , ۱۳۹۰ 12503 بازدید

چینش صفحه با ساختار دو ستون با عرض ثابت به وسیله 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            */ 
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- 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 بر یک عنصر را خنثی کنیم . در مورد این تکنیک در آینده مطالبه نوشته خواهد شد .

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

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

رنگ مورد استفاده در پس زمینه 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            */ 
/* Sorouri.amir@gmail.com  */
/*-------------------------*/

/*--------- 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;
}


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۷ دیدگاه برای این نوشته ثبت شده است


  1. محسن هاشمی
    ۲۶ مرداد ۱۳۹۰

    سلام.

    جساراتاً بازم یک ابهام در مورد clearfloat !

    چرا بعد از contentBody از عنصر clearfloat استفاده شده؟
    در حالیکه باید بعد از contentBody ، بخش sideBar در کنارش قرار بگیره و نباید خاصیت float که برای contentBody هست از بین بره.

    دلیل خاصی داره یا اشتباه شده؟

    سپاس . . .




  2. محسن
    ۸ آذر ۱۳۹۰

    سلام.

    در اینجا به عنصر container خاصیت height داده نشده و طبعاً ارتفاعش به اندازه محتواش خواهد بود.

    من دیدم بعضی از سایتها، در همچین مواقعی، مقدار heightرو برابر با auto قرار میدن.

    فرق اینها با هم چیه؟

    یعنی اینکه به height هیچ مقداری ندیم و یا اینکه مقدار اون رو برابر با auto قرار بدیم، چه تفاوتی داره؟




    • امیر سروری
      ۸ آذر ۱۳۹۰

      محسن @ سلام قرار دادن یا ندادن مقدار auto برای height هیچ تفاوتی نداره . چون به صورت پیش فرض اگه مقداری برای height تعیین نشه مقدارش برابر با auto خواهد بود .




  3. پروانه
    ۲۸ شهریور ۱۳۹۱

    سلام آقا امیر
    واقعا ممنون از مطالب مفیدتان
    موفق باشید




  4. سعید
    ۲ مهر ۱۳۹۱

    سلام آقا امیر خسته نباشید.چرا در استایل بیشتر سایتها margin ،padding و … در یک بلاک برابر صفر قرار میدن. مثل کاری که خودتون اول این استایل کردید؟مرسی




  5. >:):-/reza
    ۹ مرداد ۱۳۹۳

    خیلی خوبه که میشه ازشما فهمید وب چیه




  6. shadt
    ۹ مرداد ۱۳۹۳

    عالی تر ز همیشه از این بهتر نمیشه جامع و خوب به ماهم سربزنید vasighidesign.ir



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 webtarget.ir

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.