حــصريا لكم تـقنية inline-block في CSS3 - CSS

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

في أول موضوع لي في منتداكم الغــالي

سوف أقوم بدرس خفيف وبسيط حول "التمركز" أو ما يعرف بالفرنسية بـla positionnement

من خلال CSS أو CSS3 ..

أغلب المواقع اليوم تعتمد على البارمتير أو الخاصية float وفي الحقيقة هده الخاصية ليست مخصصة

لهده الأمور لكن جرت العادة أن يتعامل معها الجميع الا أن لها بعض السلبيات وقد تسبب الكثير من المشاكل

لـهدا أن سأقترح عليكم اليوم استعمال باراميتر جديد

وفي الحقيقة التقنية الخاصة "بالتمركز" أو "التموضع" ليست حديثة الوجود بل هي

مند نسخة css 2.1

التقنية التي سأحدثكم عنها تستوجب تحويل عناصر html الى الصنف inline-block عن طريق البارامتيز display

أولا حتى أفسر لكم بعض الأمور .. فعناصر html أي الحقائب مثل <div> و <a> الخ هي تنتمي الى أنواع وأصناف مختلفة

فهــناك من هي تنتمي للصنف inline مثل <a> و <em> وعناصر هد الصنف تتميز بكونها تكون على نفس السطر

وهناك الصنف الاخر block ويضم <div> و <p> الخ .. وهي عناصر تتميز بكونها تترتب الواحدة تلو الاخرى

أي أنه لو قمنا بكتابة الكود التالي :

أي بعد غلق كل عنصر يتم المرور الى السطر الموالي

وهناك صنف آخر وهو inline-bock وهو صنف يخص العناصر التالية select و </input> وما يميز عناصر هدا الصنف أنها تكون على نفس السطر لكنها قابلة لكي تكتسب أحجام مختلفة

وأيضا هناك صنف آخر none مثل العنصر head أي أنها لا تظهر في الصفحة

هده الاصناف هي في نفس الوقت قيم خاصة بالباراميتر الدي سنعمل عليه وهو display

بحيث سوف نقوم بتحويل صنف بعض العناصر الى inline-block

اليكم الكود التالي :

كود html

كود css

أعلم أن الأكواد غير منظمة لكن فقط حتى أوضح لكم

والنتيجة ستكون كالتالي :

لكن مادا لو أردنا جعل القائمة جانبية وباقي المحتوى في الوسط على الشكل التالي :

كم ترون جعنا كلاهما في نفس المستوى ولكي نقوم بهدا فقط قمت بتغير صنف العنصرين من خلال

inline-block

اليكم كود css فهو الكود أبلغ ويوضح كل شيء

لكن كما ترون فمحتوى الموقع أتى في مستوى أسفل مقارنة مع القائمة لكي نحل هدا المشكل نقوم بـالتالي

والان اليكم النتيجة النهائية

بدون عناء ..

فقط بخصوص verticale-align هناك 3 قيم ممكنة top و middle و bottom كما يمكن اضافة قيم بـpx أو %

المشكل الوحيد أن inline-block لا تتطابق مع النسخ القديمة للانترنت اكسبولولر وتتطابق فقط مع النخسة 8 فما فوق

لهدا وجب وضع حلول مرجعية مثلا توفير ملف css ثاني خاص بالنسخ القديمة ..