الصورة لا تظهر بإستخدام css

Asma'a · 3 ديسمبر 2020

<!DOCTYPE html>
<html>
    <title>
        Techno Book
    </title>
    <head>
        <meta charset="UTF-8">
        <meta name="keyword"content="HTML,CSS,JS">
        <meta name="description" content="free web book store">
        <meta name="Author"content="Asma'a Alnadhari">
        <meta http-equiv="refresh"content="30">
        <meta name="viewport"content="width-device-widhintial-scale=1.01">
        <!--Icon imag-->
        <link rel="icon"href="b.png">
        <link rel="stylesheet"href="technonook.css">
        <style>
  .container
    {
    background-image: url("tm.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 50%;
    }
        </style>
    </head>
    <body>
        <!--The container-->
        <div class="container">
            
        
            </div>
        
    </body>
</html>

لماذا الصورة لم تتحمل للمتصفح علماً بأني أعمل على كروم وأنهم بمسار واحد

أسامة كمال النبريص · 3 ديسمبر 2020

السبب في ذلك أن الحاوية التي تستخدمينها ليس لها أبعاد أو ليست لها حجم لذا فلا يوجد مكان حتى يضع لكي صورة الخلفية لذا في حال وضعتي إرتفاع للحاوية ستظهر لديكِ لأنه في الكود الخاص بكي ذكرتي أن يأخذ 50% من الارتفاع الخاص بالصورة ولكن لا يوجد لها أي إرتفاع ,فيمكنك التعديل كما يلي:

 <style>
        .container {
            height: 300px;
        }
        
        .container2 {
            background-image: url("tm.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 50%;
            height: 50%;
        }
</style>

وكذلك استبدال الحاوية التي لديكِ بالتالي:

<div class="container">
  <div class="container2">

  </div>

</div>

يمكنك التعديل على ما هو موجود كما ترغبين ما ذكرته توضيح للأمر, وأيضاً ال title موجود خارج ال head لذا من الأفضل وضعه بداخله.

تم التعديل في 3 ديسمبر 2020 بواسطة أسامة كمال النبريص
تعديل الجواب

Omar Haddad2 · 3 ديسمبر 2020

المشكلة هي في قيمة الhieght حيث أنها تعمل بالنسبة المئوية إذا أعطيت حجمًا ثابتًا للعنصر الأصل أي لو أعطيت للbody , html حجم ثابت وهذا لأن النسبة المئية تكون بالنسبة للعنصر الأب والعنصر الأب لdiv هو الbody وأيضا العنصر الأب ل الbody هو وسم الhtml ,

بالتالي تقوم بإستخدام هذه الشيفرة :

html, body { height: 100%; width: 100%; margin: 0; }

وبعدها تقوم بوضع الشيفرة الخاص بال div

  .container
    {
    background-image: url("tm.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 50%;
    }

ويمكن حل المشكلة بطريقة أخرى من خلال إستخدام وحدة القياس بكسل للإرتفاع وتحديد القيمة المناسبة بالبكسل ,وهكذا تجد أن الصورة ظهرت

  .container
    {
    background-image: url("tm.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 150px;
    }

Asma'a · 3 ديسمبر 2020

<!DOCTYPE html>
<html>
    
    <head>
        <title>
            Techno Book
        </title>
        <meta charset="UTF-8">
        <meta name="keyword"content="HTML,CSS,JS">
        <meta name="description" content="free web book store">
        <meta name="Author"content="Asma'a Alnadhari">
        <meta http-equiv="refresh"content="30">
        <meta name="viewport"content="width-device-widhintial-scale=1.01">
        <!--Icon imag-->
        <link rel="icon"href="book.png">
        <link rel="stylesheet"href="technonook.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
        <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        
        <style>
        
                    html, body { height: 100%; width: 100%; margin: 0; 
                        font-family: sans-serif;
                    }
                    .container
                    {
                    background-image: url("tm.jpg");
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 100%;
                    height: 100%;

                    }
                    img
                    {
                        height: 60px;
                        width: 60px;
                        padding-top: 10px;
                        padding-left: 7px;
                    }
                    span.login
                    {
                    font-weight: bold;
                    font-size: 30px;
                    color:rgb(87, 145, 253);
                    padding-left :5px;
                    padding-top: 10px;
                    background-color: rgba(238, 245, 242, 0.5);
                    border-radius: 10px;
                    height: 40px;
                    width:100px;
                    line-height: 5px;
                    font-family: "Amiri";

                    }
            
                    .left
                    {
                        float: right;
                        display: inline;
                        margin-right: 0;
                        margin-top: 30px;
                    }
                    a.float{
                        font-family: "Amiri";
                     text-decoration: none; 
                     padding: 30px;  
                     color:   rgb(87, 145, 253);
                     font-weight:bold;
                     font-size: 20px;
                    }
                    .container2
                    {
                        position: -webkit-sticky;
                        position: sticky;
                        border: 1px soild #fff;
                        cursor: progress;
                        box-shadow: 10px 0 10px #ddd;
                        height: 80px;
                    }
                    .title,h1
                    {
                        float: right;
                        height: 50%;
                        width:50%;
                        margin-top: 40px;
                    }
                    h1{
                        font-family: "Major Mono Display";
                        font-weight: bold;
                        font-size: 50px;
                        letter-spacing: 5px;
                        color: rgb(87, 145, 253);
                        padding-right: 70px;
                      position:sticky;
                    }
                    
        </style>
    </head>
    <body>
        <!--The container-->
        <div class="container" id="Home">

                <div class="container2">
                        <img src="book.png"vertical-align="middle">  
                        <span class="login">تسجيل دخول</span>  
                    <div class="left"dir="rtl">
                        <a class="float"href="#Home"> <i class="fa fa-home" dir="rtl">الرئيسية</i></a>

                        <a class="float"href="#"><i class="fa fa-users" dir="rtl">حول </i></a>   
                        <a class="float"href="#"><i class="fa fa-book" dir="rtl">الأقسام</i></a>
                    </div>
               </div>
               <div class="title">
                   <h1>Techno Book </h1>

               </div>
               
          </div>  
          
              
    </body>
</html>

لوسمحت هنا أطيت للcontainrبوزيشنstickyلكن مع ذلك عندما بعمل سكرول م بيكون ثابت

كمان كيف ممكن أجعل كلمة تسجيل الدخول متوسطة بالنسبة لصورة الكتب

أسامة كمال النبريص · 4 ديسمبر 2020

مرحباً بكِ أسماء,

بتاريخ 13 ساعات قال أسماء عبدالله محمود النظاري:

لوسمحت هنا أطيت للcontainrبوزيشنstickyلكن مع ذلك عندما بعمل سكرول م بيكون ثابت

للقيام بذلك نقوم بتعديل container2 إلى التالي:

 .container2 {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 1;
     border: 1px soild #fff;
     background-color: gray;
     cursor: progress;
     box-shadow: 10px 0 10px #ddd;
     height: 80px;
}

حيث أنه كان ينقصك top, وال z-index حتى تظهر الشريط العلوي فوق محتوى الصفحة, حيث يمكنك رفعه في حال قمتِ بتعديل z-index لمحتويات باقي الصفحة وجعله اعلى منهم. وكذلك لون الخلفية حتى يظهر لديكِ أن الشريط العلوي فوق محتويات الصفحة يمكنكِ تعديله باللون الذي تريدين.

بتاريخ 13 ساعات قال أسماء عبدالله محمود النظاري:

كمان كيف ممكن أجعل كلمة تسجيل الدخول متوسطة بالنسبة لصورة الكتب

إذا فهمت كلامكِ جيداً وتريدين وضع نص تسجيل الدخول فوق الصورة, للقيام بذلك قمت بتعديل بعض الأمور إستناداً إلى حجم النص:

تعديل عرض الصورة: وفي حال قمتِ بتصغير حجم كلمة تسجيل الدخول فيجب عليكِ ايضاً تعديل حجم الصورة كذلك.
```
 img {
   height: 60px;
   width: 160px;
   padding-top: 10px;
   padding-left: 7px;
}
```
تعديل حاوية كلمة تسجيل الدخول: حيث قمت بتغيير span إلى div ,وقمت بتعطيل الخلفية حتى تظهر الكلمة بشكل أوضح.

div.login {
  font-weight: bold;
  font-size: 30px;
  color: rgb(87, 145, 253);
  padding-left: 5px;
  padding-top: 10px;
  /* background-color: rgba(238, 245, 242, 0.5); */
  border-radius: 10px;
  height: 40px;
  width: 130px;
  line-height: 5px;
  font-family: "Amiri";
  position: absolute;
  bottom: 15px;
  top: 23px;
  padding-left: 20px;
  padding-right: 20px;
}

تعديل حاوية كلمة تسجيل الدخول: كما ذكرت مسبقاً حتى تعمل التنسيقات بشكل أفضل.
```
<div class="login">تسجيل دخول</div>
```

وهكذا سيظهر لديكِ كلمة تسجيل الدخول فوق الصورة. ويمكنكِ التعديل على النص حسب ما تريدين.
بالتوفيق

الصورة لا تظهر بإستخدام css

السؤال

Asma'a

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

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

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

Recommended Posts

أسامة كمال النبريص

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

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

Omar Haddad2

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

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

Asma'a

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

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

أسامة كمال النبريص

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية