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

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


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

چینش صفحه با ساختار دو ستون با عرض ثابت به همراه لایه های گسترده به وسیله 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. مجتبی
    ۹ مرداد ۱۳۹۰

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




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

    سلام.

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

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




  3. امیر
    ۱۷ اسفند ۱۳۹۰

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




  4. نوید
    ۵ فروردین ۱۳۹۲

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




  5. yas
    ۷ تیر ۱۳۹۲

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




  6. مریم
    ۴ مرداد ۱۳۹۲

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




  7. یو پی اس
    ۱۴ مرداد ۱۳۹۲

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



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





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

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

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

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

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



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

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