التحكم بحجم وموقع العناصر في html

Asma'a · 4 ديسمبر 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=90">
        <!--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;
                        box-sizing: border-box;

                    }
                    .partner
                    {
                      width: 100%;
                      height: 100%;
                      margin: 0;
                      padding: 0;
                    }
                    .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
                    {
                        border: 1px solid #fff;
                        cursor: pointer;
                        box-shadow: 10px 0 10px #ddd;
                        height: 80px;
                        width: 100%;
                        position: sticky;

                    }
                    .title1
                    {  height: 50%;
                        width:100%;
                        margin-top: 5%;}
                    .title,h1
                    {
                        float: right;
                      
                    }
                    h1{
                        font-family: "Major Mono Display";
                        font-weight: bold;
                        font-size: 50px;
                        letter-spacing: 1px;
                        color: rgb(87, 145, 253);
                        padding-right: 70px;
                    }
                           
              #login-wrapper {
                font-family: sans-serif;
                height: 70px;
                width: 50vw;
                display: flex;
                justify-content: center;
                align-items: center;
                float: left;
                margin-top: 100px;
                opacity: 0;
              }
              .form {
                position: relative;
                width: 100%;
                max-width: 380px;
                padding: 80px 40px 40px;
                background: rgba(86, 145, 233, 0.7);
                border-radius: 10px;
                color: #fff;
                box-shadow: 0 15px 25px rgba(0,0,0,0.5);
              }
              .form::before {
                content:'';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                background: rgba(255,255,255, 0.08);
                transform: skewX(-26deg);
                transform-origin: bottom left;
                border-radius: 10px;
                pointer-events: none;
              }
              /*.form .fa {
                position: absolute;
                top: -50px;
                left: calc(50% - 50px);
                width: 100px;
                background: rgba(70, 131, 243, 0.8);
                border-radius: 50%;
              }*/
              .form h2 {
                text-align: center;
                letter-spacing: 1px;
                margin-bottom: 2rem;
                color: #29058d;
              }
              .form .input-group {
                position: relative;
              }
              .form .input-group input {
                width: 100%;
                padding: 10px 0;
                font-size: 1rem;
                letter-spacing: 1px;
                margin-bottom: 30px;
                border: none;
                border-bottom: 1px solid #fff;
                outline: none;
                background-color: transparent;
                color: inherit;
              }
              .form .input-group label {
                position: absolute;
                top: 0;
                left: 0;
                padding: 10px 0;
                font-size: 1rem;
                pointer-events: none;
                transition: .3s ease-out;
              }
              .form .input-group input:focus + label,
              .form .input-group input:valid + label {
                transform: translateY(-18px);
                color:  #03110d;
                font-size: .8rem;
              }
              .submit-btn {
                display: block;
                margin-left: auto;
                border: none;
                outline: none;
                background:  #07bd86;
                font-size: 1rem;
                text-transform: uppercase;
                letter-spacing: 1px;
                padding: 10px 20px;
                border-radius: 5px;
                cursor: pointer;
              }
              .forgot-pw {
                color: inherit;
              }
              
              #forgot-pw {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                top: 0;
                left: 0;
                right: 0;
                height: 0;
                z-index: 1;
                background: #fff;
                opacity: 0;
                transition: 0.6s;
              }
              #forgot-pw:target {
                height: 100%;
                opacity: 1;
              }
              

              .close {
                position: absolute;
                right: 1.5rem;
                top: 0.5rem;
                font-size: 2rem;
                font-weight: 900;
                text-decoration: none;
                color: inherit;
              }
            /*.login:focus.login-wrapper 
                {
                  opacity: 1;
              }*/
                    
        </style>
    </head>
    <body>
            <diV>
              <div class="container2">
                                <img src="book.png"vertical-align="middle">  
                                <span class="login" onclick="fun()" >تسجيل دخول</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="section.html"><i class="fa fa-book" dir="rtl">الأقسام</i></a>
                            </div>
                          </div>
                    </diV>
                    

                    <div class="partner">
                        <!--The container-->
                        <div class="container" id="Home">
                        <div class="title1">
                                        <div class="title"> 
                                                  <h1>Techno Book </h1>
                                            </div>

                                            
                                    <div id="login-wrapper"> 
                                              <form action="" class="form">
                                                          <!-- <i class="fad fa-user" class="fa"></i> -->
                                                          <i onclick="fun1()"> <a href="#" class="close" >&times;</a></i>
                                                        <h2><b>Login</b></h2> 
                                                            <div class="input-group"> 
                                                                <input type="text" name="User" id="User" required> 
                                                                <label for="User">User Name</label> 
                                                            </div>
                                                            <div class="input-group"> 
                                                                <input type="password" name="Password" id="Password" required>
                                                                  <label for="Password">Password</label> </div> 
                                                                  <input type="submit" value="Login" class="submit-btn"> 
                                                              <a href="#forgot-pw" class="forgot-pw">Forgot Password?</a>
                                                  </form> 
                                                      <div id="forgot-pw"> 
                                                          <form action="" class="form">
                                                                <a href="#" class="close">&times;</a> 
                                                                <h2>Reset Password</h2>
                                                                <div class="input-group"> 
                                                                    <input type="email" name="email" id="email" required> 
                                                                    <label for="email">Email</label> 
                                                                  </div> <input type="submit" value="Submit" class="submit-btn">
                                                            </form> 
                                                        </div> 
                                      </div>
                          </div>
        </div>                
      </div>  
         <script>
            function fun() {
                document.getElementById("login-wrapper").style.opacity = "1";
              }
              function fun1() {
                document.getElementById("login-wrapper").style.opacity = "0";
              }
          </script>
              
    </body>
