اذهب إلى المحتوى
  • 0

مساعدة للتخلص من حشوة زائدة في الصفحة

عبد الواحد الحدادي

السؤال

السـلام عليكم ورحمة الله وبركاته، إخواني وأساتذتي أتمنى أن تكونوا بخير وفي تمام الصحة والعافية ..

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

أريد منكم ـ إذا تكرمتم ـ أن تطلعوا على هذه الصفحة ـ اضغط هنا لعرض الصفحة على github - وتعطوني تقييم لها وملاحظات عليها وبارك الله فيكم .

الصفحة تم ضبط مقاساتها على مختلف الأجهزة والشاشات بالاعتماد على MediaQuery .

  • المشكلة الذي أعاني منها في هذه الصفحة هي الحشوة الزائدة على اليسار ( الصورة مرفقة توضح الأمر ) - أرجو ذكر سبب تلك الشحوة الزائدة وكيف أتخلص منها ؟ 
  • مرفق Source Code للصفحة حتى تعطوني هل الأكواد مكتوبة بطريقة منظمة أم لا .

في انتظاركم وشكراً جزيلاً لكم 

Front-end.zip

حشوة زائدة.PNG

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

تقدم جميل و ملحوظ، أتمنى لك التوفيق فيما هو قادم.

بالفعل كما ذكر زملائي، المشكلة متعلقة بrow class.

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

  • لديك تكرار في وضع الـ inline style في ملف html، هذا غير مرغوب به كثيرا طالما يوجد لديك ملف خاص بالـ css، حاول قدر الإمكان أن لا يتواجد في صفحة html أي inline style.
  • يوجد أيضًا تكرار لوضع الستايل الخاص بكل div رغم أنهم مشتركين في نفس الستايل، أنصحك بإستخدام كلاس يجمع تلك الإعدادت المكررة و فقط إستخدم الكلاس في المكان المراد والإبتعاد عن التكرار.
  • في ملف الـ html حين تضع الصورة، لا تهمل وصف الصورة (alt).

أتمنى لك كل التوفيق.

 

01.png

الوصف.png

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

  • 0

مرحبًا عبد الواحد.

أحسنت العمل. مشروع أكثر من رائع. استمر في الممارسة و التمرين و سيتحسن مستواك بشكل أكبر في المسقبل.

بتاريخ 9 ساعات قال عبد الواحد الحدادي:

المشكلة الذي أعاني منها في هذه الصفحة هي الحشوة الزائدة على اليسار ( الصورة مرفقة توضح الأمر ) - أرجو ذكر سبب تلك الشحوة الزائدة وكيف أتخلص منها ؟ 

يمكنك إضافة التنسيق التالي لحل هذه المشكلة:

html {
  overflow-x: hidden;
}

لأن هذه المسهحة البيضاء الزائدة تظهر نتيجة scroll لليسار

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

أولاً التصميم جميل والأيقون وإختيار الأيقون وطريقة عرضها جميلة .

ولكن يوجد بعض الملاحظات :

حل هذه المشكلة هو التعديل على class الخاص بالبوتستراب row هكذا :

html {
  overflow-x: hidden;
}

ثم سوف يظهر معاك مشكلة اخرى وهى تداخل النصوص :

4.PNG.82bbceaa0580dce113211a39876b1c64.PNG

حل هذه المشكلة هو التعديل على كلاس row بالبوتستراب

.row{
	margin-right: 0px;
  	margin-left: 0px
}

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

بالنسبة للكود:

  1. أهتم بكتابة comments عند بداية السيشكن ونهايته كمثل هنا.
  2. لا تستخدم container ملم بالصفحة جميعها ولكن إستخدم كل سيكشن بمفرده .
  3. يجب أن لا تضع في الصفحة أكواد زائدة ليس لها أي قيمة ووضعها في كومنت ولكن احذفها نهائياً .
  • أنا أرفقت الملف حل المشاكل أولاً ثم أعطي نظرة على الملف المرفق محلول به جميع المشاكل .

build.rar

تم التعديل في بواسطة Walid Mohamed2
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...