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

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


امیر سروری ۸ دیدگاه CSS , HTML , اصول طراحی وب سایت شنبه, 16th جولای , 2011 22818 بازدید

چینش صفحه با ساختار دو ستون با عرض ثابت به همراه لایه های گسترده به وسیله 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 شما افزایش یابد و در مواقعی به بیش از ۲۰۰۰ خط برسد . در این مواقع نوشتن توضیحات در کدهای 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 -----------*/
.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;
}


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

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


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


  1. مجتبی
    31 جولای 2011

    اگه میشه آموزش بدید که چجوری میشه کادر جستجویی مثل همین کادر جستجوی بالای سایت شما در وبلاگهایی که در بلاگفا ایجا میشن گذاشت با تشکر.




  2. محسن
    30 نوامبر 2011

    سلام.

    قسمت های header , navigation , footer در هر صفحه نمایشی، کل عرض صفحه رو اشغال میکنن؟

    چرا پس عرض اونها به ۹۶۰px محدود شده؟




  3. امیر
    7 مارس 2012

    محسن جان برای اینه که سایتهایی که عرضشون از ۹۸۰ px بیشتر باشه تو بعضی از نمایشگرا اسکرول میشن و برای اینکه تو همه ی نمایشگرا درست دیده بشه میان و عرض رو به ۹۶۰ تا ۹۸۰ محدود میکنن .




  4. نوید
    25 مارس 2013

    با سلام و خسته نباشید
    میشه توضیح بدین که لایه ای که منو ها رو شامل میشه با چه خاصیت css ای پایین لایه بالایی که header باشه قرار میگیره.




  5. yas
    28 ژوئن 2013

    سلام.با تشکر از سایت خوبتون.
    دوست عزیز راستش من در رابطه با margin , padding مشکل دارم .اگه میشه یه مطلب خیلی خاص و توجیه کننده بذارین.
    با تشکر




  6. مریم
    26 جولای 2013

    باسلام من مطالبی در مورد تکنولوژی div میخوام ولی نیست محدوده لطفا کمک کنید




  7. یو پی اس
    5 آگوست 2013

    با سلام
    ممنون عالی بود




  8. maed
    26 نوامبر 2020

    درود خسته نباشید میشه لطف کنید برای بیشتر کردن مقدار طول بخش وسط سایت(content) باید کدوم قسمت رو تغییر بدم؟



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





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

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

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

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

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



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2021 وب‌تارگت

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