الموضوع: حفر الجدول لكافة المتصفحات ولاكن اكثر من كود تفضل وتعلم الطريق إلى الإحتراف

اليوم بإذن الله سوف نقوم بتقيم درس مهمة الأساسية
إخراج الإستايل بشكل جميل فى الحدود التى تكون بين أجزاء الجداول


فقد تقدم اخى الحبيب كتوم ca2oom فى تقديم هذا الدرس

ولاكن اليوم سوف أقوم بإضافة أتمنى ان تكون طيبة لكم

ملحوظه طبعا الإضافة جديدة وغير مكررة وحصرى



بسم الله نبدأ

الكود اليوم سوف نقدمة لكم بكل الطرق التى تحبها


عريض
رفيع
حدود واسعة

لا تتعجلو سوف نقوم بالشرح بإذن الله بالصور والموضوع طويل


نتعرف على حدود الجدول العريضة

هذه الحدود غاية فى الروعة إن أستطعت تطبيقها بإحتراف على تصاميمك وتطفى طابع جميل
ومن ميزاتها الفخامة مثـــال
كان يتم فيما مضى أستخدام خانة متغيارت الإستايل بوضع كود والتحكم بيه وباللون
مثال للكود القديم

ولاكن هنا وبكل أسف بالفعل تحكمنا فى متغيارت حفر الجدول كامل على إستايل المنتدى ولاكن على متصفح واحد فقط لا غير الأنتر نت أكسبلوير سواء قديم او 7
ولاكن كى نأتى بكود عريض نستعوض هذا الكود زو الارقام والأوان بهذا الكود البسيط

كود PHP:

4" border="1 


وطبعا بعد مراجعة الإستايل بعد وضع الكود سوف تجدة


عريض ولاكن بارز وشكل غير مرغوب بيه

وطبعا لأننا لم نكمل الحفر وإعطاء قيمة اللأوان المتناسبة للإستايل
الأن نتوجة إلى رئيسي Css
ونبدأ فى وضع القيم المتناسبة مع التصميم وألوانة من بداية حفر الجدول حتى أن ننتهى
والقيم الأن هيه

كود PHP:

border-left: 2px solid #FFFFFF; 
border-top: 2px solid #FFFFFF; 
border-right: 2px solid #F393BA; 
border-bottom: 2px solid #F393BA; 


وتعريف القيم هذه لكى يتم أحتساب اللون عليها كما ترون
صورة

1- left= يسار
2- top = اعلى
3- right = يمين
4- bottom = اسفل

بعد تعرفنا على هذه القيم ندخل على تعديل الإستايل >>>> الرئيسيى
Css

الأن توجة إلى الجزء الخاص بالحفر لانه سوف يترتب عليه الحفر الكامل على كافة الحدود
سواء حفر رفيع سميك متوسط
وكما هوه موضح يتم وضع الكود المعلن اعلاه فىكافة الاجزاء المشار لها الأن بالصور

هذه الصورة التالية يترتب عليها حفر وخواص كاملة للخلفية والحدود لكافة الإستايل



الصور التالية سوف توضح الاماكن التى سوف يتم ظهور الحدود عليها بالشكل المطلوب



الصورة التاليى نهاية الجدول وتظهر غالباً فى الجزء المختص باللغه وتغير الإستايل مهم جداً فى الشكل الجمالى


الأن الحدود سوف تكون عامة بين اللون المتناوب الأول والثانى alt1+alt2



الجزء التالى خاص بالأزرار فى الإستايل ويعطى حدود طيبة وتنثيق حلو للأزرار الداخلية وليست المصممة


محيط اللوحة مختص فى الغالب لصندوق أدوات الموضوع


هنا يتم وضع كود الحفر بعد القيمة الموضوعه داخلة بدون تغير وتوضح الصورة

التحكم بالقوائم التى تنسدل من الناف بار ألخ إن تواجدد بالتيبل المطلوب للحفر

براعى وضع كود الحفر بعد القيم المتواجدة فى الأصل وعدم إزالتها

براعى وضع كود الحفر بعد القيم المتواجدة فى الأصل وعدم إزالتها

براعى وضع كود الحفر بعد القيم المتواجدة فى الأصل وعدم إزالتها


