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

نوشته شده در ۲۵ آبان ۱۳۹۱ ساعت ۲۳:۲۶ | 60,060 بازدید

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

این نوع از چینش در بسیاری از وب سایت ها مورد استفاده قرار میگیرد . با توجه روزلوشن های متغیر و صفحات نمایش گوناگون ، این نوع از چینش می تواند یک ساختار مدرن را برای وب سایت شما ایجاد نماید . با توجه نوع و تکنیک مورد استفاده در این نوع از چینش توضیحات بیشتری ارائه خواهد شد .

در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .

ساختار HTML

[codesyntax lang=”php”]

&lt;div class="container"&gt;
  &lt;div class="header"&gt;
      &lt;div class="wrapper"&gt;
            &lt;h1&gt;&lt;a href="http://www.webtarget.ir/"&gt;webtarget.ir&lt;/a&gt;&lt;/h1&gt;
            &lt;h2&gt;دو ستون - عرض ثابت + لایه های گسترده&lt;/h2&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="navigation"&gt;
      &lt;div class="wrapper"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;خانه&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;درباره ما&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;خدمات&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;ارتباط با ما&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
  &lt;/div&gt;
    &lt;div class="content"&gt;
            &lt;div class="contentBody"&gt;
                &lt;h2&gt;آموزش چینش صفحات وب سایت با استفاده از CSS&lt;/h2&gt;
                &lt;p&gt;کد نویسی بر اساس استاندارد W3C انجام شده است&lt;/p&gt;
                &lt;p&gt;چینش بر اساس زبان فارسی و از راست به چپ است - rtl &lt;/p&gt;
                &lt;br class="clearfloat" /&gt;
            &lt;/div&gt;
            &lt;div class="sideBar"&gt;
                &lt;h3&gt;سر فصل برای ستون کناری&lt;/h3&gt;
                &lt;p&gt;با ساختار و چینش های استاندارد آشنا شوید&lt;/p&gt;
            &lt;/div&gt;
            &lt;br class="clearfloat" /&gt;
    &lt;/div&gt;
  &lt;div class="footer"&gt;
      &lt;div class="wrapper"&gt;
            Copyright©webtarget.ir|2011
        &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>

<h2>دو ستون - عرض ثابت + لایه های گسترده</h2>

</div>

<ul>

<li><a href="#">درباره ما</a></li>

<li><a href="#">خدمات</a></li>

<li><a href="#">ارتباط با ما</a></li>

</ul>

</div>

<h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>

<p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>

<p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>

</div>

<h3>سر فصل برای ستون کناری</h3>

<p>با ساختار و چینش های استاندارد آشنا شوید</p>

</div>

</div>

</div>

[/codesyntax]

کدهای CSS

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

wrapper

از class تعریف شده با نام wrapper برای کنترل محتویات هر یک از این بخش ها استفاده شده است که به صورت مجزا برای هر قسمت تعریف شده است .
css comment

در کد نویسی css از تکنیک comment گزاری برای خوانایی بیشتر کدهای استفاده شده است که در افزایش بهره وری یک طراح وب سایت بسیار مهم و تاثیر گزار است . استفاده از این استاندارد زمانی اهمیت پیدا خواهد کرد که تعداد خط کدهای css شما افزایش یابد و در مواقعی به بیش از ۲۰۰۰ خط برسد . در این مواقع نوشتن توضیحات در کدهای css الزامیست .

[codesyntax lang=”css”]

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design &amp; 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;
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

۹۷

۹۸

۹۹

۱۰۰

۱۰۱

۱۰۲

۱۰۳

۱۰۴

۱۰۵

۱۰۶

۱۰۷

۱۰۸

۱۰۹

۱۱۰

۱۱۱

۱۱۲

۱۱۳

۱۱۴

۱۱۵

۱۱۶

۱۱۷

۱۱۸

۱۱۹

۱۲۰

۱۲۱

۱۲۲

۱۲۳

۱۲۴

@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: ۰;

padding: ۰;

border: ۰;

outline: ۰;

}

ol, ul {

list-style: none;

}

body { font:۶۲.۵%/۱.۷em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/

.container {font-size:۱.۲em;}

.clearfloat {clear:both; height:۱%;}

h1 , h2 , h3 { font-family:Arial, Helvetica, sans-serif;}

h1 { font-size:۱.۸em;}

h2 { font-size:۱.۶em;}

h3 { font-size:۱.۴em;}

/* ---------- Main -----------*/

.wrapper{margin:۰ auto;}

/* ---------- Header -----------*/

.header

{

background:#ccc;

}

.header .wrapper { padding:۲۰px; width:۹۲۰px;}

.header h1 { text-align:left;}

.header h1 a{ text-decoration:none; color:#۰۹F;}

/* ---------- Navigation -----------*/

.navigation .wrapper { width:۹۶۰px;}

.navigation

{

background:#۳۳۳;

height:۳۰px;

line-height:۳۰px;

}

.navigation ul li

{

float:right;

}

.navigation li a

{

display: block;

height:۳۰px;

padding:۰ ۱۵px;

color:#fff;

text-decoration: none;

border-left: ۱px solid #fff;

}

.navigation li a:hover { background:#۰۹F; }

/* ---------- Content -----------*/

.content

{

margin:۰ auto;

width:۹۶۰px;

background:url(sideBarBg.jpg) repeat-y left top #eee;

}

.contentBody

{

width:۶۵۰px;

float:right;

padding:۲۰px;

}

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

.contentBody h2

{

margin: ۰ ۰ .۵em;

}

/* ---------- Side Bar -----------*/

.sideBar

{

width:۲۵۰px;

float:left ;

padding:۲۰px ۱۰px;

}

.sideBar h3

{

margin: ۰ ۰ .۵em;

}

/* ---------- Footer -----------*/

.footer .wrapper { width:۹۶۰px;}

.footer

{

background:#ccc;

padding: ۲۰px;

text-align:left;

}

[/codesyntax]

منبع : وب تارگت

چاپ این صفحه
لینک کوتاه این محصول : http://ipmg.ir/?p=451

ایده پردازان مهرگستر

خدمات طراحی و میزبانی وب و ثبت دامنه

جستجو در سایت

ناحیه کاربری

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

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

wrapper

css comment

دیدگاه ها (بدون دیدگاه)

Leave a Reply

افتخارات ما

ایده پردازان مهرگستر

میزبانی وب و ثبت دامنه

خدمات پیام کوتاه

خدمات طراحی