كيف أجعل صورة الهاتف تحترم ال header باستخدام css

Mohammed Hhhh · 26 مايو 2022

كيف اجعل صورة الهاتف تحترم ال header

و المشكله موضحه في الصورة المرقفه

كود 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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>coding_Now</title>
</head>

<body>
    <!-- nav bar and header -->
    <header >
        <nav class="navbar">
            <h1 style="font-family: 'Space Mono', monospace; font-weight: 900;"> <span class="one">system</span>.<span class="two">out</span>.<span class="three">println</span>(<span class="four">"Coding Now!"</span>)</h1>
            <ul>
                <li> <a href="">About us</a> </li>
                <li> <a href="">Program Advantages</a> </li>
                <li> <a href="">Download Now!</a> </li>
            </ul>
        </nav>
    </header>
    <!--section(container)-->
    <section class="content">
        <div class="phone">
            <p class="phone_des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum harum voluptatem est odit, error, corporis blanditiis ad, dolorem laudantium aliquam libero soluta necessitatibus. Rerum dolorem ab porro distinctio et eius iure! Laudantium sint doloribus, officiis vel sequi quaerat, recusandae sunt ratione asperiores ipsam similique placeat est eum at voluptatum accusantium delectus omnis voluptatem ea explicabo qui. Sint inventore fuga dolor consequuntur amet eius provident nobis officiis nam doloremque doloribus modi, tempora excepturi? Cumque nostrum perspiciatis eligendi iusto dicta dolores tempore delectus accusantium harum! Placeat, sequi, blanditiis incidunt error dignissimos optio repudiandae enim eaque eius facilis inventore eos nulla laborum.</p>
            <img class="phone_img" width="250px" src="photos/phone.png" alt="noIMg">
        </div>
    
    </section>

</body>

</html>

كود css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #121420;
    font-family: 'Roboto', sans-serif;
}

/* logo colors */
/* nav bar code  and header*/
.one {
    color: rgb(104, 0, 139);
}

.two {
    color: rgb(232, 185, 0);
}

.three {
    color: rgb(0, 0, 160);
}

.four {
    color: green;
}

/* nav bar code  and header*/
header {
    position: fixed;
    width: 100%;
}

.navbar {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    color: rgb(172, 172, 172);
}

.navbar ul li {
    list-style: none;
    display: inline-block;
}

.navbar ul li a {
    font-size: 18px;
    font-weight: 700;
    color: #5d69a9;
    text-decoration: none;
    padding: 10px;
    transition: 1s all;
    -webkit-transition: 0.5 all;
    -moz-transition: 1s all;
    -ms-transition: 1s all;
    -o-transition: 1s all;
}

.navbar ul li a:hover {
    text-shadow: 2px 5px rgb(0, 30, 86);
    border: solid red 2px;
}

/* end of header and nav bar */
.phone {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.phone_des {
    width: 45%;
    color: white;
}

عمر قره محمد · 26 مايو 2022

المشكلة على ما يبدو انك اعطيت ال header :

header {
    position: fixed; /* المشكلة هنا */
    width : 100%
}

وهذا يجعله في طبقة منفصلة في الامام.

للتغلب على هذه المشكلة بإمكانك إعطاء الـ

 <section class="content">
        <div class="phone">
            <p class="phone_des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum harum voluptatem est odit, error, corporis blanditiis ad, dolorem laudantium aliquam libero soluta necessitatibus. Rerum dolorem ab porro distinctio et eius iure! Laudantium sint doloribus, officiis vel sequi quaerat, recusandae sunt ratione asperiores ipsam similique placeat est eum at voluptatum accusantium delectus omnis voluptatem ea explicabo qui. Sint inventore fuga dolor consequuntur amet eius provident nobis officiis nam doloremque doloribus modi, tempora excepturi? Cumque nostrum perspiciatis eligendi iusto dicta dolores tempore delectus accusantium harum! Placeat, sequi, blanditiis incidunt error dignissimos optio repudiandae enim eaque eius facilis inventore eos nulla laborum.</p>
            <img class="phone_img" width="250px" src="photos/phone.png" alt="noIMg">
        </div>
    
    </section>

margin-top يوافق طول ال header بالشكل التالي :

.content{
	margin-top: 100px;
}

واعطاء ال header خاصية ال top = 0 حيث يصبح :

header {
    position: fixed;
    top: 0; /* التصحيح */
    width: 100%;
}

فيصبح الشكل النهائي كالتالي

ملف ال css بعد التعديل : style.css

كيف أجعل صورة الهاتف تحترم ال header باستخدام css

السؤال

Mohammed Hhhh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية