مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل

السلام عليكم ورحمة الله هناك خاصية أريد الاستفسار عنها وهي تمديد الهير والفوتر دون وسط الصفحة بمعنى : 1- إذا كان الكل ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


05-09-2013 08:13 مساء
محمد333
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 384
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 232
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
السلام عليكم ورحمة الله

هناك خاصية أريد الاستفسار عنها وهي تمديد الهير والفوتر دون وسط الصفحة بمعنى :

1- إذا كان الكل أي الهيدر والفوتر ووسط الصفحة لهم نفس مقاييس العرض فهذا لا مشكل فيه :


background:url(footer.png) repeat;
    padding:20px;


سؤالي أو المشكلة في ما يلي تابع معي جيدا :

لنفرض أن لدينا وسط الصفحة 1100 بيكسل والهيدر والفوتر متمددين في هذه الحالة

لا مشكلة إذا كانت دقة الشاشة كبيرة 1280*1024 لكن إذا قللنا الدقة إلى  1024*768 أو 900*800

الذي يحصل هو أن وسط الصفحة يصبح أكبر من الفوتر والهيدر وبالتالي لن يصبحا أي

الهيدر والفوتر متمددان بل سينقصا من الجهة اليسرى

أريد طريقة جعلهما يتمددا في هذه الحالة من طرف الشاشة إلى الطرف الآخر كما كانا قبل تغيير الدقة

بحثت كثيرا لكني لم أجد الطريقة رغم أنه يوجد حل لأني لا حظت كثيرا من المواقع الوسط محدد والهيدر والفوتر متمددان

أرجوا من خبراء التصميم بارك الله فيكم حلا لهذه المشكلة.

وهذا مثال :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Nouvelle page 1</title>
</head>

<body>
<div class="header">الهيدر</div>

<div class="content">وسط الصفحة</div>

<div class="footer">الفوتر</div>


<p align="center">&nbsp;</p>

</body>

</html>


كود الستايل style.css :

body {

    direction: rtl;
}

* { margin:0; }

.header {

    background:#000;
    font-size:16px;
    color:#fff;
    padding:20px ;   
    width: 100%;
    font-family:Arial;
    border-top: 7px #4E7DA7 solid;
    border-bottom: 7px #4E7DA7 solid;
}
.footer {        
    background:#000;
    font-size:16px;
    color:#fff;
    padding:20px ;   
    font-family:Arial;
    border-top: 7px #4E7DA7 solid;
    border-bottom: 7px #4E7DA7 solid;
}

.content {

    background:#E45B00;
    font-size:16px;
    color:#fff;
    padding:300px 20px 300px 0;
    font-family:Arial;
    width:1100px;

}





تم تحرير الموضوع بواسطة :محمد333
بتاريخ:05-09-2013 08:23 مساء


05-09-2013 11:48 مساء
مشاهدة مشاركة منفردة [1]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 10316
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 44
يتابعهم : 12
يتابعونه : 49
قوة السمعة : 62326
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
من CSS  ومن كلاس.header احذف
width: 100%;


ومن كلاس .content احذف
width:1100px;



وسيكون التمدد متوافق مع جميع المتصفحات

كما يمكنك التحكم بالتمدد للصفحة من خلال اضافة كود تحديد العرض إلى كلاس body
width: 100%;

أو
margin: 0px 0px 0px 0px;



تم تحرير المشاركة بواسطة :Soliman
بتاريخ:05-09-2013 11:50 مساء


06-09-2013 01:09 صباحا
مشاهدة مشاركة منفردة [2]
محمد333
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 384
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 232
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
أخي الكريم هذه المقاييس لو أردت أن تجعله متمددا كله بالمئوية 100%

لكن الذي أريده أنا أن يكون الهيدر والفوتر 100% متمددان من الجانبين بينما وسط الصفحة ثابث 1100 px ويبقى

كذلك حتى لو غيرنا دقة الشاشة هذا الذي أريده والمشكلة التي تظهر كما ذكرت في الموضوع عدم تمدد الهيدر

والفوتر إذا قللنا من دقة الشاشة حيث يصبح وسط الصفحة أكبر من الشاشة وبذلك يظهر السكرولر بار ولا يكتمل تمدد الهيدر والفوتر

