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

[Losha.Net]

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


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

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

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



بسم الله نبدأ

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


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

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


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

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

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

4" border="1 

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


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

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

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



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


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


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

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

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

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

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


نلتقى بعد الفاصل

[Losha.Net]

عودنا لكم مع الجزء النهائى

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


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

 4" border="1 

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


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

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

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

إلى

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

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

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

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

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

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

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

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




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

[ahmed-samara]

الله يجزيك كل الخير اخي الفاضل وشرح اكثر من رائع

تم التثبيت للفائدة

[NLP]

الله عليك يا لووووشا ..
ابدعــــــــــــــــت

[Losha.Net]

الله يجزيك كل الخير اخي الفاضل وشرح اكثر من رائع

تم التثبيت للفائدة

أخى الحبيب وأستاذى الفاضل
والله ما عارف إيه أقول شكرا على كرمك وطيب خلقك العالى
وعلى تثبيت الموضوع

الله عليك يا لووووشا ..
ابدعــــــــــــــــت

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

نورتم الموضوع

[حازم علي]

ألف مبروووك درسك الجديد يا لوشا

فعلاً كتير من مصممين الاستايلات كانوا محتاجين درس زي ده

جزاك الله خيراً

[الشبح الاسود]

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


مشكوووووووور اخوي لوشا ننتظر جديدك

في امان الله

[x_yousef_x]

الله يجزاك يالوشا الجنه على مقدمته للاخوانك من معلومات مفيده

وان شاء الله يسهل عليهم باقي

تحياتي

[ديجيتال]

مبدع والله كما عهدناك

تقبل تحياتي

إستفدت ببعض الأكواد بمنتداي

http://www.slalah.com/main.html

[Peter Eden]

شرح ولا اروع
بارك الله فيك اخوى losha

تقبل تحياتى ...

[ksatec.com.sa]

مبدع ومافيك حيله

[luvkazem]

والله انك رائع

[أبو راشد]

أحسنت شكرا لك وبارك الله فيك على الشرح الجميل والواضح ... أبدعت .

لغز صغير :

الروابط التالية لنفس الموضوع في عدة منتديات ... أحدها يختلف لماذا ؟ وما هو الإختلاف ؟ لغز للجميع :

http://www.mwadah.com/showthread.php?t=34738

http://www.swalif.net/softs/swalif43/softs199248/

http://www.losha.net/vb/showthread.php?t=10985

http://www.traidnt.net/vb/showthread.php?t=456485

تحياتي .

[Losha.Net]

شكرا لكل من مر بالموضوع

أحسنت شكرا لك وبارك الله فيك على الشرح الجميل والواضح ... أبدعت .

لغز صغير :

الروابط التالية لنفس الموضوع في عدة منتديات ... أحدها يختلف لماذا ؟ وما هو الإختلاف ؟ لغز للجميع :



تحياتي .

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

فشرفا لى أن تكون اخا غاليا ومعلماً فاضلاً
أنا حليت اللغز
وين الجائزة :anger1:

[أبو راشد]

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

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

أتمنى أن تكون الصورة قد وضحت لك أكثر فهذه ليست المرة الأولى وهذا ما سبب لي الإستغراب عن الهدف من وراء هذه الملحوظة !!

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

لك وللجميع مني أجمل تحية .