أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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

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


موضوع مغلق


05-09-2013 08:13 مساءً
معلومات الكاتب ▼
انضم في : 17-04-2011
رقم العضوية : 1,448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
السلام عليكم ورحمة الله

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

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

CODE

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



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

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

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

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

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

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

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

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

وهذا مثال :

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

<head>
<meta http-**="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"> </p>

</body>

</html>


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

CODE
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 مساءً

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  05-09-2013 11:48 مساءً   [1]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,587
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,196
موقعي : زيارة موقعي
من CSS ومن كلاس.header احذف
CODE
width: 100%;


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



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

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

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


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


look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  06-09-2013 01:09 صباحاً   [2]
معلومات الكاتب ▼
انضم في : 17-04-2011
رقم العضوية : 1,448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
أخي الكريم هذه المقاييس لو أردت أن تجعله متمددا كله بالمئوية 100%

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

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

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

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

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  06-09-2013 02:56 صباحاً   [3]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,587
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,196
موقعي : زيارة موقعي
اخي ماتطلبه غير ممكن تطبيقه حتى لو صغرت الشاشة لن يكون تمدد الهيدر والفوتر بنفس تمدد وسط الصفحة وهذا امر طبيعي لأن عرض البودي وسط الصفحة اكبر من عرض الهيدر والفوتر فلن يحصل اي توافق

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

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

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

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

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


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


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


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

ستجد
CODE
width: 97%;

اجعله
CODE
width: 1100px;

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  06-09-2013 12:23 مساءً   [6]
معلومات الكاتب ▼
انضم في : 17-04-2011
رقم العضوية : 1,448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
السلام عليكم

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

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

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

https://drupal.org/node/1722094

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

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

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

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


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


look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  07-09-2013 05:38 صباحاً   [7]
معلومات الكاتب ▼
انضم في : 11-07-2010
رقم العضوية : 586
المشاركات : 2,310
الدولة : العراق
الجنس :
تاريخ الميلاد : 11-12-1995
الدعوات : 3
الإنذارات : 1
قوة السمعة : 4,012
موقعي : زيارة موقعي
العضو غائب كن في الطريق عفيف الخطى شريف السماع كريم النظر وكن رجلاً ان اتوا بعده يقولون مر وهذا الاثر
نعم اخي
الامر بسيط في منتديات pbboard محتوى الذي تحت الهيدر وفوق الفوتر مسؤل عنه كلاس وهو pbboard_body
تجده داخل ورقة ال css فيها تجد العرض 97% هذا تغيره للقيمة التي انت تريدها 800px
وبهذه الطريقه سيكون عرض محتوى المنتدى الذي تحت الهيدر وفوق الفوتر بعرض 800px ثابته يعني بأي حجم شاشه يبقى العرض ثابت
والكود المسؤل عن جعل المحتوى اي pbboard_body في وسط الصفحه هو
CODE
margin-left: auto;
margin-right: auto;

عن طريق القيمة auto

ليس لدي مثال لكن جربه انت وطبقه بالسيرفر الشخصي او على منتداك وشوف مفعوله وارجع الامر كما كان في السابق بعد رؤيتك لمفعول العمل والشكل المنتج :)

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  07-09-2013 06:40 صباحاً   [8]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
أظنّ أنّ هذا ما تبحث عنه أخي
أضف هذا الكود في الفوتر و الهيدر بحيث 1100 هي عرض وسط الصفحه (ويفضّل أن تكون min-width أكبر من قيمة عرض الصفحة)

CODE

	width: 100%;
	min-width:1100px;


بالتوفيق أخي mf


تم تحرير المشاركة بواسطة :Mr King بتاريخ:07-09-2013 06:55 صباحاً


look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  07-09-2013 03:40 مساءً   [9]
معلومات الكاتب ▼
انضم في : 17-04-2011
رقم العضوية : 1,448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: Mr King أظنّ أنّ هذا ما تبحث عنه أخي
أضف هذا الكود في الفوتر و الهيدر بحيث 1100 هي عرض وسط الصفحه (ويفضّل أن تكون min-width أكبر من قيمة عرض الصفحة)

CODE

	width: 100%;
	min-width:1100px;


بالتوفيق أخي mf
شكرا لك أخي الكريم

هذه وجدتها بالأمس في أحد المواقع الأجنبية وبالفعل تعمل، لكنها لا تعمل مع الإكسبلورر 7 و 6

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

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  08-09-2013 10:35 صباحاً   [10]
معلومات الكاتب ▼
انضم في : 27-11-2012
رقم العضوية : 2,642
المشاركات : 3,234
الدولة : morocco
الجنس :
تاريخ الميلاد : 1-1-1987
الدعوات : 6
قوة السمعة : 18,850
المشاركة الأصلية كتبت بواسطة: محمد333 لكنها لا تعمل مع الإكسبلورر 7 و 6
أخي هل يوجد أحد يشتغل بالإكسبلورر 7 و 6 ؟؟

لأنّ الاكسبلورر 7 الموجود في ويندوز اكس بي يتمّ ترقيته إلى
الاكسبلورر 8 مباشرة عند تحميل الإصلاحات الأولى للويندوز
أمّا في الويندوز 7 و 8 فيتمّ الترقية إلى الإكسبلورر 10 !!!


لذلك أظنّ أنّ هذه الإشكالية صارت من الماضي upset

look/images/icons/i1.gif مشكلة في تمدد الهيدر والفوتر إذا كان الوسط محدد بالبيكسل
  08-09-2013 12:43 مساءً   [11]
معلومات الكاتب ▼
انضم في : 17-04-2011
رقم العضوية : 1,448
المشاركات : 389
الجنس :
قوة السمعة : 232
موقعي : زيارة موقعي
المشاركة الأصلية كتبت بواسطة: Mr King أخي هل يوجد أحد يشتغل بالإكسبلورر 7 و 6 ؟؟
للأسف يوجد، بل الأكثر غرابة من ذلك أني وجدت أكثر من مقهى أنترنت لازال يستعمل

الإكسبلورر 6 رغم أنه يفترض في من يفتح مقهى أن يكون على دراية بأن الإكسبلورر 6 أصبح غير

صالح تماما وغير متوافق حتى مع css فضلا عن css3 و html5 ...

وبالفعل كثير من مستخدمي الأنترنت لا يعرفون هذه الأشياء، فهذه الأمور يعرفها ويعاني منها

المطورون والمصممون.

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



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
مشكل في تمدد احصائيات ستايل ماتين2 rogina
4 972 kareem
مشكلة في تمدد خلفية عنوان القسم lord
0 620 lord
مشكله تمدد شريط اخر 10 مشاركات MohtasmMohamed
10 2580 mohamedelking1997
مشكلة تمدد المنتدى والستايل ismail bahammou
4 1228 Mr King
شرح التقليل من تمدد المنتدى الحمزاوي
10 3022 سناء

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









الساعة الآن 12:48 AM