إلى خبراء CSS .. أرجوا المساعدة؟؟

[ميسي الروقي]

السلام عليكم,,

أرجوا المعذرة من المشرفين حيث لا أعرف القسم المناسب لطرح المشكلة لكّن في أي مكان سيشاهدها خبراء سوالف وسيقدمون المساعدة.

شاهدوا الصفحة:
http://al3wazm.com/الشروط-و-الأسعار

المشكلة هنا أنّ التعداد يكون باليسار, والكلام مكتوب على اليمين, شكل التدوينة مرعبّ وغير منسّق.

لقد جرّبت الـfloat ولم يفلح, وحلول أخرى أيضاً, ولا أعلم ماهي المشكلة.
فقط يمكنكم مساعدتي على وضع التعداد على اليمين ولكم دعوة بظهر الغيب, يمكنكم تعديلها بالـfirebug الخاص بالفايرفوكس وهو غير موجود بجهازي حالياً.

أتمنّى المساعدة.

[hussein.shy]

اخي ارى انك تستخدم القوائم ol li وكذلك وضعت الصور في css وليس في وسم img وانت عندما تعمل float سوف يتم عمله لكل li لانك وضعت الصورة كخلفية.
عموما في طريقة سهلة وهي بكل بساطة تغيير background-image الي list-style-image

وللتوضيح اكثر افتح ملف css الخاص بك واستبدل background-image بي list-style-image في قوائم li


او
افتح ملف css وابحث عن الاسطر التالية

#content #postcontainer ol li.item1{background-image:url(images/ol_1.png);}
#content #postcontainer ol li.item2{background-image:url(images/ol_2.png);}
#content #postcontainer ol li.item3{background-image:url(images/ol_3.png);}
#content #postcontainer ol li.item4{background-image:url(images/ol_4.png);}
#content #postcontainer ol li.item5{background-image:url(images/ol_5.png);}
#content #postcontainer ol li.item6{background-image:url(images/ol_6.png);}
#content #postcontainer ol li.item7{background-image:url(images/ol_7.png);}
#content #postcontainer ol li.item8{background-image:url(images/ol_8.png);}
#content #postcontainer ol li.item9{background-image:url(images/ol_9.png);}
#content #postcontainer ol li.item10{background-image:url(images/ol_10.png);}
#content #postcontainer ol li.item11{background-image:url(images/ol_11.png);}
#content #postcontainer ol li.item12{background-image:url(images/ol_12.png);}
#content #postcontainer ol li.item13{background-image:url(images/ol_13.png);}
#content #postcontainer ol li.item14{background-image:url(images/ol_14.png);}
#content #postcontainer ol li.item15{background-image:url(images/ol_15.png);}
#content #postcontainer ol li.item16{background-image:url(images/ol_16.png);}
#content #postcontainer ol li.item17{background-image:url(images/ol_17.png);}
#content #postcontainer ol li.item18{background-image:url(images/ol_18.png);}
#content #postcontainer ol li.item19{background-image:url(images/ol_19.png);}
#content #postcontainer ol li.item20{background-image:url(images/ol_20.png);}

استبدلها بالاسطر التالية

