مشكل في التنسيق بين المكونات (component) باستعمال الcss

وجدت الحل.

السبب هو position:absolute للصورة.

و الحل هو في تحديد طول و عرض لعنصر يحتوي كامل الصور.

/* الحل في إضافة هذا العنصر */
/* ----------------------- */
.slider-container {
    background-color: var(--color-2); 
    width: 100vw;
    height: 90vh;
    padding: 15px auto;
}
/* ----------------------- */
.slider {
    position: relative;
}
.slide {
    width: 100vw;
    height: 80vh;
    position: absolute;
}

لكي تصل إلي هذا الشكل قم بالتالي.

نضع للصنف main.

/* حيي يتم وضع المكونات في صف واحد كما في الصورة */
.main {
  display: flex;
  flex-direction: row;
}

وبالنسبة للمكون الثاني نفترض أن لديه صنف باسم NavigateButtons.

/* حتي يتم وضع حميع الازرار في صف واحد بشكل عمودي*/
.NavigateButtons{
  display: flex;
  flex-direction: column;
}

  بتاريخ On 5‏/2‏/2023 at 13:29 قال Mohammed Fahmy:

.main {
  display: flex;
  flex-direction: row;
}

أظهر المزيد  

أنا لا أريد أن يظهر المكونين على سطر واحد.

وحتى عندما ب

.main {
  display: flex;
  flex-direction: column;
}

تلخبطت الأمور و لم تظهر بالشكل الذي أريده

  اقتباس

أنا لا أريد أن يظهر المكونين على سطر واحد.

أظهر المزيد  

إذا ماذا تريد, هل يمكنك توضيح سؤالك أكثر.

يفضل أن تقوم بأرفاق الكود حتي أستطيع مساعدتك بشكل أفضل.

  اقتباس

تلخبطت الأمور و لم تظهر بالشكل الذي أريده

أظهر المزيد  

وماذا تقصد بتلخبطت الأمور.

  بتاريخ On 5‏/2‏/2023 at 13:37 قال Mohammed Fahmy:

إذا ماذا تريد, هل يمكنك توضيح سؤالك أكثر.

يفضل أن تقوم بأرفاق الكود حتي أستطيع مساعدتك بشكل أفضل.

وماذا تقصد بتلخبطت الأمور.

أظهر المزيد  

في الحالات العادية يظهر المكون الأول ثم المكون الثاني  (نفس العمود) (وهذا ما أريده)

في هذ ا الكود

.main {
    display: flex;
    flex-direction: column;
}

<div className='main'>
      <Slider/>
      <NavigateButtons/>
</div>

هذه هي النتيجة

  بتاريخ On 5‏/2‏/2023 at 13:43 قال محمود سعداوي:

في الحالات العادية يظهر المكون الأول ثم المكون الثاني  (نفس العمود) (وهذا ما أريده)

في هذ ا الكود

.main {
    display: flex;
    flex-direction: column;
}

<div className='main'>
      <Slider/>
      <NavigateButtons/>
</div>

هذه هي النتيجة

أظهر المزيد  

سبب وجود NavigateButtons خلف slider غالبا بسبب الخاصية z-index, جرب أن تقوم بوضع قيمة أكبر للNavigateButtons هكذا.

.NavigateButtons {
	z-index: 99;
}

وجرب أن تقوم بوضع margin لل NavigateButtons حتي يبتعد عن الslider هكذا.

.NavigateButtons {
	margin-bottom: 20px;
}

ويفضل أن تشارك ملف style حتي استطيع مشاعدتك بشكل أفضل

  بتاريخ On 5‏/2‏/2023 at 13:52 قال Mohammed Fahmy:

سبب وجود NavigateButtons خلف slider غالبا بسبب الخاصية z-index, جرب أن تقوم بوضع قيمة أكبر للNavigateButtons هكذا.

.NavigateButtons {
	z-index: 99;
}

أظهر المزيد  

أنا لا أريد أن تـكون NavigateButtons في أعلى الصفحة

  بتاريخ On 5‏/2‏/2023 at 13:52 قال Mohammed Fahmy:

وجرب أن تقوم بوضع margin لل NavigateButtons حتي يبتعد عن الslider هكذا.

.NavigateButtons {
	margin-bottom: 20px;
}

أظهر المزيد  

لم يتغير شيء

  بتاريخ On 5‏/2‏/2023 at 13:52 قال Mohammed Fahmy:

أظهر المزيد  

تفضل ملفات الsrcsrc.zip

شكرا.

src.zipFetching info...

أعتذر عن وجود الكثير من الصور في غير موضعها.

لم أفهم كيف حدث ذلك

يبو أن المشكلة كانت في ترتيب المكونات components غير الترتيب بجعل المكون NavigateButtons فوق المكون slider هكذا.

وهذه النتيجة.

الحل الذي ارسلته لك وظيفته هي اظهار قائمة الازرار أن لم يعمل معك أخبرني.