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

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


امیر سروری 16 دیدگاه CSS , HTML , اصول طراحی وب سایت Friday, 5th August , 2011 39768 بازدید

چینش صفحه با ساختار دو ستون با عرض متغیر در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            */ 
/* [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 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;
}


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

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


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

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




    • امیر سروری
      6 August 2011

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




  2. سینا
    16 August 2011

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




    • امیر سروری
      16 August 2011

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




  3. امیرحسین جلوداری
    25 August 2011

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

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




  4. آرمان
    2 September 2011

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




  5. امیر حسین
    24 September 2011

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




    • امیر سروری
      24 September 2011

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




  6. اسدی
    4 October 2011

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




  7. mossa
    1 November 2012

    خیلی ممنون….




  8. داوود
    17 December 2012

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

    ممنونم.




  9. حسن سعادتي
    25 April 2013

    سلام
    عالي بود




  10. maryam
    30 May 2013

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




  11. هادی 066
    22 March 2014

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



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





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

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

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

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

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



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

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