#content #postcontainer ol li.item1{list-style-image:url(images/ol_1.png);}
#content #postcontainer ol li.item2{list-style-image:url(images/ol_2.png);}
#content #postcontainer ol li.item3{list-style-image:url(images/ol_3.png);}
#content #postcontainer ol li.item4{list-style-image:url(images/ol_4.png);}
#content #postcontainer ol li.item5{list-style-image:url(images/ol_5.png);}
#content #postcontainer ol li.item6{list-style-image:url(images/ol_6.png);}
#content #postcontainer ol li.item7{list-style-image:url(images/ol_7.png);}
#content #postcontainer ol li.item8{list-style-image:url(images/ol_8.png);}
#content #postcontainer ol li.item9{list-style-image:url(images/ol_9.png);}
#content #postcontainer ol li.item10{list-style-image:url(images/ol_10.png);}
#content #postcontainer ol li.item11{list-style-image:url(images/ol_11.png);}
#content #postcontainer ol li.item12{list-style-image:url(images/ol_12.png);}
#content #postcontainer ol li.item13{list-style-image:url(images/ol_13.png);}
#content #postcontainer ol li.item14{list-style-image:url(images/ol_14.png);}
#content #postcontainer ol li.item15{list-style-image:url(images/ol_15.png);}
#content #postcontainer ol li.item16{list-style-image:url(images/ol_16.png);}
#content #postcontainer ol li.item17{list-style-image:url(images/ol_17.png);}
#content #postcontainer ol li.item18{list-style-image:url(images/ol_18.png);}
#content #postcontainer ol li.item19{list-style-image:url(images/ol_19.png);}
#content #postcontainer ol li.item20{list-style-image:url(images/ol_20.png);}

وبالمناسية سؤالك في هذا القسم
http://www.swalif.net/softs/swalif44

[الإغريقي]

تفضل :

اضف الكود التالي لملف ال CSS

#content #postcontainer ol li.item1,#content #postcontainer ol li.item2,#content #postcontainer ol li.item3#content #postcontainer ol li.item4,#content #postcontainer ol li.item5,#content #postcontainer ol li.item6,#content #postcontainer ol li.item7,#content #postcontainer ol li.item8,#content #postcontainer ol li.item9{
background-position: 100% 50%;
}

أو

ابحث عن

#content #postcontainer ol li.item1

اضف داخله هذا الكود

background-position: 100% 50%;

و طبق هذا على كل item أي item1, item2, item3, item4 ....

=====================

ابحث عن

.js-enabled #content #postcontainer ol li

غير الكود التالي :

padding: 10px 10px 10px 34px;

إلى

padding: 10px 34px 10px 10px;

انتهى.


و بخصوص التعديل الذي ارفقه الأخ hussein.shy فهو جيد و مختصر لكنه له عيب وحيد و هو ان الصور ستبدوا اعلى من السطر قليلاً.

بالتوفيق.

[ميسي الروقي]

أهلاً بكم جميعاً أخوتي,,
لقد حللّتم لدّي أزمة كآنت مرعبة بالنسبة إليّ.
كنت آمل أن أجد الـfirebug لأعمل ما أريد, ولكن صدمت بالإنترنت بمنطقتي, وها أنا الآن أصدمُ من قدراتكم ومن حلولكم المذهلة, لقد كنت أتوّقع أن يصححّها أي مبتدئ بالـCSS ولكن اكتشفت أن من يفعل ذلك هم المبدعون فقط, حتّى المتمرّسين لايجيدون ذلك, فأشكرك أخي الأغريقي وأيضاً أخي حسين وأسأل أن يرّد ربّي جميلكم وإحسانكم إليّ بفيضٍ من الغفران وجبالٍ من الحسنات يوم الحساب, وأسأل الله أن يجمعني بكم مع نبيّه صلّى الله عليه وسلّم في الجنّة, وأن يرزقنا جميعاً ويرزق والدينا هدّية النظر إلى وجهه, وأن يجعلني ويجعلكم ووالدّي ووالديكم من الذين يدخلون الجنّة بلا حسابٍ ولا عذاب.

بصراحة أنا مكوّد CSS أحتاج التمرّس لكن تلك الخطوات التي أتحفتموني بها لم تخطر على بالي أصلاً, كنت أتوّقعها JS فقط, ولكن أذهلتموني ياعرب! .
صراحةً لم أتوّقع أن يكون لدينا نوابغ عرب بهذه الكيفيّة, ولكّن انذهلت صراحةً من حلولكم, فأتمنّى لكم مزيداً من التقدّم, و HTML5 هي القادمة ياشباب, وهيّا بنا نجتاح عالم الويب ياعرب! .