شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

قالب هيدر بسيط جاهز للتركيب بتقنية css

زائر
زائر
تمت المشاركة في الثلاثاء ديسمبر 01, 2015 1:12 pm
السلام عليكم ورحمة الله وبركاته

اقدم لكم هيدر بسيط يتكون من هيدر يسار ويمين وتمدد ولوغو

الخطوات للتركيب

اولا يتم اضافة الكود الاتي قبل وسم </head>

أي تبححث عن الوسم وتضيف اعلاة اكواد css

الكود:

    <style>
  #header {
    background-image: url(http://i68.servimg.com/u/f68/16/46/77/76/uo-ouo22.png);
    background-repeat: repeat-x;
    height: 251px;
}

#header #head-left {
    background-image: url(http://i68.servimg.com/u/f68/16/46/77/76/uo-ouo20.png);
    background-repeat: no-repeat;
    float: left;
    height: 251px;
    width: 348px;
    position:relative;
}





#header #logo {
    background-image: url(http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo16.png);
    background-repeat: no-repeat;
    float: left;
    height: 74px;
    width: 272px;
    position:relative;
    margin-top: 60px;
    margin-left: 120px;     
         
}

#header #head-right {
          background-image: url(http://i68.servimg.com/u/f68/16/46/77/76/uo-ouo21.png);
    background-repeat: no-repeat;
    float: right;
    height: 251px;
    width: 440px;
    position: relative;
}
   </style> 

ثم تبحث عن  {JAVASCRIPT}

وتضيف تحته الوسم الاتي

الكود:


<div id="header">

<div id="head-left">
</div>

<div id="head-right">
<div id="logo"></div></div>
</div></div></div>



الطريقة دة هي تكويد بتقنية css

ثم اعمل سجل النتيجة


https://i.servimg.com/u/f68/16/46/77/76/uo_ouo25.jpg

عند التعديل على الصور لابد ان تضيف الارتفاع والعرض الصحيح
وايضا الارتفاع يكون موحد لجميع الصور غير اللوغو
فاللوغو يوجد به تحكم بانقاص او زيادة موقعه من اعلى وايضا من يسار

اتمنى انني افدتكم بالدرس البسيط وبالهيدر

دمتم بخير

رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

avatar
بصمة خالدة
  •  

  • الجنس : ذكر

    الجدي

    عدد المساهمات : 948

    نقاط النشاط : 1140

    السٌّمعَة : 156

    بلد العضو :

    العمر : 22

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الجمعة ديسمبر 25, 2015 3:32 pm
    موضوع متألق من طرفك
    يعطيك ألف عاافية ع المشااركة الرائعة
    بانتظاار المزيد من قلمك المبدع
    تحيااتي لك 
    التوقــيـــــــــــــــــــــع

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    عضو فعال
    الجنس : ذكر

    عدد المساهمات : 668

    نقاط النشاط : 988

    السٌّمعَة : 24

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الجمعة ديسمبر 25, 2015 3:44 pm
    طرح راقي ومميز بكل معانيه
    دائما للتميز عنوان بقلمك
    ابدعتي اختي الكريمة
    ودي وتقديري
    وتقييمي المتواضعوردة حمراء
    التوقــيـــــــــــــــــــــع



    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    عضو جديد
    الجنس : ذكر

    عدد المساهمات : 51

    نقاط النشاط : 72

    السٌّمعَة : 11

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الثلاثاء يناير 12, 2016 4:05 pm
    قالب جميل جداااا
    تسلم الاياادي

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    زائر
    زائر
    تمت المشاركة في الخميس يونيو 02, 2016 5:18 pm
    السلام عليكم ورحمة الله وبركاته
    ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
    إنـجاز أكثر رائــــــع
    لكن أرجو منكَ عدم التوقف عند هذا الحد
    مـنتظرين ابداعتــــــك
    دمتـ ودام تألقـك

    تحياتــي

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    عضو نشيط
    الجنس : ذكر

    القوس

    عدد المساهمات : 257

    نقاط النشاط : 341

    السٌّمعَة : 14

    بلد العضو :

    العمر : 16

    معاينة صفحة البيانات الشخصي للعضوhttp://www.ahla-char7.blogspot.com
    تمت المشاركة في الجمعة يوليو 08, 2016 1:59 pm
    طرح مميز
    شكرا لك
    ابدعت
    بانتظار جديدك ان شاء الله
    وردة حمراء وردة حمراء وردة حمراء وردة حمراء

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    بصمة خالدة
  •  

  • الجنس : ذكر

    السمك

    عدد المساهمات : 23629

    نقاط النشاط : 24519

    السٌّمعَة : 130

    بلد العضو :

    العمر : 17

    معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com
    تمت المشاركة في الجمعة يوليو 22, 2016 3:19 pm
    شكر جزيلا للطرح القيم
    ننتظر المزيد من ابداع مواضيعك الرائعة
    تحياتي وتقديري لك
    التوقــيـــــــــــــــــــــع


    If the plan doesn’t work, change the plan, but never the goal
    وردة حمراء وردة حمراء

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    زائر
    زائر
    تمت المشاركة في السبت أغسطس 27, 2016 1:51 am
    منورين جميعا

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    عضو فعال
    الجنس : انثى

    الجوزاء

    عدد المساهمات : 505

    نقاط النشاط : 565

    السٌّمعَة : 21

    بلد العضو :

    العمر : 15

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الإثنين سبتمبر 26, 2016 11:22 am
    مشكوره على الموضوع الرائع يسلمو حبيبتي
    التوقــيـــــــــــــــــــــع


    وردة حمراء كن مبتسمأا ,m,nn مهما كانت 24511 الضروف 3.5 وردة حمراء
    وردة حمراء نحمد الله 53ع68ح ونشكره 53ع6صك على كل حال 3.5 وردة حمراء
    3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7 3.7

    وردة حمراء الحمد لله 534غ لا اله الا الله 534غ سبحان الله 534غ وردة حمراء

    وردة حمراء ي ربي احمي 3.5 بلدي وانصرهم ي رب 3.5 وارجعنا احرارا 3.5 وردة حمراء

    رد: قالب هيدر بسيط جاهز للتركيب بتقنية css

    avatar
    عضو نشيط
    الجنس : ذكر

    عدد المساهمات : 239

    نقاط النشاط : 280

    السٌّمعَة : 2

    بلد العضو :

    معاينة صفحة البيانات الشخصي للعضو
    تمت المشاركة في الثلاثاء نوفمبر 22, 2016 7:00 pm
    شكرا لك
    استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
    صلاحيات هذا المنتدى:
    لاتستطيع الرد على المواضيع في هذا المنتدى
    Top