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

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


امیر سروری ۱۶ دیدگاه CSS , HTML , اصول طراحی وب سایت جمعه, ۱۴ام مرداد , ۱۳۹۰ 22832 بازدید

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

این نوع از چینش نمونه ای دیگر از چینش صفحه liquid است که با دو ستون ایجاد شده است . به این نکته توجه داشته باشید که این نوع از چینش همیشه به این سادگی صورت نخواهد گرفت و با اضافه شدن محتویات بیشتر مشکلات پیچیده ای اتفاق خواهد افتاد و رفع این مشکلات نیاز به تسلط و تخصص بسیاری دارد . در نهایت این نوع از چینش می تواند یکی از استاندارد ترین نوع چینش از نوع کاربرد پذیری برای کاربران باشد . تست نهایی این نوع از چینش در مرورگر ها و صفحات نمایش با رزولوشن های متفاوت قبل از بهره برداری نهایی الزامی خواهد بود .

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


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


  • container

    در این طرح به دلیل خاصیت liquid مقداری برای conatiner تعیین نخواهد شد . طرح با افزایش عرض صفحه گسترش خواهد یافت

  • sideBar

    اندازه عرض sideBar ثابت خواهند ماند . نوع موقعیت sideBar به موقعیت position:absoloute تغییر داده شده است . غیر قابل پیش بینی بودن اندازه contentBody و تعیین اندازه sideBar بر اساس اندازه contentBody باعث ایجاد این تغییر است . استفاده از موقعیت position:absoloute برای sideBar می تواند این بخش را در موقعیت چپ حفظ کند .

  • contentBody

    با توجه به غیر قابل پیش بینی بودن عرض contentBody مقدار sideBar ثابت در نظر گرفته شده است و با استفاده از padding-left به contentBody اجازه داده نخواهد شد تا در صورت کاهش عرض صفحه بر روی sideBar قرار گیرد .

@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
{
	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
{
	float:right;
	padding:20px;
	padding-left:280px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
	margin: 0 0 .5em;
}

.sideBar
{
	width:250px;
	padding:20px 10px;
	position:absolute;
	left:0;

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

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


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

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


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


  1. میر امید رضوی
    ۱۵ مرداد ۱۳۹۰

    سلام / آقای سروری واقعا خسته نباشید . ممنونم خیلی جذاب / کوتاه و خوب بود :)




    • امیر سروری
      ۱۵ مرداد ۱۳۹۰

      میر امید رضوی @ خواهش میکنم امید جان ، یک آواتار هم برای خودت دستو پا کنی بد نیست ، لینکش همین بقل هست ;)




  2. سینا
    ۲۵ مرداد ۱۳۹۰

    آقا باز هم ممنون از مطالب خوبی که آموزش میدین؛ اما قرار شد که در آخر هر پست فایل پی دی اف آموزش رو هم بذارین. من هر دفعه که به مشکل بر میخورم مجبورم بیام پای اینترنت و یک صفحه وب لود کنم تا یم مشکل کوچیکو رفع کنم
    ممنون میشم برای پست های بعدی اقدام کنید




    • امیر سروری
      ۲۵ مرداد ۱۳۹۰

      سینا @ چشم سینا جان سعی میکنم این کار رو انجام بدم . اگر کسی هم این کار رو انجام بده ممنون میشم ازش و داخل وب سایت قرار میدم :-)




  3. امیرحسین جلوداری
    ۳ شهریور ۱۳۹۰

    پسر کارت فوق العادس (دارم تک تک مقاله های این سایتو سیو میکنم و همین طور بوکمارک کردم این سایتو!)

    بازم دمت گرم!!!




    • امیر سروری
      ۳ شهریور ۱۳۹۰

      امیر حسن @ مرسی از لطفت . خوشحالم که مورد استفاده شما قرار گرفته ، موفق باشی :-)




  4. آرمان
    ۱۱ شهریور ۱۳۹۰

    ببخشید آقای سروری می شه یه آموزش کوتاه در باره ی سی اس اس ۳ بزارید ممنون میشم




  5. امیر حسین
    ۲ مهر ۱۳۹۰

    سلام واقعا کارتون حرف نداره
    خسته نباشید می گم و خدا قوت
    ببیخشید یه سوال داشتم
    می شه یه راهی باشه که بدون درد سر کد نویسی و از این چیزا بشه یه تغییراتی تو قالب وبلاگ بدی.مثل گذاشتن عکس پس زمینه از این کارا
    اگه می شه یه راهنمایی کنید اگه هم سوالم بی مورد و … بود ببخشید دیگه …
    یاعلی




    • امیر سروری
      ۲ مهر ۱۳۹۰

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




  6. اسدی
    ۱۲ مهر ۱۳۹۰

    با سلام آفرین بر شما




  7. mossa
    ۱۱ آبان ۱۳۹۱

    خیلی ممنون….




  8. داوود
    ۲۷ آذر ۱۳۹۱

    ممنون از مقالتون.
    فقط یه سوال
    اگر ما کدهای رسیت رو برداریم چی میشه ؟
    در مورد فونت هم من همیشه پیکسل استفاده میکنم.
    با مرورگر ها هم تغییر سایز داده میشه.
    چرا باید از em استفاده کنم؟

    ممنونم.




  9. حسن سعادتي
    ۵ اردیبهشت ۱۳۹۲

    سلام
    عالی بود




  10. maryam
    ۹ خرداد ۱۳۹۲

    سلام. من در درست کردن چینش صفحه مشکل دارم. خیلی ابتدایی و واضح اگه توضیحات رو داشته باشم می تونم یاد بگیرم. اگه ممکنه یا تو سایت مطلب بذارید و یا واسم میل کنید. ممنون




  11. هادی 066
    ۲ فروردین ۱۳۹۳

    عالی بود لطفا کتاب های خوب در زمینه طراحی وب رو هم معرفی کنید



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





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

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

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

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

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



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

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