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

محمود سعداوي2 · 3 مايو 2022

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

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

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

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

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

شكرا.

تم التعديل في 3 مايو 2022 بواسطة Hassan Hedr
توضيح العنوان

Hassan Hedr · 3 مايو 2022

بتاريخ 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;
}

Hassan Hedr · 3 مايو 2022

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

محمود سعداوي2 · 3 مايو 2022

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

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

نفس المشكل.

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

Hassan Hedr · 3 مايو 2022

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

نفس المشكل.

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

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

محمود سعداوي2 · 3 مايو 2022

بتاريخ 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;

}

تم التعديل في 3 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة

Hassan Hedr · 3 مايو 2022

بتاريخ 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 غير المذكورة حتى يكتمل المثال ونتمكن من تحديد المشكلة

محمود سعداوي2 · 3 مايو 2022

بتاريخ 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)

تم التعديل في 3 مايو 2022 بواسطة Hassan Hedr
تنسيق الشيفرة

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

السؤال

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

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

Recommended Posts

Hassan Hedr

Hassan Hedr

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

Hassan Hedr

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

Hassan Hedr

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية