امتیاز موضوع:
  • 14 رأی - میانگین امتیازات: 2.79
  • 1
  • 2
  • 3
  • 4
  • 5
تنظیم عرض، ارتفاع، و overflow با CSS
#1
عرض و ارتفاع

width

این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل 200 پیکسل تعیین می کنیم:


کد:
این جمله پس از اینکه عرض آن از 200 پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند.

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

این جمله پس از اینکه عرض آن از 200
پیکسل بیشتر شد در سطرهای بعدی
ادامه پیدا می کند.

مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.


height

این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را 100 پیکسل قرار می دهیم تا وقتی که متن موجود در DIV از 100 پیکسل کمتر ارتفاع دارد ارتفاع DIV 100 پیکسل خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از 100 پیکسل بیشتر شود در نتیجه ارتفاع DVI هم از 100 تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجه کنید:
  1. ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:
کد:
ارتفاع این متن از 100 پیکسل کمتر است.


[تصویر:  13458130611.jpg]

2. حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:

کد:
<div style="height:100px">ارتفاع<br>این<br>متن از<br>100<br>پیکسل <br>کمتر<br>است.</div>

[تصویر:  13458134461.bmp]


مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید.


overflow

وقتی محتویات قسمتی از صفحه طول یا عرضی بزرگتر از آن قسمت در بر گیرنده داشته باشد، با پارامتر overflow می توانیم مشخص کنیم که آن قسمت زیادی نمایش داده شود یا مخفی شود. به صورت پیش فرض قسمتهای اضافی نمایش داده می شوند ولی با این پارامتر ما می توانیم آنها را مخفی کنیم. به مثال زیر توجه کنید:

کد:
<div style="width:200px; overflow:hidden"><nobr>طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شوند.</nobr></div>

[تصویر:  13458136381.bmp]


[تصویر:  glossy-3d-blue-orbs2-043-icon.png] به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:
  1. [تصویر:  dot-Mac-Logo-Graphite-icon.png] visible
    یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
  2. [تصویر:  dot-Mac-Logo-Graphite-icon.png] hidden
    این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
  3. [تصویر:  dot-Mac-Logo-Graphite-icon.png] scroll
    این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند.
به یک مثال توجه کنید:

کد:
<div style="width:200px; overflow:scroll; border:dashed 1px #3399FF; white-space:nowrap">طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.
</div>

[تصویر:  13458138381.bmp]

پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  تنظیم فونت صفحه با استفاده از استایل(CSS) انجمن مخ ها 0 233 26-08-2012، 02:29 PM
آخرین ارسال: انجمن مخ ها
  تنظیم حاشیه و فاصله از لبه در عناصر صفحه انجمن مخ ها 0 220 25-08-2012، 08:23 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان