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

مشكلة في تنسيق التذييل footer ضمن صفحة ويب باستخدام CSS

محمد فهد خالد

السؤال

صورة الفوتر طلعت كبيرة كثير وكمان مش على اسفل الصفحة وحجمها بتغيرش ومش راضية تنزل شو المشكلة؟

تعليق توضيحي 2022-02-21 020410.png

تعليق توضيحي 2022-02-21 020443.png

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

Recommended Posts

  • 1

يرجى تعديل السؤال وإرفاق التنسيق بشكل نصي وليس كصورة.

حاول تحديد الارتفاع الأقصى للتذييل footer باستخدام الخاصية max-height وتعيينها لقيمة تناسب الحجم الذي تريده، مع إضافة الخاصية overflow بالقيمة hidden لإخفاء القسم الزائد من الصورة كالتالي:

.footer {
  ...
  max-height: 500px;
  overflow: hidden;
}

 

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

  • 1
بتاريخ 4 دقائق مضت قال محمد فهد خالد:

شكرًا لك كيف يمكن أيضًا تنسيق العرض للتذييل


.footer {
  background-image: url("../images/footer.png");

  background-size:80% ;

  max-height: 600px;

  overflow: hidden;
}

 

يمكنك أيضًا تعيين العرض الأقصى للتذييل بأن لا يتجاوز عرض الشاشة باستخدام التالي

.footer {
  ...
  max-width: 100vw;
}

 

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

  • 0
بتاريخ 5 دقائق مضت قال Hassan Hedr:

يمكنك أيضًا تعيين العرض الأقصى للتذييل بأن لا يتجاوز عرض الشاشة باستخدام التالي


.footer {
  ...
  max-width: 100vw;
}

 

مزبطتش ال max-width 
مفيش طريقة اقدر اتحكم بحجم الصورة نفسها عشان اقدر اخليها زي الصورة الي في الموقع الي فوق؟
اصغرها شوي

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

  • 0
بتاريخ 1 دقيقة مضت قال محمد فهد خالد:

مزبطتش ال max-width 
مفيش طريقة اقدر اتحكم بحجم الصورة نفسها عشان اقدر اخليها زي الصورة الي في الموقع الي فوق؟
اصغرها شوي

حاول إذا تعيين عرض محدد للصورة بما يتناسب مع الشكل الذي تريده مثلا width: 110% كالتالي 

footer img {
  width: 110%
}

 

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

  • 0
بتاريخ 8 دقائق مضت قال Hassan Hedr:

حاول إذا تعيين عرض محدد للصورة بما يتناسب مع الشكل الذي تريده مثلا width: 110% كالتالي 


footer img {
  width: 110%
}

 

للاسف مزبطش

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

  • 0
بتاريخ 1 ساعة قال محمد فهد خالد:

للاسف مزبطش

هل حاولت تغيير قيمة object-fit إلى cover أيضًا حتى يتم تغيير قياس الصورة كالتالي

footer img {
  ...
  object-fit: cover;
}

 

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

  • 0
بتاريخ 12 ساعات قال Hassan Hedr:

هل حاولت تغيير قيمة object-fit إلى cover أيضًا حتى يتم تغيير قياس الصورة كالتالي


footer img {
  ...
  object-fit: cover;
}

 

غيرت ال width من ال html وال max-width من الcss وصغر حجم الصورة 

لكن بدها ازاحة شوي على اليسار بس مبتتحركش ب padding ولا position وال footer imge مبتاثرش عندي مهما ضفت عليها او حتى حذفته الفوتر مبيتغيرش

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

  • 0
بتاريخ 14 ساعات قال محمد فهد خالد:

غيرت ال width من ال html وال max-width من الcss وصغر حجم الصورة 

لكن بدها ازاحة شوي على اليسار بس مبتتحركش ب padding ولا position وال footer imge مبتاثرش عندي مهما ضفت عليها او حتى حذفته الفوتر مبيتغيرش

يجب إرفاق قسم HTML و CSS المتعلق بالتذييل Footer حتى نتمكن من مساعدتك

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...