عرض و ارتفاع :width
این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برایمثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل ۲۰۰ پیکسل تعیین می کنیم:کد:کد:
این جمله پس از اینکه عرض آن از ۲۰۰ پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کن
.</div>
نتیجه به صورت زیر خواهد بود:
این جمله پس از اینکه عرض آن از ۲۰۰
پیکسل بیشتر شد در سطرهای بعدی
ادامه پیدا می کند.مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسلباشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل استرا بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامتدرصد ( % ) را پس از مقدار قرار دهید.height
این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدارآن را ۱۰۰ پیکسل قرار می دهیم تا وقتی که متن موجود در DIV از ۱۰۰ پیکسلکمتر ارتفاع دارد ارتفاع DIV ۱۰۰ پیکسل خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از ۱۰۰ پیکسل بیشتر شود در نتیجه ارتفاع DVI هم از ۱۰۰تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجهکنید:ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است:کد:کد:<div style=”height:۱۰۰px”>ارتفاع این متن از ۱۰۰ پیکسل کمتر است.</div>
حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است:کد:کد:
ارتفاع<br>این<br>متن از<br>۱۰۰<br>پیکسل <br>کمتر<br>است
.</div>
نکته : حتما این کد ها که براتون اینجا نتیجه براشون گذاشته نشده ،خودتون تست کنید و نتیجه را ببینید ( به علت محدودیت در نمایش کد های java و html بعضی از کد ها را نمی توان برای شما اینجا نمایش داد )اگر بخواهیم ارتفاع DIV همان ۱۰۰ پیکسل بماند و تغییر نکند باید ازپارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان رامی دهد که تعیین کنیم وقتی محتویات DIV از عرض یا ارتفاع DIV بزرگتر میشود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید
کد:
<div style=”height:۱۰۰px;overflow:hidden”>
ارتفاع<br>این<br>متن از<br>۱۰۰<br>پیکسل <br>کمتر<br>است
.</div>
مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسلباشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل استرا بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامتدرصد ( % ) را پس از مقدار قرار دهید.overflow
وقتی محتویات قسمتی از صفحه طول یا عرضی بزرگتر از آن قسمت در برگیرنده داشته باشد، با پارامتر overflow می توانیم مشخص کنیم که آن قسمتزیادی نمایش داده شود یا مخفی شود. به صورت پیش فرض قسمتهای اضافی نمایشداده می شوند ولی با این پارامتر ما می توانیم آنها را مخفی کنیم. به مثالزیر توجه کنید:کد:کد:<div style=”width:۲۰۰px; overflow:hidden”><nobr>طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شون.</nobr></div>
به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم:۱. visible
یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد.
۲. hidden
این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند.
۳. scroll
این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش ازطول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند.به یک مثال توجه کنید:کد:
کد:<div style=”width:۲۰۰px; overflow:scroll; border:dashed ۱px #۳۳۹۹FF; white-space:nowrap”>
طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند.
</div>
برای مثال در صفحه اصلی سایت ، در قسمت کابران حاضر ، در صورتی که تعداد کاربران حاضر در سایت زیاد باشد Scroll نمایش داده میشود ، تا لیست کاربران طولانی و طویل نباشد و باعث اشغال صفحه نشود .و یا همچنین در کادر مخصوص کد ها که در تاپیک ها قرار دارد ، مانند همین کادر کد بالا ، هر گاه که کد ها بیش از ۲ یا ۳ خط باشد Scroll نمایش داده میشود .
