كود وضع اطار من كل الجهات مطور ومتوافق مع كل المتصفحات

تاريخ الإنضمام : 07/07/2010

.بسم الله الرحمن الرحيم
السلام عليكم
كود وضع اطار من كل الجهات (مطور و[/size]متوافق. مع كل المتصفحات)
انتشر بيننا كود لوضع ايطارات لمحتوى معين ولكنه غير فعال لانه غير متوافق مع المتصفحات

يسبب بطئ شديد للمنتدى[/size].
الحل موجود
[/size]وهو استخدام الاسطورة css .
بوضع الجدول ليظهر بشكل اسرع ويتوافق مع المتصفحات

صورة لفكرة الكود

كود وضع اطار من كل الجهات مطور ومتوافق مع كل المتصفحات Struct10

كود وضع اطار من كل الجهات مطور ومتوافق مع كل المتصفحات Struct10

الكود جزئين جزء html
وcss

كود html
[/size]

<div class="box">  <div class="box-header">
<div class="box-header-right"></div> <div
class="box-header-left"></div>  </div> 
<div class="box-body"> <div
class="box-body-right"> <div class="box-body-left">

اي شيء تريده المحتويات

</div> </div>  </div> 
<div class="box-footer"> <div
class="box-footer-right"></div> <div
class="box-footer-left"></div>  </div> 
</div>

. كود css
[/size]

/* ------------------------------------------
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;
}

.تستطيع استخدام الكود في كثير من الاماكن مثل
ان نضعه ايطار للاقسام باستخدام التومبيلات وغيره الكثير