الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css

مرحباً بكم أيها الكرام من أعضاء و زوار شبكة ومنتديات ستار مصر التطويريه من كل مكان





كثيرا مانعانى من شكل حدود المنتدى على المتصفحات الأخرى غير الأكسبلوار
وللأسف أغلب مصممي الاستايلات لا تهتم بهذا النقطة حتى المنتديات التطويرة
الكبيرة !


مثلا حاول ان تفتح منتدى ترايدنت على متصفح الفايرفوكس وشاهد كيف تظهر حدودة ( مشكلة !! )

عما لو شاهدته على الاكسبلوار العادى



والسبب في ذلك يرجع ان البعض مازال يستخدم الكود القديم المتهالك لحفر الجدول فى لغه html وهو borderColorDark و borderColorLight والحد border=1
وتجده بالشكل التالي بالجدول ..
</SPAN>

الرمز:

<table class="tborder" cellpadding="0" cellspacing="0" borderColorDark="#FFFFFF" borderColorLight="#8F7D5E" border="1" width="100%" align="center">

وهذا الكود يلغي كود التحديد القياسي لحدود المنتدى الافتراضيه فى الـ class=tborder والذى بدورة يطلب كود الحد من متغيرات css القياسية
والفاجعه ايضا ان تجد مصمم الاستايل لكي يطبق هذا الحفر بين كل موضوع
والثاني اى فى alt1 و alt2 يضع نفس هذا الكود فى متغيرات الاستايل ثم Inner
Border Width أو عرض الحدود الداخلي بالكود التالي :

الرمز:

2" borderColorDark="#FFFFFF" borderColorLight="#10375D" border="1

وهذا خطأ كبير لان الامر كان يصلح قديما فى الزمن الجميل وقبل ان تنتشر
المتصفحات الجديدة التى تعتمد على الأكواد القياسيه والنمط css فى التصميم
ــ فرجاء الان من كل مصمم ان يحذف هذا الكود نهائياً من الاستايل ويرجع هذا
الخيار بإعدادات المنتدى للوضع الافتراضي وهو (1 بكسل) ــ
والان لكي نصنع حدود متوافقه مع كل المتصفحات وبطريقه صحيحة سنغير فى إعدادات css للمنتدى ..
- فى حدود الجدوال table border وهو المتغير
tborder : لكي تبدو لنا الجدوال محفورة من الخارج واللونين المتناوب الأول
والثاني alt1 و alt2 : للفصل بين المواضيع ولكى تبدو لنا الحدود محفورة من
الداخل ..
ويمكنكم ان تشاهدوا مثال لحفر الحدود الداخلية بين المواضيع بوضوح في منتدى سوالف فهى تعانى من نفس المشكلة اثناء العرض ع الفايروفوكس !
- ايضا من المتغير vbmenu_control وهو الخاص
بالوصلات التى بالنافبار وكذلك الوصلات التحكم بالموضوع كى تبدو لنا محفورة
ومعدلة بالشكل التالي

إذهب الى الإستايلات والقوالب > التحكم بالإستايل > css رئيسي .......
- لحدود الجدول المحفورة الخارجية ابحث عن ( حدود الجدول ) وضع لون
للخلفية مناسب بحيث يكون أغمق قليلاً من لون خلفية صفحة المنتدى لديك ( حسب
تلوينك )
وهذا سيمثل الحد الداخلي ..
ثم من ( خواص css
إضافية ) اضف الكود التالي وهو الذى يمثل الحد الخارجي

الرمز:

border: 1px solid #FFFFFF; border-top: 0px;

- للفصل بين المواضيع بكود الحفر في المتغيرات alt1 و alt2 إذهب الى اللون
المتناوب الأول ثم ( خواص css إضافية ) وضع الكود التالي فيها :

الرمز:

border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;

نفس الكود كررة مع لون التوزيع الثاني ...
- الوصلات الخاصة بالـ navbar هذا سيتطلب منا الدخول على القالب والتعديل عليه ..
إفتح القالب بالدريم ويفر وابحث فيه الكود التالي :

الرمز:

<!-- nav buttons bar --> <div align="center"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">

وهو بدايه الجدول الخاص بالوصلات ..
ونستبدله بالتالي :

الرمز:

<!-- nav buttons bar --> <div align="center"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" style="border-top-width:0px">

وما تم فعله هو تحديد ( cellspacing ) فقط بدلا من القيمة 0
بعدها نذهب ايضا ونبحث علي ( التحكم بالقوائم المنبثقة/Popup Menu Controls
) من css رئيسي ونضيف نفس الكود اللى اضفناه بلون التوزيع الاول والثاني
...

بنفس هذا الكود ايضاً يمكننا وضعه بقائمة الإنبثاق حتى تظهر هى الأخري بحدود داخليه محف





و إلى هنا اخوانيـ

..ينتهي موضوعنا لهذا اليوم ..

في أمل اللقاء بكمـ

.إن شاء الله في مواضيع جديدة ..

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