الكنغ
الجنس :
عدد المساهمات : 18239
العمر : 45
| كود وضع اطار من كل الجهات لاقسام المنتدى بدون تمبيلات |
| كود وضع اطار من كل الجهات لاقسام المنتدى بدون تمبيلات | كود وضع اطار من كل الجهات لاقسام المنتدى بدون تمبيلات انتشر بيننا كود لوضع ايطارات لمحتوى معين ولكنه غير فعال لانه غير متوافق مع المتصفحات يسبب بطئ شديد للمنتدى الحل موجود وهو استخدام الاسطورة css بوضع الجدول ليظهر بشكل اسرع ويتوافق مع المتصفحات
صورة لفكرة الكود [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الكود جزئين جزء html وcss
كود html
- الكود:
-
<!-- Box >> Start --> <div class="box"> <!-- Box Header >> Start --> <div class="box-header"> <div class="box-header-right"></div> <div class="box-header-left"></div> <!-- Box Header >> End --> </div> <!-- Box Body >> Start --> <div class="box-body"> <div class="box-body-right"> <div class="box-body-left"> اي شيء تريده المحتويات </div> </div> <!-- Box Body >> End --> </div> <!-- Box Footer >> Start --> <div class="box-footer"> <div class="box-footer-right"></div> <div class="box-footer-left"></div> <!-- Box Footer >> End --> </div> <!-- Box >> End --> </div> كود css - الكود:
-
/* ------------------------------------------ 1-Box ------------------------------------------ */ .box{ width:600px; margin:0 auto; background-color:#FFF; } /* ------------------------------------------ 2-Box Header ------------------------------------------ */ .box-header{ background:url(خلفية ممتدة في الاعلى) repeat-x top; height:61px; } .box-header-right{ background:url(صورة اعلى اليمين) no-repeat top right; height:61px; width:203px; float:right; } .box-header-left{ background:url(صورة اعلى اليسار) no-repeat top left; height:61px; width:46px; float:left; } /* ------------------------------------------ 3-Box Body ------------------------------------------ */ .box-body{ background-color:#FFF; text-align:justify; } .box-body-right{ background:transparent url(خلفية ممتدة يمين) repeat-y right; } .box-body-left{ background:transparent url(خلفية ممتدة يسار) repeat-y left; padding:20px; } /* ------------------------------------------ 4-Box Footer ------------------------------------------ */ .box-footer{ background:url(خلفية ممتدة بالاسفل) repeat-x bottom; height:49px; } .box-footer-right{ background:url(صورة اسفل اليمين) no-repeat bottom right; height:49px; width:49px; float:right; } .box-footer-left{ background:url(صورة اسفل يسار) no-repeat bottom left; height:49px; width:49px; float:left; }
تستطيع استخدام الكود في كثير من الاماكن مثل ان نضعه ايطار للاقسام باستخدام التومبيلات وغيره الكثير
دعوة لي ول والدي يا اخوة بارك الله بكم حســــــــــن - المساعد الليلي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] | |
|
جامعة الكل
الجنس :
عدد المساهمات : 20616
العمر : 59
| رد: كود وضع اطار من كل الجهات لاقسام المنتدى بدون تمبيلات |
| اللهم يسر امورك وربي يخلي ابوك وامك وتكسب رضاهم مجهود رائع مشششكووووررررر لا عدمنا هالطله يارب
| |
|