• 0

كيفية عمل Cards تشبه طريقة عرض مجتمعات حسوب؟

بسم الله الرحمن الرحيم
شاهدتُ مجتمعات حسوب وطريقة العرض الموجودة الخاصة بها بأسلوب متجاوب responsive وأرغب في تعلّم تلك الطريقة الموزعة،هل يوجد framework جاهز أم لا، لأنه حتى ال bootstrap لا يستطيع التوزيع بتلك الطريقة.

وشكرًا لكم

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يمكنك عمل Cards تشبه طريقة عرض مجتمعات حسوب عن طريق CSS بدون استعمال أي framework (عن طريق media query لجعل التصميم متجاوب ...) ، ولكن عملها عن طريق bootstrap سيكون أسهل بكثير حيث يكفي أن تقوم ببعض التعديلات عن طريق ملف CSS آخر وسيظهر التصميم كما تريد.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On 6/18/2016 at 03:22 قال hassenzouari98:

يمكنك عمل Cards تشبه طريقة عرض مجتمعات حسوب عن طريق CSS بدون استعمال اي framework (عن طريق media query لجعل التصميم متجاوب ...) ، ولكن عملها عن طريق bootstrap سيكون اسهل بكثير حيث يكفي ان تقوم ببعض التعديلات عن طريق ملف CSS اخر وسيظهر التصميم كما تريد ... 

قمت بتطبيق ما ذكرته، لكني لا أعرف طريقة عمل التوزيع العشوائي والـ bootstrap  ليقوم بتوزيع المربعات بطريقة ومسافات مُعينة. 
أحيانًا إذا جاء أحد الـ card أطول من غيره سوف يكون فراغات كثيرة بدون فائدة. 

عكس مجتمعات حسوب كل مجتمع يتواجد أسفل المجتمع الآخر بمسافة معينة مهما اختلف وصف المجتمع عن غيره.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On 6/18/2016 at 04:44 قال Hasan Hatem:

فهمان عليك وعملت نفس الشي 
بس الترتيب التي تظهر به فوق بعضها بمسافات محددة 
وتوزيع عشوائي لا اعرف طريقة عمل التوزيع العشوائي وال bootstrap 

يقوم بتوزيع بطريقة ومسافات معيينة 
احيانا اذا جاء أحد ال card اطول من غيرها سوف يكون فراغات كثيرة بدون فائدة 

عكس مجتمعات حسوب كل مجتمع يتواجد اسفل المجتمع الآخر بمسافة معينة مهما اختلف وصف المجتمع عن غيره

 
 

باختصار أخي يمكنك عمل صفحة مثل هذه بالاعتماد على خاصية box-sizing المتوفرة منذ css3 أو عن طريق خاصية float (أصعب قليلا).

أما بالنسبة للتوزيع العشوائي فهي تتم عن طريق لغة البرمجة عن طريق خاصية random عن جلب محتوى من قاعدة البيانات.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On 6/18/2016 at 05:22 قال hassenzouari98:

باختصار اخي يمكنك عمل صفحة مثل هذه بالاعتماد على خاصية box-sizing المتوفرة منذ css3 او عن طريق خاصية float (أصعب قليلا)

اما بالنسبة للتوزيع العشوائي فهي تتم عن طريق لغة البرمجة عن طريق خاصية random عن جلب محتوى من قاعدة البيانات.

لا أقصد الجلب من قاعدة البيانات

لكن الـ border-box لا تفي بالغرض.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On 6/18/2016 at 05:54 قال Hasan Hatem:

لا اقصد الجلب من قاعدة البيانات

لكن ال border-box لا تفي بالغرض

 

خاصية الـ box-sizing تفي بالغرض أو عن عن طريق جعلهم span ومن ثم اعطائهم خاصية display :inline-block; ومن عمل float وستظهر تقريبا كما هي في hsoub io  
الكود تقريبا : http://codepen.io/hassenzouari98/pen/KMggza

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 22 ساعات قال hassenzouari98:

 

اخي كما قلت لك سابقا خاصية ال box-sizing تفي بالغرض او عن عن طريق جعلهم span ومن ثم اعطائهم خاصية display :inline-block; ومن عمل float وستظهر تقريبا كما هي في hsoub io  
الكود تقريبا : http://codepen.io/hassenzouari98/pen/KMggza

مشكور جدا أخي 
لكن توجد مشكلة بسيطة .
عند تصغير الشاشة الي الأخير يعني عند فتح الموقع بحجم بالأيفون أو أي موبايل آخر ،تظهر 2 Cards بجانب بعض 

أريد أن تظهر كل card فوق بعضا وليس اثنان اثنان فوق بعض.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

انا في الخدمة في اي وقت اخي :) 

بتاريخ 37 دقائق مضت قال Hasan Hatem:

اريد أن تظهر كل card فوق بعضا وليس اثنان اثنان فوق بعض

تم تعديله ليظهر كما تريد

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ 16 ساعات قال hassenzouari98:

انا في الخدمة في اي وقت اخي :) 

تم تعديله ليظهر كما تريد

أنت فنان ومبدع شكرا لك يا غالي
صراحة أنا كتير متعمق بالبرمجة أكثر من التصميم.

لكن لفتت نظري الي اشياء جديدة سوف اقوم بالتعلم لها من جديد وشكرا لك مرة أخرى.
هل لي بالكورس الذي قمت بمتابعته ؟
لمعرفة هذه الخصائص ؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

العفو هذا واجبي أخي

كذلك أنا مثلك في البداية تعمقة في البرمجة كثيرًا ظنا مني أنه لافائدة من التصميم (أي أنه أمر ثانوي) ولكني مع مرور الزمن اكتشفت اني مخطأ وأن التصميم من الأمور الأساسية والمهمة جدًا ، وكنصيحة اخرى ابدا بتعلم الأساسيات ولاتتعجل في استعمال أطر العمل.
اما عن الكورس فأنصحك بأن تتابع الدروس التي تُنشر هنا في أكاديمية حسوب، مثل سلسلة دروس المبتدأين 101 والتي تُنشر تباعًا، كذلك دروس css، و دروس html.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0
بتاريخ On ١٩‏/٦‏/٢٠١٦ at 04:17 قال hassenzouari98:

العفو هذا واجبي أخي

كذلك أنا مثلك في البداية تعمقة في البرمجة كثيرًا ظنا مني أنه لافائدة من التصميم (أي أنه أمر ثانوي) ولكني مع مرور الزمن اكتشفت اني مخطأ وأن التصميم من الأمور الأساسية والمهمة جدًا ، وكنصيحة اخرى ابدا بتعلم الأساسيات ولاتتعجل في استعمال أطر العمل.
اما عن الكورس فأنصحك بأن تتابع الدروس التي تُنشر هنا في أكاديمية حسوب، مثل سلسلة دروس المبتدأين 101 والتي تُنشر تباعًا، كذلك دروس css، و دروس html.

مسا الخير أخي 
انا مرة طلبت منك تصميم Cards 
إن التصميم يعمل على ال Google Chrome بشكل ممتاز
لكن على ال Mozilla لا يعمل تظهر ال Cards فوق بعضها البعض

لم أعرف الحل أخي ... هل لي بمساعدة .؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

تم إختصار المشكلة عرفت وين الغلط:

المشكلة هيي بالدالة : column-fill لا تعمل إلا على mozilla ,ويوجد خطأ فيها

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن