مشكلة في كود CSS

مريم جمال2 · 14 أكتوبر 2023

<!--setup-->
<!DOCTYPE html>
<html lang="en">
    
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>website</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/all.min.css">
    
    </head>
    <body>
        <!--nav setup-->
        <div class="nav">
            <!--image setup-->
            <div class="image">

                <img src="profile photo.jpeg" alt="profile">
                <h3>Hamza hatem</h3>

            </div>
            <!--end image-->

            <!--upper-nav setup-->
            <div class="upper-nav">

                <ul>

                    <li>

                        <i class="fa-solid fa-briefcase fa-xl" style="color: #458d44;"></i>
                        <p>Designer</p>

                    </li>
                    <br>
                    <li>

                        <i class="fa-solid fa-house fa-xl" style="color: #458d44;"></i>
                        <p>London, UK</p>

                    </li>
                    <br>
                    <li>

                        <i class="fa-solid fa-envelope fa-xl" style="color: #458d44;"></i>
                        <p>ex@mail.com</p>

                    </li>
                    <br>
                    <li>

                        <i class="fa-solid fa-phone fa-xl" style="color: #458d44;"></i>
                        <p>1224435534</p>

                    </li>
                    <br>
                    <hr>

                </ul>

            </div>
            <!--end upper-nav-->

            <!--middle-nav setup-->
            <div class="middle-nav">
                <ul>

                    <li>

                        <i class="fa-solid fa-gear fa-xl" style="color: #458d44;"></i>
                        <p>skills</p>


                    </li>

                </ul>
                <div class="first">
                    
                    <h3>Adobe photoshop</h3> 
                    <div class="first-a"></div>
                    <br>
                    <br>
                    <hr>
            
                    <h3>photography</h3> 
                    <div class="first-b"></div>
                    <br>
                    <br>
                    <hr>
            
                    <h3>illustrator</h3> 
                    <div class="first-c"></div>
                    <br>
                    <br>
                    <hr>
            
                    <h3>media</h3> 
                    <div class="first-d"></div>
                    <br>
                    <br>
                    <hr>
            
                </div>

            </div>
            <!--end middle-nave-->
            <div class="lower-nav">

                <ul>

                    <li>
    
                        <i class="fa-solid fa-earth-americas fa-xl" style="color: #458d44;"></i>
                        <p>language</p>
    
                        
                    </li>
    
                </ul>
                <div class="second">

                    <h3>English</h3> 
                    <div class="second-a"></div>
                    <br>
                    <br>
                    <hr>

                    <h3>Spanish</h3> 
                    <div class="second-b"></div>
                    <br>
                    <br>
                    <hr>

                    <h3>German</h3> 
                    <div class="second-c"></div>
                    <br>
                    <br>
                    <hr>

                </div>

            </div>

        </div>
        <div class="container"></div>

    </body>

</html>

/*Remove any padding or margin*/
*{

    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

}
/*image formatting*/
.image{

    margin: 8px;
    height: 40vh;
    position: relative;
    border-radius: 5px;
    overflow: hidden;

}
.image img{

    position: absolute;
    height: 100%;
    width: 32%;
    
}
.image h3{

    position: absolute;
    bottom: 0;

}
.nav{

    background: #123;
    position: relative;
    width: 35px;
    overflow: hidden;
    transition: 0.5s;
    border-radius: 5px;
    height: 100vh;

}
.nav:hover{

    width: 32%;

}
/*upper-nav div formatting*/
.upper-nav{

    width: 32%;
    height: 40vh;
    margin: 8px;
    position: relative;

}
ul li{

    display: flex;
    list-style: none;

}
ul li:hover{

    background: #ffffff55;

}
.upper-nav ul li img{

    height: 60%;
    width: 100%;
    position: absolute;
    z-index: -5;

}
/*middle-nav formatting*/
.middle-nav{

    margin: 8px;

}
.first-a{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}
.first-b{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}
.first-c{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}
/*lower-nav formatting*/
.lower-nav{

    margin: 8px;

}
.second-a{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}
.second-b{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}
.second-c{

    width: 70%;
    position: absolute;
    height: 30px;
    background: green;
    border-radius: 5px;

}

كيفية عمل scrollوالنزول للأسفل

Mustafa Suleiman · 14 أكتوبر 2023

السؤال غير واضح، هل تقصدين أنه لا يوجد مساحة لعمل scroll؟ تستطيعي إضافة طول لجسم الصفحة من خلال التنسيق التالي:

body{
  height: 400vh;
}

Hikmat Jaafer · 14 أكتوبر 2023

لإضافة تمرير (scroll) والنزول للأسفل في CSS، يمكنك استخدام خاصية `overflow` وقيمتها `scroll` أو `auto` للعنصر الذي ترغب في إضافة التمرير إليه. هذا سيسمح بإظهار شريط تمرير عندما يتجاوز محتوى العنصر حجمه.

على سبيل المثال، إذا كان لديك عنصر `div` ترغب في إضافة التمرير إليه، يمكنك استخدام القاعدة التالية في CSS:

div {
  overflow: scroll; /* أو يمكنك استخدام overflow: auto; */
  height: 300px; /* تعيين الارتفاع الذي ترغب به للعنصر */
}

في هذا المثال، ستظهر شريط التمرير عندما يكون محتوى العنصر `div` أكبر من ارتفاعه المحدد بقيمة 300 بكسل. يمكنك تعديل الارتفاع حسب احتياجاتك.

بعد إضافة التمرير، يمكنك النزول للأسفل عن طريق ضبط قيمة خاصية `scrollTop`. يمكنك استخدام JavaScript لتنفيذ ذلك.

var element = document.getElementById("myDiv"); // استبدال "myDiv" بمعرف العنصر الخاص بك
element.scrollTop = element.scrollHeight;

توضع هذا الكود في الوقت المناسب، مثل عند تحميل الصفحة أو بعد إجراء إجراءات أخرى.

بهذه الطريقة، سيتم التمرير تلقائيًا للأسفل في العنصر المحدد عندما يتم تحميل الصفحة أو عند حدوث حدث معين.

عبدالباسط ابراهيم · 16 أكتوبر 2023

يظهر الموقع بالشكل الطبيعي وفقاً للتنسيقات التي قمت بكتابتها وذلك بسبب أن العنصر nav أكبر من أرتفاع الشاشة ولكنك قمت بإضافة التنسيق overflow: hidden;

.nav{
    background: #123;
    position: relative;
    width: 35px;
    overflow: hidden; /* هذا التنسيق*/
    transition: 0.5s;
    border-radius: 5px;
    height: 100vh;
}

الذي يقوم بحذف ال scroll من العنصر nav

وأما بالنسبة لل container فلم يتم تحديد إرتفاع أكبر من الشاشة يسمح لك بعمل scroll

لذلك بما أنك في بداية التطوير في الموقع يمكنك حذف التنسيق overflow: hidden; مؤقتاً حتى تقوم بإضافة محتوى يسمح لك بال scroll أو يمكنك تطبيق التنسيق الذي أخبرك به مصطفى في التعليق السابق

مشكلة في كود CSS

السؤال

مريم جمال2

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

Recommended Posts

Mustafa Suleiman

Hikmat Jaafer

عبدالباسط ابراهيم

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية