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

معالجة مشكلة الارتفاع height في css3

محمود سعداوي2

بواسطة محمود سعداوي2

 مشاركة

السؤال

محمود سعداوي2 عضو نشيط

محمود سعداوي2

نشر
نشر (معدل)

السلام عليكم و عيد مبارك.

لماذا  الصفحة في console غير مطابقة للصفحة على شاشة الحاسوب.

الصفحة الأصلية

Capture2.thumb.JPG.8b412af13fd35ea0348e383879202e7f.JPG

الصفحة عند إستعمال console

Capture1.thumb.JPG.bcb6dbd901beb42d173223b244262c64.JPG

ملاحظة: الرجاء عدم التركيز في الصورة بذاتها لأنها تتغير كل 3 ثواني.

شكرا.

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

7 أجوبة على هذا السؤال

Recommended Posts

  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

نشر
نشر
بتاريخ 3 ساعات قال محمود سعداوي:

code html 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Foods</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>



    <!--section1 -->

    <div class="section-1">

        <h1 class="section-1-heading">

            Variety of Foods

        </h1>

        <div class="section-1-img">

            <img src="./img/img2.png" alt="" class="active">

            <img src="./img/img4.png" alt="">

            <img src="./img/img5.png" alt="">

            <img src="./img/img7.png" alt="">

            <img src="./img/img8.png" alt="">

            <img src="./img/img9.png" alt="">

        </div>

    </div>



   

    <script src="script.js"></script>

</body>

</html>

code css


  


@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&family=Oleo+Script+Swash+Caps:wght@400;700&display=swap');

/* font-family: 'Oleo Script Swash Caps', cursive; */

:root{

    --color1:#E5E3C9;

    --color2:#B4CFB0;

    --color3:#94B49F;

    --color4:#789395;

}



*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



.section-1{

    background-color: var(--color3);

    color: #fff;

    font-family: 'Oleo Script Swash Caps', cursive;

    height: 100vh;

    position: relative;

    width: 100%;

}

.section-1-heading{

    font-weight: bold;

    font-size: 50px;

    text-align: center;

    padding-top: 90px;

}



.section-1-img {

    width: 100%;

    margin-left: 40%;

    margin-top: 10%;

}



.section-1-img img{

    width: 300px;

    height: 180px;

    position: absolute;

    opacity: 0;

    transition: opacity 1s;

}



.section-1-img img.active{

    opacity: 1;

}



@media (max-width: 320px){

    .section-1-heading {

        font-size: 40px;

    }

    .section-1-img {

        margin-left: 20%;

        margin-top: 40%;

    }

    .section-1-img img {

        width: 200px;

        height: 100px;

    }

}



@media (min-width: 321px) and (max-width: 425px){

    .section-1-heading {

        font-size: 45px;

    }

    .section-1-img {

        margin-left: 20%;

        margin-top: 30%;

    }

    .section-1-img img {

        width: 250px;

        height: 130px;

    }

}

@media (min-width: 426px) and (max-width: 768px){

    .section-1-img {

        margin-left: 30%;

    }

}

code javascript 


let slideImg = Array.from(document.querySelectorAll('.section-1-img img'))

let counter  = 0

let timer    = 3000



setInterval(()=>{



    // function that gives the next image (with the class "active")

    if(counter < slideImg.length -1){

       

        counter ++

        slideImg[counter].classList.add("active")

        slideImg[counter-1].classList.remove("active")

    } else{

        counter = 0

        slideImg[counter].classList.add("active")

        slideImg[slideImg.length -1].classList.remove("active")

    }



},timer)

 

السبب لديك هو وجود قيمة كبيرة للحاشية العلوية margin-top للصنف section-1-img، حيث أن الحاوية الخلفية التي تملئ الشاشة يمكن أن تصبح أصغر من الحاشية المحددة مما يسبب مشكلة ظهور الخلفية البيضاء، يمكنك حل المشكلة إما بتحديد قيمة أصغر للحاشية مثلًا كالتالي: 

.section-1-img {
    ...
    margin-top: 40px;
}

أو بإخفاء العناصر التي تخرج عن مساحة الحاوية section-1 وذلك بإضافة الخاصية overflow كالتالي 

.section-1 {
  ...
  overflow: hidden;
}

 

  • أعجبني 1
رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
محمود سعداوي2 عضو نشيط

محمود سعداوي2

نشر
  • الكاتب
نشر
بتاريخ 3 دقائق مضت قال Hassan Hedr:

السبب أنك في وضع محاكاة للأجهزة بقياسات متعددة، يمكنك الخروج من ذلك الوضع عبر الضغط على زر Toggle device toolbar على يسار أعلى لوحة المطور

fHuJO.png

نفس المشكل.

Capture3.thumb.JPG.408ce1a925ae02dbb5e53fb828070686.JPG

مثلما تلاحظون لم يعالج مشكل الخلفية

رابط هذا التعليق
شارك على الشبكات الإجتماعية
  • 0
Hassan Hedr عضو نشيط

Hassan Hedr

نشر
نشر
بتاريخ الآن قال محمود سعداوي:

نفس المشكل.

Capture3.thumb.JPG.408ce1a925ae02dbb5e53fb828070686.JPG

مثلما تلاحظون لم يعالج مشكل الخلفية

على ما يبدو أن تنسيق الخلفية لديك أو الصورة متعلق بارتفاع نافذة المتصفح وهو السبب في حدوث تلك المشكلة، يرجة إرفاق شيفرة HTML و CSS ضمن نص السؤال وتنسيقها بتنسيق Code حتى تتوضح المشكلة ونستطيع المساعدة

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

