شرح خاصية ,, overflow للتحكم في المناطق المتمددة
شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة


السلام عليكم ورحمة الله وبركاته

خاصية Overflow


احد خواص لغة css


تتحكم هالخاصية في المنطقة المتمددة او الزائدة عن حجم المحتوى بشكل عام


عشان توصلكم الفكرة نشوف هالصفحة


http://www.zozika.net/overflow/overflow.html


هالصفحة مثل ماهو موجود مربعين احدهم احمر والاخر ازرق بداخله


لو افترضنا ان المربع الاحمر هو المنتدى والمربع الازرق هو مشاركة متمددة للخارج مثل مانشوف


الجزء الزائد هذا هو محور حديثنا


وهو ماتتحكم فيه الخاصية بشكل خاص


الخاصية تتحكم في طريقة عرض المناطق المتمددة ولها اكثر من طريقة


الاولى هي اخفاء اي تمدد موجود في الصفحة


كود PHP:
overflowhidden

هالامر يقوم بإخفاء اي جزء متمدد او زائد عن عرض الصفحة او المحتوى المستخدم بشكل عام

فلو افترضنا ان المربع الاحمر جدول وقمنا بإعطاءه اي فئة


كود PHP:
 <table class="test"

وقمنا بتعريف هالفئة كالتالي

كود PHP:
                            .test 

 

overflowhidden


في هذه الحالة اي تمدد زائد في هالجدول لن يظهر ! وبالتالي مستحيل تشاهد اسكرول بار عند استخدام هذه الحالة

شاهد هنا

http://www.zozika.net/overflow/overflow-hidden.html

نلاحظ ان المربع الازرق اختفى منه الجزء المتمدد !

--

الطريقة الثانية هي عمل اسكرول بار

كود PHP:
overflowscroll

طيب اكيد احد راح يسال ويش الفرق ؟ اصلا لما يكون فيه تمدد راح يظهر اسكرول بار ! ماجبت جديد يعني ؟

لا الفرق ان هالاسكرول بار راح يكون على الجزء المتمدد فقط وليس للصفحة ككل ! وبالتالي ايضا راح تبقى الصفحة بدون اي اسكرول بار !

شاهد معي المثال

http://www.zozika.net/overflow/overflow-scroll.html

مثل مانشوف ان الاسكرول بار اصبح على الجزء المتمدد فقط واكنه Iframe بالضبط !

--

الطريقة الثالثة

كود PHP:
overflowvisible

هالطريقة تسمح بعرض المناطق المتمددة بدون اي مشاكل وفائدتها تكمن في حالة لو كنت تعمل على فئة فرعية من فئة اخرى والفئة الرئيسية اخفيت منها التمدد وتريد إظهاره في هالفئة فقط !

--

الطريقة الرابعة

كود PHP:
overflowinherit

وهي تعنى ان الفئة تاخذ اعداداتها بشكل مباشر من الفئة الام ! بمعنى

الفئة الخاصة بالمربع الاحمر بداخلها الفئة الخاصة بالمربع الازرق

وبالتالي فئة المربع الاحمر تعتبر فئة ام للمربع الازرق !

اتمنى تكون الفكرة وصلت

--

الطريقة الخامسة والاخيرة

كود PHP:
overflowauto

وهذه تجعل المستخدم (المتصفح) له الحرية في عرض التمدد او عدم عرضه

<< لو نتذكر الفايرفوس الاصدارات السابقة كان مايعرض اي تمدد موجود في الصفحة !

------

اتمنى يكون الشرح واضح

ويمكن الاستفادة منه في الاستايلات الثابتة فلو اضفنا الكود التالي في نهاية الصفحة الخاصة بإعدادات css الرئيسية

كود PHP:
table 
        

            
overflowhidden
        } 

هذا الكود يعني ان اي جدول موجود في المنتدى راح ياخذ هالفئة بشكل مباشر وبالتالي كل الجداول ماراح يظهر فيها اي نوع من انواع التمددات !

<< لاحظ ان اسم الفئة بدون النقطة table فقط ! تجعل الخاصية يتم تطبيقها على كافة الجداول !

اما .table فهذا يعني انك يتوجب عليك وضع ال class في اي جدول تحب ان يتم تطبيق الفئة عليه !



شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة

شرح خاصية ,, overflow للتحكم في المناطق المتمددة