حجم الجسم / ما الكود المطلوب؟

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

ما هي الأكواد التي يجب أن أضيفها لجعل الجزء العلوي يبدو تمامًا مثل الجزء السفلي؟

مثل: top-height-size: -30٪؟ لكن هذا لا يعمل

body:before {
  display: inline-block;
  border-radius: 15px;
  width: 1125px;
  min-height: 100%;
  height: inherit;
  background-color: #fff;
  content: " ";
  position: fixed;
  left: 50%;
  right: 0;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

أنا آسف، ولكن لا يبدو واضحًا ما تحتاج إلى القيام به. هل يمكنك إضافة المزيد من التفاصيل حول:

  1. ما هو الجزء المحدد من الصفحة الذي تحاول تغييره.
  2. ما هو التغيير الذي تحاول إجراؤه.


الجزء العلوي، أريد أن أفعله هكذا
https://pvpfarm.com
أريد إضافة نصف قطر للحافة مثل الجزء السفلي (تحت)
كل ما أريده هو وجود بعض المساحة في الأعلى بينه وبين الرأس.

لغتي الإنجليزية سيئة، آسف. شكراً للمساعدة

لا بأس، لغتك الإنجليزية جيدة، ولكن قد يكون الحديث عن الأكواد صعبًا! شكرًا لك على إضافة المزيد من التفاصيل. أعتقد أن المشكلة منطقية.

في بعض الأحيان يمكنك استخدام margin-top لإضافة المزيد من المساحة أعلاه.

ولكنه لا يعمل عند التمرير!

هذا لأنه يوجد position: fixed في جزء body:before، لذلك سيبقى دائمًا في نفس المكان على الشاشة. دعنا نغيره إلى position: absolute بدلاً من ذلك. يسمح لنا “Absolute” بتحديد المسافة التي نريدها من الجوانب. نحتاج إلى إخباره باستخدام body للجوانب، لذلك نحتاج إلى إضافة هذا الكود:

body {
  position: relative;
}

(إذا كنت ترغب في معرفة المزيد عن position و fixed و absolute، فهذه هنا تدوينة تحتوي على أمثلة)

حسنًا، دعنا نحذف min-height: 100% من body:before، لأننا نريد أن يكون أقصر من 100%. الآن يمكننا التحكم في مكان الأعلى والأسفل! دعنا نضيف top: 70px و bottom: 30px. (يجب أن يكون الجزء العلوي كبيرًا بما يكفي لتجاوز الرأس من أعلى الشاشة).

هل هذا يبدو كما أردت؟ أخبرني إذا كان الأمر منطقيًا. :slight_smile:

4 إعجابات

أنت مذهل!
شكراً لتعليمي بدلاً من إعطائي أكواد جاهزة. :heart:
@bryce

3 إعجابات

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.