محمود سعداوي2

نشر
  • الكاتب
نشر (معدل)
بتاريخ 15 دقائق مضت قال Hassan Hedr:

على ما يبدو أن تنسيق الخلفية لديك أو الصورة متعلق بارتفاع نافذة المتصفح وهو السبب في حدوث تلك المشكلة، يرجة إرفاق شيفرة HTML و CSS ضمن نص السؤال وتنسيقها بتنسيق Code حتى تتوضح المشكلة ونستطيع المساعدة

شيفرة html

Capture4.JPG.c27ed8a5a50e803ea1af8b7520833bb1.JPG

css 

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



.section-1{

    background-color: var(--color3);

    color: #fff;

    font-family: 'Oleo Script Swash Caps', cursive;

    height: 100vh;

    position: relative;

    width: 100%;

}

.section-1-heading{

    font-weight: bold;

    font-size: 50px;

    text-align: center;

    padding-top: 90px;

}



.section-1-img {

    width: 100%;

    margin-left: 40%;

    margin-top: 10%;

}



.section-1-img img{

    width: 300px;

    height: 180px;

    position: absolute;

    opacity: 0;

    transition: opacity 1s;

}



.section-1-img img.active{

    opacity: 1;

}

 

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

Hassan Hedr

نشر
نشر
بتاريخ 20 دقائق مضت قال محمود سعداوي:

شيفرة html

css 


*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



.section-1{

    background-color: var(--color3);

    color: #fff;

    font-family: 'Oleo Script Swash Caps', cursive;

    height: 100vh;

    position: relative;

    width: 100%;

}

.section-1-heading{

    font-weight: bold;

    font-size: 50px;

    text-align: center;

    padding-top: 90px;

}



.section-1-img {

    width: 100%;

    margin-left: 40%;

    margin-top: 10%;

}



.section-1-img img{

    width: 300px;

    height: 180px;

    position: absolute;

    opacity: 0;

    transition: opacity 1s;

}



.section-1-img img.active{

    opacity: 1;

}

 

يرجى إرفاق شيفرة HTML كاملة بشكل نصي وإرفاق أي شيفرات أخرى غير مذكورة مثل جافاسكريبت أو CSS غير المذكورة حتى يكتمل المثال ونتمكن من تحديد المشكلة

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

محمود سعداوي2

نشر
  • الكاتب
نشر (معدل)
بتاريخ 4 ساعات قال Hassan Hedr:

يرجى إرفاق شيفرة HTML كاملة بشكل نصي وإرفاق أي شيفرات أخرى غير مذكورة مثل جافاسكريبت أو CSS غير المذكورة حتى يكتمل المثال ونتمكن من تحديد المشكلة

code html 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Foods</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>



    <!--section1 -->

    <div class="section-1">

        <h1 class="section-1-heading">

            Variety of Foods

        </h1>

        <div class="section-1-img">

            <img src="./img/img2.png" alt="" class="active">

            <img src="./img/img4.png" alt="">

            <img src="./img/img5.png" alt="">

            <img src="./img/img7.png" alt="">

            <img src="./img/img8.png" alt="">

            <img src="./img/img9.png" alt="">

        </div>

    </div>



   

    <script src="script.js"></script>

</body>

</html>

code css


  

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500&family=Oleo+Script+Swash+Caps:wght@400;700&display=swap');

/* font-family: 'Oleo Script Swash Caps', cursive; */

:root{

    --color1:#E5E3C9;

    --color2:#B4CFB0;

    --color3:#94B49F;

    --color4:#789395;

}



*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



.section-1{

    background-color: var(--color3);

    color: #fff;

    font-family: 'Oleo Script Swash Caps', cursive;

    height: 100vh;

    position: relative;

    width: 100%;

}

.section-1-heading{

    font-weight: bold;

    font-size: 50px;

    text-align: center;

    padding-top: 90px;

}



.section-1-img {

    width: 100%;

    margin-left: 40%;

    margin-top: 10%;

}



.section-1-img img{

    width: 300px;

    height: 180px;

    position: absolute;

    opacity: 0;

    transition: opacity 1s;

}



.section-1-img img.active{

    opacity: 1;

}



@media (max-width: 320px){

    .section-1-heading {

        font-size: 40px;

    }

    .section-1-img {

        margin-left: 20%;

        margin-top: 40%;

    }

    .section-1-img img {

        width: 200px;

        height: 100px;

    }

}



@media (min-width: 321px) and (max-width: 425px){

    .section-1-heading {

        font-size: 45px;

    }

    .section-1-img {

        margin-left: 20%;

        margin-top: 30%;

    }

    .section-1-img img {

        width: 250px;

        height: 130px;

    }

}

@media (min-width: 426px) and (max-width: 768px){

    .section-1-img {

        margin-left: 30%;

    }

}

code javascript 

let slideImg = Array.from(document.querySelectorAll('.section-1-img img'))

let counter  = 0

let timer    = 3000



setInterval(()=>{



    // function that gives the next image (with the class "active")

    if(counter < slideImg.length -1){

       

        counter ++

        slideImg[counter].classList.add("active")

        slideImg[counter-1].classList.remove("active")

    } else{

        counter = 0

        slideImg[counter].classList.add("active")

        slideImg[slideImg.length -1].classList.remove("active")

    }



},timer)

 

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

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

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

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

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

×
 مشاركة
اذهب إلى قائمة الأسئلة

  • إعلانات

  • تابعنا على



×
×
  • أضف...