السلام عليكم, الموضوع اليوم هو طريقة إظهار مقالة على شكل أعمدة, عند كتابة أي مقالة كلنا نبحث عن الطريقة التي ستجعل محتوى الصفحة يبدو بمظهر جميل و منظم وذلك بوضع صور, تعليقات, ايقونات خطية.. إلخ.
لكن في بعض الأحيان نحتاج إلى أن يظهر المحتوى على شكل أعمدة خصوصاً إذا كان موقعنا هو عبارة عن مجلة إلكترونية أو جريدة إلكترونية.
أحد الخيارات هي إنشاء جداول و توزيع المحتوى فيها لكن الجداول ليست هي الحل الأفضل في يومنا هذا, الحل الأفضل هو إنشاء Divs من أجل توزيع و ترتيب المحتوى, هذا يتطلب إستعمال لغة CSS من أجل الحصول على توزيع و تنظيم أفضل.
لا تقلق, لغة CSS3 جعلت إظهار مقالة على شكل أعمدة في غاية السهولة, أنا سأشرحها لك بالتفصيل الممل. الأمر ليس بالصعب, و لا حتى يجب كتابة كم كبيــــــــــــــــــر من الأكواد, فقط سنقوم بإضافة أسطر قليلة إلى ملف CSS للقالب المفعَّل بأستعمال خاصية column-count.
من المهم أن تعرف أن هناك ملحقات خاصة يجب يجب إدراجها لكي يعمل التنسيق في متصفحات مختلفة.
(webkit- (Chrome, Safari-
(moz- (Firefox-
(o- (opra-
إظهار مقالة على شكل أعمدة يدوياً
أول شيء نقوم به هو إنشاء ID جديد في ملف CSS للقالب المفعَّل نسميه ما نريد, مثلا three-column و نعطيه هذه الإعدادات.
4 | -webkit-column-count: 3; |
بعد ذلك نقوم بوضع المقالة أو الجزء من المقالة الذي نريد إظهاره على شكل أعمدة داخل DIV و نخصص له ID التي قمنا بإنشاءه في ملف CSS.
2 | قناة zdf الالمانية التي اشترت حقوق بث نصف نهائي رابطة ابطال اوربا و كل نهائيات كؤوس و المملكات الاوربية و نهائي رابطة الابطال الاوربية و فتحها بالمجان امام المشاهد |
3 | مما دفع بقناة بي إن سبور لرفع دعوى قضائية ضد القناة الالمانية مطالبة إياها بتشفير قناتها يعني zdf فرفض الالمان طلبهم بل و اكثر من ذلك اشترت القناة الالمانية حقوق بث المونديال و قررت ايضا فتحه بالمجان امام الجميع و بذلك بي إن سبور ستخسر حوالي 75 مليون دولار في ظرف شهر و نصف بسبب القناة الالمانية |
4 | القناة التي صرح مديرها قائلا بانه يستغرب ردة فعل ادارة بي إن سبور التي تريد ان تحتكر كل شئ و اضاف |
5 | نحن اشترينا كما هم اشترو ..هم شفرو قناتهم ليبيعو منتوجهم اما نحن فتركنا المشاهد يستمتع من دون ان يدفع دولارا واحد |
6 | و اضاف استغرب كيف لبلد لم يتاهل للمونديال ان يحتكر المونديال لوحده و سكانه لا يتجاوزون المليون نسمة |
7 | ليضيف المانيا اكبر بكثير من الرمال المحيطة بهذا البلد كرة القدم للفقراء و نحن مع الفقراء في هذا العالم فقناتنا ستنقل لكل مشاهديها عبر العالم اهم المحطات الكروية بالمجان. |
النتيجة:
قناة zdf الالمانية التي اشترت حقوق بث نصف نهائي رابطة ابطال اوربا و كل نهائيات كؤوس و المملكات الاوربية و نهائي رابطة الابطال الاوربية و فتحها بالمجان امام المشاهد
مما دفع بقناة بي إن سبور لرفع دعوى قضائية ضد القناة الالمانية مطالبة إياها بتشفير قناتها يعني zdf فرفض الالمان طلبهم بل و اكثر من ذلك اشترت القناة الالمانية حقوق بث المونديال و قررت ايضا فتحه بالمجان امام الجميع و بذلك بي إن سبور ستخسر حوالي 75 مليون دولار في ظرف شهر و نصف بسبب القناة الالمانية
القناة التي صرح مديرها قائلا بانه يستغرب ردة فعل ادارة بي إن سبور التي تريد ان تحتكر كل شئ و اضاف
نحن اشترينا كما هم اشترو ..هم شفرو قناتهم ليبيعو منتوجهم اما نحن فتركنا المشاهد يستمتع من دون ان يدفع دولارا واحد
و اضاف استغرب كيف لبلد لم يتاهل للمونديال ان يحتكر المونديال لوحده و سكانه لا يتجاوزون المليون نسمة
ليضيف المانيا اكبر بكثير من الرمال المحيطة بهذا البلد كرة القدم للفقراء و نحن مع الفقراء في هذا العالم فقناتنا ستنقل لكل مشاهديها عبر العالم اهم المحطات الكروية بالمجان.
إذا أردنا تغيير عدد الأعمدة أو إضافة تنسيق آخر, فما علينا إلا إنشاء ID آخر بأي إسم و نعطي قيمة أخرى للخاصية column-count.
4 | -webkit-column-count: 4; |
لكن ما رأيك في إضافة خاصيات أخرى مثل column-gap و column:rule؟ لا تنسى الملحقات الخاصة بالمتصفحات.
04 | -webkit-column-count: 4; |
09 | -webkit-column-gap: 2em; |
13 | column-rule: 2px solid #666; |
14 | -webkit-column-rule: 2px solid #666; |
15 | -moz-column-rule: 2px solid #666; |
16 | -o-column-rule: 2px solid #666; |
النتيجة:
سهل جداً و كله بفضل CSS3.
إظهار مقالة على شكل أعمدة بواسطة إضافة
إذا كنت تريد أن تقوم بأشياء أكثر تعقيداً دون إجراء أي تغيير في ملف CSS فما عليك إلا بتنصيب إضافة
Column Shortcodes, هذه الإضافة تعطيك تحكم تام في مضهر المقالة من ناحية الأعمدة و توفر لك خيارات عديدة و رائعة.
كان هذا كل شيء, إذا كان لذيك أي إستفسار أتمنا أن تقوم بوضعه في التعليقات و لا تنسى المشاركة في بريد الموقع لتتوصل بجديد التدوينات على بريدك الإلكتروتي.
ليست هناك تعليقات:
إرسال تعليق