بسم الله الرحمن الرحيم السلام عليكم كود وضع اطار من كل الجهات

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

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

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

تكبير الصورةتصغير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

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

كود html

الكود: ---------تضليل المحتوى


<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

الكود: ---------تضليل المحتوى

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

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

دعوة لي ول والدي يا اخوة
بارك الله بكم
الرجوع الى أعلى الصفحة اذهب الى الأسفل

» السلام عليكم ورحمة الله وبركاته
» حصريا للفنان الكبير شعبان عبد الرحيم واغنية اللحمة وعيد سعيد عليكم
» Talking حصريا للفنان الكبير شعبان عبد الرحيم واغنية اللحمة وعيد سعيد عليكم
» كود منع ظهور أى موضوع الا بعد الرد علية
» مهرجان السعاده من بابا السلام كافورى علم السلام ميك مان كنكه واديزل