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

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

Mohammed Hhhh

السؤال

كيف اجعل صورة الهاتف تحترم ال 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;
}

 

new.png

new.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

المشكلة على ما يبدو انك اعطيت ال 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%;
}

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

628f1596d906b_.thumb.png.0024db36a43a11f485041a5eeb9406bc.png

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...