إنتهينا بحمد الله من توزيع الكود على كافة أرجاء الأجزاء التى تحتاج إلى حفر وظهور بشكل طيب
للمشاهدة للتطبيق على كافة المتصفحات
هنــــــــــــــــــــ ترقية وتطوير ـــــــــــــــــــــــــ ـــا
أو
هنـــــــــــــــــــ توزيع وتركيب ــــــــــــــــــا


الأن أنتهينا من التعريف بالحفر العريض ولاكن الدرس لم ينتهى
لن فى الغالب لا يتوافق الحفر العريض مع أزواق المستخدم العربى
فيكونت عرض الحدود التحكم بها عن طريق الكود

كود PHP:

 4" border="1 


بتغير القيم 4 إلى 3 إلى 2 إلى ازلة الكود كامل ووضع الإفتراضى
1
فإن أزلنا كود العرض من متغيارت الإستايل يتم أخز الكود وإظهارة بالشكل التالى


ونتحكم هنا فى الظهور بتقليل او إذادة القيم

القيمة التالية تظهر كما بالصورة العلوية

كود PHP:

border-left: 2px solid #F1DBC2;
border-right: 2px solid #DBB694;
border-bottom: 2px solid #DBB694;
border-top: 2px solid #F1DBC2; 


إلى

كود PHP:

border-left: 1px solid #F1DBC2;
border-right: 1px solid #DBB694;
border-bottom: 1px solid #DBB694;
border-top: 1px solid #F1DBC2; 


وهذه القيمة تظهر كما موضح تالى

وبهاكذا تم بحمد الله توافق كود حفر الجدول على كافة المتصفحات بدون اى مشاكل + التوافق التام بإذن الله مع كافة المقايس العالمية
ولا ننسا التوافق مع شكل الإستايل

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

الدرس مشروح على متصفح Firefox
وأى سؤال بإذن الله أخوكم حاضر له بالتوفيق والخير نلتقى

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

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

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha




رابط الدرس الأصلى

شكر خاص أخى الحبيب أبو راشد لتقديم والتعلم منه

شيء جميل أن ارى أن ستايلات المودة بدأت تؤتي ثمارها والهدف من توزيعها وذلك من خلال الإستخدام أو التعليم أيضا ... وأتمنى أن تقوموا أيضا بتحليل طريقة عمل الإطار الخارجي في ستايلات المودة ونشره كشرح فهو مفيد جدا للسرعة في التصفح خاصة في المواضيع ... شـكــ وبارك الله فيك ـــرا ... تحياتي .

المشاركة الأصلية كتبت بواسطة ابو راشد

شيء جميل أن ارى أن ستايلات المودة بدأت تؤتي ثمارها والهدف من توزيعها وذلك من خلال الإستخدام أو التعليم أيضا ... وأتمنى أن تقوموا أيضا بتحليل طريقة عمل الإطار الخارجي في ستايلات المودة ونشره كشرح فهو مفيد جدا للسرعة في التصفح خاصة في المواضيع ... شـكــ وبارك الله فيك ـــرا ... تحياتي .

شرفنى ردك أخى الحبيب وأول مره ألاحظ ردك الطويل مع تعودنا على ردود مختصرة منك
المهم طريقة فى توزيع الإستايل بسيطة جداً وهيه إستدعاء الصور من داخل مصارات الإستايل والإستغناء عن أمتداد الصورة
توضيح لمن مر ولم يفهم

كود PHP:

$stylevar[imgdir_misc] 


تستخدم هذا الكود لأخز الصور من المجلد المحدد الذى تحددة انت داخل مجلد الmisc للإستايل
وانت طرحت هاك جميل جدا ورغم روعته بقيت على الهاك القديم لعدم أخزك بالإعتبار مسار الصورة المهم لا نخرج عن الموضوع


فأنت تقدم أستايل بالفعل رائع أقل ما يقال عنه
ولاكن لا تأخز فى أعتباراك تباعد الجداول والخلايا وتكتفى فقط بإذالة أبعاد الصور وأعطاء الخلية الوسطى 100% وهذا يسبب خطأ أحب أن أنوه عنه
فى حين وضع صور كبيرة فالإستايل يقوم بالإنقسام كامل صورة توضح ما أقوله
ولاكن طبعا بإستخدام هاك الصور يتم تلافى الأمر


ولاكن لا ينقص من روعة العمل أى شئ
وكم أتمنى ان تعيد النظر فى هاك الإجصايات وتجعله يأخز الصور من مجلد الإستايل وليس من مجلد صور المنتدى الرئيسية

دمت بكل خير أخى الحبيب