Posts Tagged ‘floated box’

إنشاء محتويات عائمة في ووردبرس

2010/05/04
يتيح ووردبرس لمستخدميه إمكانية كتابة تعليمات CSS في محتوى التدوينات و الصفحات و الصناديق الجانبية، و هذه ميزة رائعة فهي تمكن المستخدم من القيام بالكثير من التعديلات في مدونته.
لا أريد أن أطيل، سأتحدث عن كيفية إنشاء صندوق عائم في المدونة كالذي أضفته اليوم على اليسار و هو يحوي روابط كصور تقود إلى حساباتي في فلكر و تويتر و خلاصات المدونة بالإضافة إلى الابتسامة التي تؤدي إلي هذه التدوينة.
لإنشاء محتوى عائم في الصفحة نستخدم تعليمة position في CSS بالإضافة لـ left, right, top, bottom تأخذ الخاصية position القيم relative, absolute, fixed ، لجعل المحتوى في موضع مطلق بالنسبة للصفحة ثم نتحكم بهذا الموضع نستخدم absolute و لجعل المحتوى مثبت نستخدم fixed ثم نحدد المكان بالضبط من خلال left, right, top, bottom

مثال:

<div style="position:absolute;top:10px;right:10px;">
Hello
</div>

مثال 2:
<div style="position:fixed;top:300px;left:0;color:white;
width:100px;height:100px;background-color:red;">
Hello 2
</div>

نكتب هذه التعليمات في صندوق من نوع نص في لوحة تحكم ووردبرس، يمكن القيام بالكثير من الأشياء المشابهة، يمكن مثلا إنشاء شيء مشابه يظهر في تدوينة معينة فقط (قد أكتب تفصيلات أكثر لاحقا) كتبت الآن موجزا سريعا.

من الواضح أني لا أعرف كيف أوصل الفكرة بشكل جيد لكن أتمنى أن يفيد ما كتبت، من لديه رغبة في إنشاء شيء ما مماثل لما تحدثت عنه و لا يعرف و لم يفهم كثيرا مما قلت يمكنه أن يطلب مني ذلك هنا كتعليق و أجيبه.
ملاحظة
لم أقم بتجربة كل ما سبق على متصفح انترنت اكسبلورر (لأنه غير موجود عندي)، لا أعرف بالضبط إن كانت ستظهر خلافات كما هو يحدث عادة، سأجرب في أقرب كمبيوتر يحويه أصدفه و إن وجدت شيئا يستحق التعديل أو التنويه أفعل.

Advertisements