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

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

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

در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .

DEMO

ساختار HTML

<div class="container">
	<div class="header">
    	<div class="wrapper">
            <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
            <h2>دو ستون - عرض ثابت + لایه های گسترده</h2>
        </div>
	</div>
	<div class="navigation">
    	<div class="wrapper">
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">خدمات</a></li>
                <li><a href="#">ارتباط با ما</a></li>
            </ul>
        </div>
	</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">
    	<div class="wrapper">
            Copyright©webtarget.ir|2011
        </div>
	</div>
</div>

کدهای CSS

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

• wrapper

  از class تعریف شده با نام wrapper برای کنترل محتویات هر یک از این بخش ها استفاده شده است که به صورت مجزا برای هر قسمت تعریف شده است .

• css comment

  در کد نویسی css از تکنیک comment گزاری برای خوانایی بیشتر کدهای استفاده شده است که در افزایش بهره وری یک طراح وب سایت بسیار مهم و تاثیر گزار است . استفاده از این استاندارد زمانی اهمیت پیدا خواهد کرد که تعداد خط کدهای css شما افزایش یابد و در مواقعی به بیش از 2000 خط برسد . در این مواقع نوشتن توضیحات در کدهای 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 -----------*/
.wrapper{margin:0 auto;}

/* ---------- Header -----------*/

.header
{
	background:#ccc;
}

.header .wrapper { padding:20px; width:920px;} 
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;} 

/* ---------- Navigation -----------*/

.navigation .wrapper { width:960px;} 

.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 -----------*/


.content
{
	margin:0 auto;
	width:960px;
	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;
}

/* ---------- Side Bar -----------*/

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

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

/* ---------- Footer -----------*/
.footer .wrapper { width:960px;}
.footer
{
	background:#ccc;
	padding: 20px;
	text-align:left;
}