حيث يظهرا ناقصين من الجهة اليسرى

06-09-2013 02:56 صباحا
مشاهدة مشاركة منفردة [3]
Soliman
PBB Management
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 18-07-2009
رقم العضوية : 1
المشاركات : 10316
الدولة : السعودية
الجنس : ذكر
تاريخ الميلاد : 6-1-1980
الدعوات : 44
يتابعهم : 12
يتابعونه : 49
قوة السمعة : 62326
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
اخي ماتطلبه غير ممكن تطبيقه حتى لو صغرت الشاشة لن يكون تمدد الهيدر والفوتر بنفس تمدد وسط الصفحة وهذا امر طبيعي لأن عرض البودي وسط الصفحة اكبر من عرض الهيدر والفوتر فلن يحصل اي توافق

ما الذي سيكون موجود في محتوى وسط الصفحة بالضبط لكي تكون مضطراً لأن تجعل عرضه 1100px ؟؟

06-09-2013 03:38 صباحا
مشاهدة مشاركة منفردة [4]
مهند
عضـو ستـار
rating
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
معلومات الكاتب ▼
تاريخ الإنضمام : 11-07-2010
رقم العضوية : 586
المشاركات : 2310
الدولة : العراق
الجنس : ذكر
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 4012
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
اذا فهمت فكرتك
فتريد جعل منتداك محتواه بعرض 1100
والي اقدر اساعدك به هو
ضع هذا الكود في headinclud
ابحث عن
{template}header{/template}   

اضف قبله
<div style=" width:1100px; margin-right:auto; margin-left: auto;">

بعدها توجه لقالب footer
وابحث عن
    </body>

اضف قبلها
</div>


ارجو ان يكون هذا المطلوب
تحياتي smile


تم تحرير المشاركة بواسطة :مهند
بتاريخ:06-09-2013 03:39 صباحا


06-09-2013 03:42 صباحا
مشاهدة مشاركة منفردة [5]
مهند
عضـو ستـار
rating
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
معلومات الكاتب ▼
تاريخ الإنضمام : 11-07-2010
رقم العضوية : 586
المشاركات : 2310
الدولة : العراق
الجنس : ذكر
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 4012
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
واذا اردت الهيدر والفوتر يبقيان بتمدد 100%
فلا تنفذ السابق
واذهب الى css
ابحث عن
pbboard_body

ستجد
width: 97%;

اجعله
width: 1100px;

06-09-2013 12:23 مساء
مشاهدة مشاركة منفردة [6]
محمد333
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-04-2011
رقم العضوية : 1448
المشاركات : 384
الجنس : ذكر
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 232
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
السلام عليكم

أخي سليمان وأخي مهند أنا لا أريد أن أطبقه على المنتدى وإنما أريد الفكرة أي كيف يتم ذلك على أي موقع

وليتضح طلبي أكثر، لكم هذا المثال :

فهذان الموقعان مثلا :

https://drupal.org/node/1722094

http://www.madrassa-elabqari.info/

انظروا إلى وسط الصفحة فهي ثابتة وعرضها حوالي 960 بيكسل أما الهيدر و الفوتر فهما متمددان من الجانبين

قم الآن بجعل دقة الشاشة 800*600 وانظر إلى الهيدر و الفوتر ستجدهما بقيا متمددان

أريده تطبيق ذلك على المثال الذي وضعته في الموضوع أي كيف تم ذلك، أظن أن الفكرة واضحة الآن


تم تحرير المشاركة بواسطة :محمد333
بتاريخ:06-09-2013 01:17 مساء



الصفحة 1 من 2 < 1 2 > الأخيرة »

المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
مشكلة في تمدد خلفية عنوان القسم lord
0 143 lord
مشكله تمدد شريط اخر 10 مشاركات MohtasmMohamed
10 1224 mohamedelking1997
مشكلة تمدد المنتدى والستايل ismail bahammou
4 423 Mr King
شرح التقليل من تمدد المنتدى الحمزاوي
10 1406 سناء
[مجابه] مشكله في صفحات و تمدد الكل"لوحة التحكم الاداره" + بطى في المنتدى مكلاوي
3 221 Soliman

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 07:18 مساء