دروس في تصميم وتعديل قوالب بلوجر: ضبط مقاييس القالب (7)

ضبط مقاييس وأبعاد القالب من أهم الأمور التي يتعين الإلمام بها حين يعتزم المرء تصميم قالب جديد، وتجد طرقيتين لضبط مقاييس العرض width لأي قالب وهما :

1- أن تحدد عرضا ثابتا fixed للقالب لا يتغير في جميع الأحوال مثلا 800 بيكسل.
2- أن تجعل عرض القالب مرنا fluid بمعنى أن العرض في هذه الحالة ليس ثابتا بل يكون متغيرا حسب مقاييس الشاشة ، وكذلك حسب نوع المتصفح.

ضبط مقاييس القالب على عرض ثابت .

من أجل ضبط مقاييس أبعاد القالب ، يتعين أولا ضبط مقاييس عرض بعض الصناديق الكبيرة وسنشير إلى المشهورة منها التي يغلب أن تتوفر في معظم القوالب وهي :

الجسم : body.
الغلاف الخارجي : outer wrapper .
غلاف منطقة الرأس : Header wrapper.
منطقة المحتوى : content wrapper .
المنطقة السفلى : Footer wrapper .
المنطقة الرئيسية : main-wrapper
العمود الجانبي : sidebar wrapper .

لنبدأ بالغلاف الخارجي outer-wrapper نحن نعلم انه يضم داخله صناديق أخرى وهي منطقة الرأس Header ، ومنطقة المحتوى content والمنطقة السفلى footer. لذلك يجب أن يكون عرض هذه العناصر متساوية جميعا بما فيها الغلاف الغلاف الخارجي الذي يضمها.

ومثلا لنجعل هذا العرض هو 800 بيكسل.

ولما كان عرض منطقة المحتوى هو 800 بيكسل، ونحن نعلم انه يضم بدوره صناديق أخرى هي منطقة التدوينات ، والأعمدة الجانبية التي نفترض أنها ستكون في قالبنا هذا عمودان ، هذا يعني أنه يجب تقسيم 800 بيكسل على هذه العناصر بدورها، فلنجعل مقياس منطقة التدوينات هو 400 بيسكل، بقس 400 بيكسل نقسمها بين العمودين ، لكن حتى نترك فراغا بين منطقة التدوينات وكل عمود جانبي سنحدد مقياس كل عمود في 180 بيكسل لتبقى 20 بيكسل التي ستنقسم إلى اثنين لتصبح 10 بيكسل بين كل عمود ومنطقة التدوينات فارغا تجنبا لاختلاط محتوى كل صندوق بمحتوى الصندوق الآخر. وهي التي تم تحديد باستعمال خاصية الحشو أو المحاذاة إلى الداخل padding .
وعليه سيكون الكود بالشكل التالي :


body {
min-width: 800px; }

#outer-wrapper {
margin: 0 auto; /* to make the template lays in the screen center */
min-width: 800px;
max-width: 800px; }

#content-wrapper {
min-width: 800px;
max-width: 800px; }

#header-wrapper {
min-width: 800px;
max-width: 800px; }

#main-wrapper {
min-width: 400px;
max-width: 400px; }

.sidebar {
padding: 10px 10px 10px 10px;
min-width: 180px;
max-width: 180px; }

#sidebar1 {.....}
#sidebar2 {.....}

#footer-wrapper {
min-width: 800px;
max-width: 800px; }

ولتوضيح الأمر أكثر بالنسبة للعمود الجانبي ، نلاحظ أننا لقاصرنا فقط على تحديد مقياس sidebar دون أن نفعل ذلك لكل عمود على حدة، وذلك لأننا نريد أن يكونا مستاويين في القياس، لو أردنا غير ذلك بأن نجعل لكل عمود مقاسا خاصا لوجب علينا أن نحدد مقاس كل عمود على حدة ، أي sidebar1 و sidebar2 وفي هذا الحال لن نحتاج إلى إلى تحديد مقاس لـ sidebar لأنه يتحكم في كل الأعمدة التي تندرج تحته على السواء.


إرسال تعليق

6 تعليقات

  1. في البدء أُبارك لكم قرب حلول عيد الفطر المبارك وأسئل الله أن يعيده عليكم وأنتم ترفلون بأتم الصحة والسلامة.. ودوام التوفيق..
    وأشكركم شكراً جزيلاً على هذه المعلومات القيمة
    وأود السؤال عن: كيفية زيادة المسافة الفاصلة بين تدوينة وأُخرى؟

    ردحذف
  2. لم أفهم السؤال ، أعتقد أن التدوينة تشرح كيفية ضبط المسافة بين أجزاء القالب أو الصناديق ككل أما التدوينات فهي بمجموعها تقع في صندوق واحد .

    ردحذف
  3. اهلا اخي

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

    بانتظار ردم اخي تقبل احترامي

    اخوك عزيز

    ردحذف
  4. طيب اخوي كيف احذف الشريط الي فوق المدونه يعني مأبي الاعدآدآت الي فوق تطلع يآليت تسآعدن :(

    ردحذف
  5. يوجد موضوع في المدونة بهذا الخصوص
    فقط ابحث في محتويات المدونة بالضغط عليها أعلاه

    ردحذف