طراحی وب
 
 
تموچين محمدي

رتبه کاربر: مدیریت ارشد سایت
تعداد بحث های ایجاد شده: 501
امتیاز بحث های ایجاد شده: 1042

تعداد بازدید: 483
امتیاز بحث: 0
ستون بندی مطالب در CSS3
1392/01/14
کی از مشکلاتی که پیشرفت تکنولوژی برای طراحان وب سایت به وجود آورد، تنوع ابعاد نمایشگرها بود. متخصصان طراحی برای نمایش متن های طولانی در چند ستون در نمایشگرها از روش های مختلفی استفاده می کردند.

یکی از راه حل ها ایجاد دستی ستون های مختلف برای متن ها است که بزرگترین مشکل آن از دست دادن زمان است. روش دیگر استفاده از کدنویسی (جاوااسکریپت) و تقسیم متن به ستون های مختلف با استفاده از محاسبات است که هم نتیجه 100% مطلوب نخواهد داشت و هم در صورت غیر فعال بودن جاوااسکریپت پردازش نخواهد شد.

اما با استفاده از دستورات CSS3 می توانیم متن ها را به تعداد ستون دلخواه به همراه تنظیمات مربوط به آن از جمله فاصله بین ستون ها تقسیم کنیم.


در ادامه مطلب با تنظیمات و جزئیات مربوط به دستور column سی اس اس آشنا خواهیم شد. دستوری که کمک زیادی به شما می کند تا سایت خود را مطابق با نمایشگر کاربر تنظیم کنید.


تنظیمات column

خوشبختانه تنوع تنظیمات دستورات CSS3 برای ستون بندی متون این توانایی را به ما می دهد تا تمام جزئیات ستون ها را به دلخواه تعریف کنیم. این تنظیمات عبارتند از:


column-count: تعداد ستونی که باید ایجاد شود
column-width: عرض هر ستون (بسته به مرورگر ممکن است این مقدار تغییر کند)
column-gap: فاصله بین ستون ها
column-rule-width: ضخامت حاشیه ستون ها (مانند دستور border-width)
column-rule-style: نوع حاشیه ستون ها (مانند دستور border-style)
column-rule-color: رنگ حاشیه ستون ها (مانند دستور border-color)
column-span: همانند خصوصیت colspan یا rowspan در جداول HTML عمل می کند و باعث می شود برای شیئ مربوطه به تعداد دلخواه فضا اشغال شود.


همانطور که مشاهده می کنید، تنوع این تنظیمات عملا جوابگوی تمام نیازها برای ستون بندی های مختلف است.
نکته: به استثنای دستور column-count، سایر دستورات اختیاری هستند. 


  1. /* تقسیم شیئ به 3 ستون - فاصله ستون ها 20 پیکسل - خط حاشیه از نوع ممتد معمولی با ضخامت 1 پیکسل و رنگ مشکی */
  2. .cols3 {
  3.   column-count: 3;
  4.   column-gap: 20px; 
  5.   column-rule-width: 1px;
  6.   column-rule-style: solid;
  7.   column-rule-color: #000;
  8. }

همانند سایر دستورات سی اس اس می توانیم خلاصه نویسی کنیم: 


  1. .cols3 {
  2.   column-count: 3;
  3.   column-gap: 20px;
  4.   column-rule: 1px solid #000;
  5. }

سازگاری با مرورگرها

همانطور که می دانید اکثر مرورگرها (جدید) دستورات CSS3 را پشتیبانی می کنند. در جدول زیر مرورگرهایی که دستور column را پشتیبانی می کنند (به همراه نسخه آن ها) لیست شده اند.
نکته: برای موتور وبکیت پیشوند -webkit- و برای موزیلا پیشوند -moz- قبل از دستورات باید اضافه شوند. (نیازی به قرار دادن پیشوند های -ms- و -o- برای اینترنت اکسپلورر و اوپرا نیست و در صورت پشتیبانی، از دستورات اصلی استفاده می کنند)


columns-2.gif

مثال 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="utf-8" />
  5.  <title>CSS3 column demo</title>
  6.  <style type='text/css'>
  7.  
  8.  .cols3 {
  9.   -webkit-column-count: 3;
  10.   -webkit-column-gap: 20px;
  11.   -webkit-column-rule: 1px solid #000;
  12.  
  13.   -moz-column-count: 3;
  14.   -moz-column-gap: 20px;
  15.   -moz-column-rule: 1px solid #000;
  16.  
  17.   column-count: 3;
  18.   column-gap: 20px;
  19.   column-rule: 1px solid #000;
  20.  }
  21.  
  22.  .cols3 h1 {
  23.   -webkit-column-span:all;
  24.   -moz-column-span:all;
  25.   column-span:all;
  26.  }
  27.  
  28. </style>
  29. </head>
  30. <body>
  31.  
  32. <div class='cols3'>
  33.  
  34. <h1>Integer posuere erat a ante</h1>
  35.  
  36. <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p>
  37.  
  38. <p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  39.  
  40. <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
  41.  
  42. <p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.</p>
  43.  
  44. </div>
  45. </body>
  46. </html>

و خروجی شبیه این تصویر خواهد شد:


columns-3.gif

نظرات کاربران
ترتیب نظرات: جدیدترین به قدیمی ترین
تاکنون نظری ارسال نگردیده است
  
تمام حقوق برای سایت Tamoochin.com محفوظ است
©2024 Tamoochin.com | TCOM