چینش صفحه – یک ستون – عرض متغیر

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

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

نمایش صفحه

ساختار 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">
		<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
		<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
	</div>
	<div class="footer">
		Copyright©webtarget.ir|2011
	</div>
</div>

کدهای CSS

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

• liquid

  با توجه به چینش از نوع متغیر و یا در اصطلاح liquid عرض ثابت برایcontainer در نظر گرفته نشده است . برای ایجاد فاصله از چپ و راست از margin:0 30px استفاده شده است که نشان دهنده 30px فاصله از سمت چپ و راست و 0px از بالا و پایین است. در این رابطه می توانید مطلب Margin , Padding – خلاصه نویسی دستورات 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
{
	margin: 0 30px;
	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
{
	padding: 20px;
	background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
	color:#000;
	margin: 0 0 .5em;
}

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