</html>

لوسمحتم عندما أعطيت لـcontainer2

position :sticky

لم يعمل معي

كيف أتمكن من ضبط عرض وإرتفاع الحلفية لcontainer

حيث عندما أريد إضافة عناصر أسفلها يتغير الشكل كلياً للأسوأ

لماذا الدالة الأخيرة في جافاسكريت لاتعمل معي

Wael Aljamal · 4 ديسمبر 2020

مرحبا،

يوجد بعض ملفات CSS غير موجودة في المرفقات. كما أن الصور غير متوفرة.

هل يمكنك إضافة مجلد المشروع مضغوطا هنا.

و أرجو توضيح ماذا تريدن القيام به

ووضع الشيفرة المعدلة التي تحوي أخطاء

شكرا لك

تم التعديل في 4 ديسمبر 2020 بواسطة Wael Aljamal
توضيح السؤال

أحمد حبنكة · 4 ديسمبر 2020

أتريدين ضبط ارتفاع وعرض background image للـcontainer ؟

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

شوف يااخي ملف technobook الملف الاساسي.. أريد فيه أن كلمة تسجيل الدخول تتوسط بالنسبة لصورة الكتب الموضوعة بجانبها وأيضاً أريد أن يكون الشريط العلوي أن ثابت مها تنقلت وقد اعطيته Position:sticky لكن لازال يختفي عندما اتنقل وأيضاً دالة الجافا سكريبت الاخيره الذي وظيفتها اغلاق تسجيل الدخول الاولئ لكم لم تعمل.. في هذا الملف ياأخي موضوع فيه css والصورة المرفقة ليست الاصل لان حجمها كبير جداً ولم تتحمل معي اريد أيضاً ضبط العرض والارتفاع ككل للملف انظر في ملف lll عندما اضفت لها في الاسفل جزء اخر لم يظهر بالشكل المطلوب وايضاً في ملف section لماذا عندما انقر علئ الصورة الثالثة يتغير الترتيب للعناصر؟

بتاريخ 13 ساعات قال أحمد حبنكة:

أتريدين ضبط ارتفاع وعرض background image للـcontainer ؟

لقدكتبت الآن بوضوح أكثر

بتاريخ 14 ساعات قال Wael Aljamal:

مرحبا،

يوجد بعض ملفات CSS غير موجودة في المرفقات. كما أن الصور غير متوفرة.

هل يمكنك إضافة مجلد المشروع مضغوطا هنا.

و أرجو توضيح ماذا تريدن القيام به

ووضع الشيفرة المعدلة التي تحوي أخطاء

شكرا لك

هذا مايحدث في ملفlll

Abdulhamid Hamsho2 · 4 ديسمبر 2020

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

شوف يااخي ملف technobook الملف الاساسي.. أريد فيه أن كلمة تسجيل الدخول تتوسط بالنسبة لصورة الكتب الموضوعة بجانبها وأيضاً أريد أن يكون الشريط العلوي أن ثابت مها تنقلت وقد اعطيته Position:sticky لكن لازال يختفي عندما اتنقل وأيضاً دالة الجافا سكريبت الاخيره الذي وظيفتها اغلاق تسجيل الدخول الاولئ لكم لم تعمل.. في هذا الملف ياأخي موضوع فيه css والصورة المرفقة ليست الاصل لان حجمها كبير جداً ولم تتحمل معي اريد أيضاً ضبط العرض والارتفاع ككل للملف انظر في ملف lll عندما اضفت لها في الاسفل جزء اخر لم يظهر بالشكل المطلوب وايضاً في ملف section لماذا عندما انقر علئ الصورة الثالثة يتغير الترتيب للعناصر؟

technobook.html

style.css

llll.html

section.html

لقدكتبت الآن بوضوح أكثر

هذا مايحدث في ملفlll

مرحبًا @أسماء عبدالله محمود النظاري،

عند الإطلاع على ملف technobook.html أرى أنك قد استخدمتي العناصر div و a و span للحصول على القائمة العلوية، لكن كان يجب عليك لإنشاء القائمة العلوية استخدام عناصر القائمة ul و li وبداخلها وضع الروابط التشعبية a.

كما أن الخاصية position: stacky; لاتستخدم هنا، بل يجب عليك استخدام position: fixed; والتي تضمن لك بقاء القائمة العلوية أعلى الشاشة عند التحريك في باقي عناصر الصفحة.

يمكنك لعمل القائمة العلوية استخدام قوالب جاهزة من Bootstrap والتي توفر لك سهولة كبيرة في بناء القائمة العلوية وبناء قائمة منسدلة في احجام الشاشات الصغيرة.

أما بالنسبة لصفحة section.html فيمكنك حل المشكلة وذلك فقط من خلال إخراج عنصر العنوان الرئيسي <h1>Our library</h1> من داخل الصنف class="container" بهذا تكون قد فصلت العنوان الرئيسي h1 عن باقي عناصر الصفحة ليصبحو بنسق واحد داخل الصنف container.

التحكم بحجم وموقع العناصر في html

السؤال

Asma'a

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

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

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

Recommended Posts

Wael Aljamal

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

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

أحمد حبنكة

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

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

Asma'a

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

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

Abdulhamid Hamsho2

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية