كيف أضع حدود للصفحة الرئيسية من خلال تنسيقات css

السؤال غير واضح بعض الشيء، هل يمكنك توضيح ما هي العناصر التي تختفي ولا تستطيع الوصول إليها؟

إن كانت المشكلة تظهر فقط عند تشغيل أدوات المطورين Dev Tools في المتصفح، فحاول أن تقوم بفتح أدوات المطورين في نافذة جديدة:

بهذه الطريقة سوف تظهر أدوات المطورين في نافذة منفصلة لتستطيع رؤية الموقع بشكل كامل في نافذة المتصفح الأساسية.

بتاريخ 4 ساعات قال سامح أشرف:

السؤال غير واضح بعض الشيء، هل يمكنك توضيح ما هي العناصر التي تختفي ولا تستطيع الوصول إليها؟

إن كانت المشكلة تظهر فقط عند تشغيل أدوات المطورين Dev Tools في المتصفح، فحاول أن تقوم بفتح أدوات المطورين في نافذة جديدة:

بهذه الطريقة سوف تظهر أدوات المطورين في نافذة منفصلة لتستطيع رؤية الموقع بشكل كامل في نافذة المتصفح الأساسية.

حسنا 

وكيف أتحكم في حدود الصفحة الرئيسية من خلال css 

وضعت تنسيقات   لل body وهي witdh:900px و position:fixed لكن ألاحظ أن العناصر التي داخل body  مثل الملاحظات تخرج عن إطار 900px مالسبب في ذلك ؟ 

بتاريخ On 5/13/2022 at 10:16 قال Mohamed Lamin Mahmoudi:

حسنا 

وكيف أتحكم في حدود الصفحة الرئيسية من خلال css 

وضعت تنسيقات   لل body وهي witdh:900px و position:fixed لكن ألاحظ أن العناصر التي داخل body  مثل الملاحظات تخرج عن إطار 900px مالسبب في ذلك ؟ 

في البداية لا يُفضل تحديد عرض جسم الصفحة body من خلال width، والأفضل هو أن تقوم بتحديد حجم العنصر الرئيسي (العنصر app. في مشروعك) بالشكل التالي:

.App {
  /* ... */
    width: 900px;
    overflow: hidden;
}

كما أن أي عنصر له الخاصية position:fixed تُستخدم لتثبيت عنصر ما على الشاشة، ولا يمكن التحكم في مكان العنصر إلا من خلال الخصائص top, bottom, right, left (مازال يمكن إستخدام الإزاحة margin والحاشية padding بدون مشكلة) ولن يتأثر بأي عنصر آخر في الصفحة، ولاحظ أن عنصر الملاحظات notes-section له الخاصية position: fixed وبالتالي لن يتم التحكم بها عبر تحديد عرض لجسم الصفحة body، الأمر الآخر هو أن تحديد عرض لجسم الصفحة لا يعني بالضرورة إخفاء أي عناصر تخرج عن هذا العرض، ويجب أن تستخدم الخاصية overflow لكي يتم إخفاء (أو إضافة شريط تمرير) أي عناصر موقعها خارج 900px.

أنصحك أن تُعيد ترتيب العناصر بطريقة أخرى مثل flexbox أو grid system بدلًا من إستخدام position لأنها غير مخصص في الاساس لهذا الأمر.