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

ستايلات Styles

مشاكل وحلول الاستايلات

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

: موضوع مغلق

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

05-09-2013 08:13 مساءً

محمد333

السلام عليكم ورحمة الله

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

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">&nbsp;</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 مساءً

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

05-09-2013 11:48 مساءً [1]

Soliman

من CSS ومن كلاس.header احذف

CODE

width: 100%;<br />

ومن كلاس .content احذف

CODE

width:1100px;<br />

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

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

CODE

width: 100%;<br />

أو

CODE

margin: 0px 0px 0px 0px;<br />

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

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

06-09-2013 01:09 صباحاً [2]

محمد333

أخي الكريم هذه المقاييس لو أردت أن تجعله متمددا كله بالمئوية 100%

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

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

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

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

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

06-09-2013 02:56 صباحاً [3]

Soliman

اخي ماتطلبه غير ممكن تطبيقه حتى لو صغرت الشاشة لن يكون تمدد الهيدر والفوتر بنفس تمدد وسط الصفحة وهذا امر طبيعي لأن عرض البودي وسط الصفحة اكبر من عرض الهيدر والفوتر فلن يحصل اي توافق

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

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

06-09-2013 03:38 صباحاً [4]

مهند

اذا فهمت فكرتك

فتريد جعل منتداك محتواه بعرض 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 صباحاً

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

06-09-2013 03:42 صباحاً [5]

مهند

واذا اردت الهيدر والفوتر يبقيان بتمدد 100%

فلا تنفذ السابق

واذهب الى css

ابحث عن

CODE

pbboard_body<br />

ستجد

CODE

width: 97%;<br />

اجعله

CODE

width: 1100px;<br />

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

06-09-2013 12:23 مساءً [6]

محمد333

السلام عليكم

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

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

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

https://drupal.org/node/1722094

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

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

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

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

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

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

07-09-2013 05:38 صباحاً [7]

مهند

نعم اخي

الامر بسيط في منتديات pbboard محتوى الذي تحت الهيدر وفوق الفوتر مسؤل عنه كلاس وهو pbboard_body

تجده داخل ورقة ال css فيها تجد العرض 97% هذا تغيره للقيمة التي انت تريدها 800px

وبهذه الطريقه سيكون عرض محتوى المنتدى الذي تحت الهيدر وفوق الفوتر بعرض 800px ثابته يعني بأي حجم شاشه يبقى العرض ثابت

والكود المسؤل عن جعل المحتوى اي pbboard_body في وسط الصفحه هو

CODE

margin-left: auto;<br />
margin-right: auto;<br />

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

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

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

07-09-2013 06:40 صباحاً [8]

Mr King

أظنّ أنّ هذا ما تبحث عنه أخي

أضف هذا الكود في الفوتر و الهيدر بحيث 1100 هي عرض وسط الصفحه (ويفضّل أن تكون min-width أكبر من قيمة عرض الصفحة)

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

بالتوفيق أخي

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

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

07-09-2013 03:40 مساءً [9]

محمد333

المشاركة الأصلية كتبت بواسطة: Mr King أظنّ أنّ هذا ما تبحث عنه أخي

أضف هذا الكود في الفوتر و الهيدر بحيث 1100 هي عرض وسط الصفحه (ويفضّل أن تكون min-width أكبر من قيمة عرض الصفحة)
CODE
 width: 100%; min-width:1100px; 

بالتوفيق أخي

شكرا لك أخي الكريم

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

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

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

08-09-2013 10:35 صباحاً [10]

Mr King

المشاركة الأصلية كتبت بواسطة: محمد333 لكنها لا تعمل مع الإكسبلورر 7 و 6

أخي هل يوجد أحد يشتغل بالإكسبلورر 7 و 6 ؟؟

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

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

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

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

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

08-09-2013 12:43 مساءً [11]

محمد333

المشاركة الأصلية كتبت بواسطة: Mr King أخي هل يوجد أحد يشتغل بالإكسبلورر 7 و 6 ؟؟

للأسف يوجد، بل الأكثر غرابة من ذلك أني وجدت أكثر من مقهى أنترنت لازال يستعمل

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

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

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

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

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

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

الكلمات الدلالية

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

« طريقة حدف صورة من الفوتر | طلب تعديل بالهيدر ! »

الساعة الآن 05:15 AM