بحث متقدم | التسجيل
الويب العربي
  تسجيل دخول
 
   
   

  ملاحظة
الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.




الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.

عـودة للخلف   الويب العربي دليل ومكتبة الويب العربي ويب 2.0 وأكواد متنوعة

بحث
links

 
zip  css لانشاء صفحة مكونة من 3 فريمات طولية وفريم عرضى بالفوتر - حصريا الزر الأيسر : حفظ ، الزر الأيمن : حفظ بإسم

  نبذة : هذا الكود هو كود css يمكنك من صناعة صفحة مقسمة ل 3 فريمات طولية وفريم عرضى بالفوتر بمجرد اكواد ال css دون انشاء اى جداول بالـ html



مثال:

اضغط هنا لمشاهدة مثال عملى

لاحظ المسطرة فى منطقة المنتصف لاستيعاب المحتوى


صورة :





التركيب :

1-- فقط انسخ الكود القادم

قم باستيعاب أكواد الاستايل اذا أردت التعديل عليها

واستبدل العناوين والمحتوى بكل ما ما تريد

كود:
<html dir="rtl">


<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> فريمات ميزة باستخدام الـ css</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontentLeft, #framecontentRight{
position: absolute; 
top: 0; 
left: 0; 
text-align: center;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentRight{
left: auto;
right: 0; 
text-align: center;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentBottom{
position: absolute;
bottom: 0; 
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
text-align: center;
height: 120px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 0;
bottom: 120px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
text-align: center;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 150px 120px 200px; /*Set value to (0 WidthOfRightFrameDiv HeightOfTopFrameDiv WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentBottom{ /*IE6 hack*/
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
dcidocument.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">

<h1>ضع هنا العنوان المناسب</h1>
<h3>ضع هنا المحتوى المناسب</h3>

</div>
</div>

<div id="framecontentRight">
<div class="innertube">

<h3>يمكنك وضع ما تريد من نصوص هنا</h3>

</div>
</div>

<div id="framecontentBottom">
<div class="innertube">

<h3>يمكنك وضع ما تريد من نصوص هنا</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>هنا ضع العنوان الذى تريد</h1>







<p align="center"><font color="#009999" face="AdvertisingBold" size="4">
<span lang="ar-eg">السلام عليكم ورحمة الله وبركاته</span></font></p>
<p align="center">&nbsp;</p>
<p align="center"><font color="#009999" face="AdvertisingBold" size="4">
<span lang="ar-eg">هذا ما هو الا نص تجريبى</span></font></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center"><font color="#00999" face="AdvertisingBold" size="4">
<span lang="ar-eg">استمتع معنا بجميع اقسام</span></font></p>
<p align="center">&nbsp;</p>
<p align="center"><font color="#009999" face="AdvertisingBold" size="4">
<span lang="ar-eg">مكتبة الويب العربى</span></font></p>
<p align="center">&nbsp;</p>
<p align="center"><font color="#009999" face="AdvertisingBold" size="4">
<span lang="ar-eg">شكرا لزيارتنا</span></font></p>




</p>

</div>
</div>


</body>
</html>

أطيب تحية

قسم : ويب 2.0 وأكواد متنوعة 
 
إضافة لمفضلتي إرسال هذه الصفحة لصديق محتويات أخرى مقترحة
بواسطة : محمّد نور ابحث عن جميع المحتويات المضافة بواسطة هذا العضو
03-01-2008
الزيارات 263
206 بايت

إرسال هذه الصفحة لصديق
إسم المُستقبل
البريد الإلكتروني للمُستقبل
الإسم
الـنـص

 
إنتقل إلى

جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 05:19 AM.

Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


 
 »  خدمات البرمجة   »  رئيسية الدليل
  »  خدمات التصميم   »  الأمن والحماية
  »  الدعاية والتسويق
  »  الدعم والتطوير
  »  الشركات الرسمية
  »  حجز دومينات
  »  خدمات الإستضافة
 
 
  »  مكتبة الإستايلات   »  رئيسية المكتبة
  »  أكواد برمجية   »  أدوات الويب ماسترز
  »  مكتبة الهاكات   »  أدوات المصممين
  »  سكربتات متنوعة
  »  مجلات إلكترونية
  »  بلوكات متنوعة
  »  ثيمات مختلفة
 
 

صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي
والحوارات الصحفية ومعلومات تقنية متنوعة .

   
 
 

للتواصل مع فريق عمل الويب العربي
يمكنك ذالك من خلال مركز الدعم والمساندة.

 الدعم الفني |  اعتماد العضويات |  قوانين الإنتساب |  إتفاقية الإستخدام |  أهداف الويب العربي |  دليل الشركات |  مكتبة الويب |  صحيفة الويب العربي |  الرئيسية