منتدى طلاب جامعة السودان المفتوحة
اسرة منتدى طلاب جامعة السودان المفتوحة تتمنى لكم اقامة طيبة برفقتها نرجو الدخول اذا كنت عضوا او التسجيل او زر اخفاء للزوار


المدير العام المنتدى : وليد عبدالوهاب احمد
 
الرئيسيةالمنشوراتالتسجيلدخول

شاطر | 
 

 css لانشاء صفحة مكونة من 3 فريمات طولية وفريم عرضى بالفوتر - حصريا

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
avatar

عدد المساهمات : 738
تاريخ التسجيل : 16/07/2010
العمر : 36

مُساهمةموضوع: css لانشاء صفحة مكونة من 3 فريمات طولية وفريم عرضى بالفوتر - حصريا   الأربعاء سبتمبر 01, 2010 8:20 pm

لانشاء صفحة مكونة من 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>

المرفقات
1.jpg
لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.
(11 Ko) عدد مرات التنزيل 0
CODE.TXT
لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.
(5 Ko) عدد مرات التنزيل 0
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://ous8.withme.us
 
css لانشاء صفحة مكونة من 3 فريمات طولية وفريم عرضى بالفوتر - حصريا
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى طلاب جامعة السودان المفتوحة :: منتدى الكمبيوتر و الانترنت :: منتدى تصميم وتطوير مواقع الانترنت-
انتقل الى: