• 0

مشكلة تكويد قالب html

السلام عليكم ورحمة الله وبركاته

كيف حالكم اخواني
اتمنى منكم مساعدتي في هذه المشكلة
وهو انني اقوم اولاً بعمل كلاس في div معين واربطه بـ ul li لكن يبقى هذا التنسيق مستمر مستمر الى ماله نهايه يعني يكون هو الاب 
مثال:

رمز PHP:


        <vid class="[COLOR="Red"]featured-work[/COLOR] text-center"> 
          <div class="container"> 
            <h2>من داخل التطبيق</h2> 
            <p> hello </p> 
            <ul class="list-unstyled row"> 
              <li data-class="الكل" class="col-md active">الكل</li> 
              <li data-class=".صور" class="col-md">صور</li> 
              <li data-class=".فيديو" class="col-md">فيديو</li> 
          </ul> 
       </div> 
      </div>  

باللون الاحمر اسم الكلاس في ملف style.css

حسناً الان اذهب الى ملف style.css لاضافة التنسيقات هناك:
 

رمز Code:

.featured-work ul{ margin-top: 40px; } .featured-work ul li{ color: #74777a; border: 2px solid #74777a; padding: 10px 20px; margin-left: 10px; margin-bottom: 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .featured-work ul li.active, .featured-work ul li:hover{ background-color: #ff6131; border: 2px solid #ff6131; color: #fff; } .featured-work ul li:hover{ cursor: pointer; }

وقمت بعمل عده اسطر في ملف html و css والان س اقوم باضافة ul جديدة في مكان بعيد على بعد 100 سطر بعد ما اقفل div ul الاولى :
 

رمز Code:

<div class="helpful-links"> <h2>روابط مهمة</h2> <div class="row"> <div class="col"> <ul class="list-unstyled"> <li>روابط الموقع</li> <li>الخريطة</li> <li>اتصل بنا</li> </ul> </div>

الان قمت بالذهاب الى قوقل كروم لفحص العنصر واضافة التنسيقات اجده اخذ صفات الكلاس الاول featured-work 
قمت بالتعديل من ملف css اخذ صفات الكلاس الجديد لكن بقي ايضا متمسك بكلاس featured-work اي ان الاشياء التي
لم اضفها الى كلاس helpful-links قام ب استيرادها من كلاس featured-work

اليكم الصور لتفهموها اكثر 
الصورة رقم 1 هي لبداية كتابة الكلاسhelpful-links
الصورة رقم 2 كتابة تنسيقات كلاسhelpful-links
الصورة رقم 3 قام بتجاهل تنسيقات كلاس helpful-links واخذ تنسيقات كلاس featured-work







ارجو منكم افادتي فقد قمت بمراجعة الكود اكثر من مره وجلست يومين احاول حله بدون مساعدة وهذا اول قالب لي بالحياة اقوم بتصميمة من الصفر
شكراً لكم مقدماً,

p_911durmd1-23297520-1.jpg

p_91172zfv2-23297520-1.jpg

p_911jy5os3-23297520-1.jpg

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


رابط هذه المساهمة
  • 0

السلام عليكم

فصحت الاكواد جيدا كلها جيدة إلا خطأ كتابي بسيط في HTML

الخطأ:

      <vid class="featured-work text-center">

الصواب :

<div class="featured-work text-center">

فبالتأكيد سيطبق الكلاس على كافة العناصر المرتبطة به لأنه يبحث عن نهاية العنصر vid و لا يجدها.

تمّ تعديل بواسطة أيوب موقير
تصحيح الإجابة

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


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن