لحسن الحظ، توجد حلول كثيرة تساعدك على إنهاء هذه الخطوة بأسرع طريقة ممكنة.

1. استخدام موقع browsershots.org وهي خدمة تعطيك صورة من موقعك بإستخدام عدة متصفحات.  ليس الخيار المثالي، لكنه لا يحتاج إلى تنصيب أي برامج.  شخصياً لا أفضّله.
2. إستخدام البرنامج الخاص بكل متصفح، وهذا يعني أن تقوم بتنصيب:
   • فايرفوكس
   • قوقل كروم أو سفاري
   • أوبرا
   • إنترنت إكسبلورر 6
   • إنترنت إكسبلورر 7
   • إنترنت إكسبلورر 8

إستخدام الخيار الثاني هو الأفضل بالنسبة لي، وبما أن فايرفوكس، كروم وسفاري، وأوبرا، متصفحات مستقلة فلن أعاني من مسألة تنصيبها مع بعضها البعض. وبما أنها تدعم المعايير القياسية بشكل أفضل من إنترنت إكسبلورر، فهذا يعني بأن الترقيعات لهذه المتصفحات لن تكون كثيرة، أو مؤذية.

أما بالنسبة لإصدارات إنترنت إكسبلورر، 6 و 7 و 8، فلا حظ لك بإستخدامهم “رسمياً” مع بعضهم البعض في أي نظام تشغيل… ولا حتى الوندوز.  والسبب أن سياسة مايكروسوفت ترى بأن “إستبدال” المتصفح عند ترقيته، أفضل من إضافة نسخة مستقلة.  وغرورها العجيب لا يرضيها بأن تستغني عن بناء نظامها البدائي على أكتاف هذا المتصفح الفقير.

لا تيأس، فقد قلت لا يوجد حل “رسمي”.. لكن دائماً هناك حلول مبتكرة

لحسن حظ (أو لسوء حظهم.. لا أعلم) مستخدمي الوندوز، هناك مطوّر “بطل” قام بإنشاء أداة مجانية رائعة تمكنك من تشغيل جميع إصدارات إنترنت إكسبلورر في برنامج واحد، من 5.5 إلى 8.

الأداة اسمها IETester، وبإمكانك تحميلها من هنا:

http://www.my-debugbar.com/wiki/IETester/HomePage

ولحسن حظ الجميع، فقد قمت بتعريب هذه الأداة، فاللغة العربية مضمنة أثناء التنصيب.

وبالنسبة للمصممين الذين يستخدمون لينكس أو ماك، لديكم عدة خيارات:

1. تجاهل متصفحي إنترنت إكسبلورر إلى أن يقومون بإستخدام متصفح محترم.
2. قم بتركيب VM داخلها وندوز إكس بي.. تفي بالغرض.
3. مصممي لينكس، بإمكانكم إستخدام ies4linux من (هنا).  شكراً ماجد السهلي :]

بودي الخيار الأول، لكني احترافياً قمت بإختيار الخيار الثاني

أتمنى لكم ترقيعاً سعيداً.

بالأمس، قمت أنا وأخي العزيز طلال بإطلاق هواتف، وهو موقع يوفر خدمة ويب 2.0 بسيطة ومفيدة للجميع.
في الحقيقة، أنا لا أصدق بأن هذا يحصل! لقد قمت بالفعل بإنجاز مشروعي.  وأخيراً تحققت أحد أكبر أمنياتي!
وأخيراً قمت بتنفيذ هذه الفكرة التي كانت تحوم في رأسي منذ 4 سنوات.

حسناً، كفاني تقديماً، ولأتكلم عن ماضي المشروع قليلاً، وأشارككم قصته.

كان يا ما كان…

قبل 4 سنوات تقريباً، وفي عام 2006، كنت دائماً ما أتأخر في الخروج من مكان عملي (شركة رمال)، إما لإنجاز مهام وظيفتي، أو لتصفح الإنترنت، أو فقط لقضاء الوقت على حاسوبي العزيز، وبما أنني آدمي، فأنا أحس بالجوع!
خياري بالطبع هو خدمات التوصيل في المطاعم، فعندما أقرر بأني سأطلب من مطعم ما،  أقوم بالبحث عن رقمه قصاصة ورق مرمية في الشركة، أو قائمة المطعم في أحد دروج مكتبي أو مكاتب الزملاء، أو أبحث في الإنترنت… أو في أسوء الحالات، ااقوم بالإتصال على 905.

ما هذه المأساة؟!!!

أنا لا أريد كتابة أرقام المطاعم في ورقة، أو دفتر، لأنني لست من ذلك الجمهور.
أود بأن تكون الأرقام قريبة مني، ولكني لا أريدها في قبضة يدي.. أو جيبي
ولا أرغب بإزحام دليل الأرقام في جوّالي بأرقام إضافية أيضاً!

إذا ما الحل؟

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

وقبل أن أهم في التنفيذ، طرحت على نفسي السؤال التالي:
هل أنا الوحيد الذي يعاني من هذه المشكلة؟ فهل هناك أحد غيري يرغب بوجود نفس الحل الذي أريده؟

عندها قررت البدء بهذه الفكرة كخدمة ويب، مفتوحة للجميع، كان ذلك في أواخر عام 2006، وفي بدايات 2007، كنت قد بدأت البحث عن برامج مفتوحة المصدر لأبدأ مشروعي مستنداً عليها، وإضافة تعديلاتي بما تناسب احتياجاتي.

الخيارات كانت قليلة جداً، فمنها ما هو قديم جداً وغير محدّث، ومنها ما هو معقد بشكل رهيب…
ما أردته هو شيء بسيط، ويعمل بالمستوى المقبول.

فقدت ضالتي

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

عندها بدأت بفقدان الأمل، والأسوء من ذلك، أنني لم أحصل على تشجيع من حولي، فمنهم من لم تروقه الفكرة، ومنهم من وجد بأنها دون فائدة، ومنهم من قال بأنها فاشلة لأنها لا تسمو إلى الربحية، ولا يوجد هدف معيّن أو محدد للمدخول المادي.

حين حدث ذلك،

قمت بإغلاق ملف هذا المشروع، ورميه في أرشيف أفكاري، أغلقت الضوء، وأوصدت الباب من خلفي.

لم يتغير حالي، فاستمر بي الوضع، فعندما أقوم بالطلب من مطعم، أبحث عن قصاصة ورق هنا وهناك، أو قائمة مطعم مرمية.. إلخ.

وبدأت…

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

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

عندها، في يوم ما منذ فترة ليست بالبعيدة،
قلت لطلال: “طلال، وش رايك لو قلت لك عندي فكرة تحل لنا موضوع أرقام المطاعم؟”
رد علي طلال وهو متحمس: “هات الفكرة، خلينا نشوف وش سالفتها”
قمت بسرد الفكرة عليه من “طأ طأ”، إلى “السلام عليكم”.
عندما انتهيت من الحديث، ظل طلال يطرح الأسئلة عن الموضوع بحمااااااااسة، وهذا ما فجّر حماسي إلى آفاق لم تصل لها من قبل.

مباشرة، وفي اليوم التالي، أخبرت طلال بأنني أرى تسمية الموقع (هواتف)، فأنا سأبدأ بحل مشاكل الناس بداية بأرقام المطاعم، منطلقاً إلى المشاكل الأخرى، خطوة بخطوة، تسبقها خطوة، وتلحقها الخطوة الأخرى.

حسناً، لماذا أسميته هواتف؟

لأنني، وفي أعمق مرحلة في داخلي، أرغب أن لا يقتصر الموقع على خدمات المطاعم فقط، لذلك لم أقم بتسميته “مطاعم”.
فكرتي أكبر من مجرد دليل لأرقام المطاعم، وبالطبع هي “ليست صفراء اللون”.

حسناً، لنعود لقصتي وهواتف مرة أخرى، أتيت إلى طلال، ووافقني على الإسم، في تاريخ 18/أكتوبر/2009 قمت بحجز اسم النطاق hawatef.org (النطاق الآن هو: hwaatef.com)

في ذلك الوقت، بدأنا أنا وطلال في التخطيط للمشروع مجدداً.

أول خطوة كانت إتخاذ أحد الخيارات التالية:

• البحث عن برنامج مفتوح المصدر كخيار أول.
• برمجة الموقع بأنفسنا كخيار ثاني.
• ولله الحمد، تحسنت أوضاعي المادية، فالبحث عن مبرمج بأجر أصبح ممكناً كخيار ثالث.

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

وقدّمنا لكم الموقع، بحلته، كما هو عليه الآن، بالأمس الساعة 11:59 ليلاً، أي قبل منتصف الليل تماماً.

ماذا عن أمنيتي؟

الأمر الممتع، أنه في السنة الماضية، في نفس اليوم قمت بتحقيق أحد أمنياتي بشرائي آي فون 3G.

لذلك، دعوني أسجّل في تاريخي أن فبراير هو شهر تحقيق أمنياتي.
إنجازي، في يوم 22/فبراير/2010 ، هو هواتف، خدمة مقدمة من الأخوين، أحمد الحداد، وطلال الأسمري، لكم أنتم.

النهاية، تحمسّني للبداية!

في تدوينة قادمة، سأقوم بالكتابة عن خطة المشروع وتنفيذه، لفائدة الجميع.

نصيحتي وطلال لكم:

إذا كانت لديك فكرة مشروع يسد حاجتك وحاجة الناس من حولك، فلا تتردد بإنجازها، وإن لم تملك الموارد الكافية، إبحث عن من تثق به، وبإمكانه توفير تلك الموارد لك، وأنجز مشروعك للناس، ولنفسك.

الحمدلله الذي لا إله إلا هو، الحمد لك يا ربي، لما أنعمت علينا به، وتفضّلت علينا به، بكرمك، ورحمتك، لا إله إلا أنت سبحانك، عليك وكّلت أمري، وإليك وكّلت أمري، الحمدلله، الحمدلله، الحمدلله.

وشكراً لكم.

ربما يكون عنوان الموضوع غير واضح،
لكني حاولت تبسيطه بأكبر قدر ممكن

لذلك..
الفكرة العامة من الموضوع هي رغبتي بمشاركة جزء من قوالب قمت بتصميمها، أو بالتعديل عليها، غالباً ما تكون هذه الأجزاء من “إنتاج خاص”، ويعني أنه تم تأليفها وكتابت أكوادها لغرض يخدم وظيفة غير معتادة، لكنها مألوفة، وغالباً لن تجد هذه الأجزاء في الإنترنت بسهولة.

أحد أهم الأجزاء، والتي يطلبها الكثير مني أثناء تعديلي على قالب مدوناتهم، هي سرد قائمة الصفحات الفرعية بداخل صفحة ما.
يعني لنفترض أنه لديك شجرة الصفحات كالتالي:

• عن أحمد (الصفحة الأب)
  • الإهتمامات (صفحة إبن)
  • تصاميمي (صفحة إبن)
  • مواقعي (صفحة إبن)
  • إلخ (صفحة إبن)
• صفحة أب أخرى
  • صفحة إبن للأب الآخر
  • صفحة إبن أخرى للأب الآخر

بإستخدام قالب الوورد بريس الأساسي، ستجد الصفحات بنظام الشجرة في القائمة الجانبية، ولكن لن تجدها في نص الصفحة الأب.

كيف تقوم بإظهارها؟  إتبع الطريقة التالية..

طريقة إظهار الصفحات الفرعية

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

إفتح ملف القالب (page.php)، وإبحث عن (<?php endwhile; endif; ?>):

أسفلها مباشرة، قم بإضافة الشفرة التالية:

<h2>صفحات القسم</h2>
<ol class="childpages">
	<?php
		global $id;
		wp_list_pages("title_li=&child_of=$id&show_date=modified&date_format=$date_format&depth=1");
	?>
</ol>

الآن، لو قمت بزيارة الصفحة الأب (عن أحمد)، ستجد قائمة (الصفحات الأبناء) بعد نهاية نص (الصفحة الأب) مباشرة.
ولتنسيق القائمة، بإمكانك إستخدام الكلاس (childpages) وهو معرّف في قائمة مرقّمة بإستخدام الوسم <ol>.

بإمكانك إستخدام التنسيق التالي والمستخدم في الصورة في بداية الموضوع، لتبني عليه تنسيقك الخاص،

.childpages {
	padding: 10px;
	border: 3px solid #eee;
	-moz-border-radius: 10px;
}
 
.childpages li {
	font-size: 15px;
	padding-top: 5px;
	padding-bottom: 2px;
	border-bottom: 1px solid #f5f5f5;
	margin-right: 20px;
}

أتمنى لك وقت تصميم ممتع!

الآن، بإمكانك الحصول على آخر نسخة من وورد بريس (2.9) من الموقع الرسمي لـ WordPress

• للحصول على النسخة الإنجليزية (Download)
• للحصول على النسخة المعرّبة (تحميل)

أهم المزايا في هذه النسخة

• إضافة خاصية التراجع عن الحذف، أو ما يسمى بسلة المحذوفات.  فلو قمت بحذف أي عنصر محتوى عن طريق الخطأ، فبإمكانك التراجع عن تلك الخطوة الآن.
• تحرير الصور بعد رفعها، عن طريق إستخدام خاصية الوسائط الموجودة مسبقاً.  بإمكانك قص، تدوير، قلب، تحجيم الصور دون مغادرة صفحة نشر المواضيع أو الصفحات.  خاصية التحرير هذه ما هي إلا بداية الطريق لإضافة خصائص أكثر للتعامل مع ملفات الوسائط.
• الترقية الجماعية للإضافات، فمع هذه الخاصية سيكون بإمكانك تحديث العديد من الإضافات بضغطة زر واحدة، هذا وتم تضمين بيانات حول توافقية الإضافات مع الإصدار الذي تستخدمه من وورد بريس.
• تضمين فيديو بأسهل طريقة، الآن في هذا الإصدار، سيتم تضمين مقاطع الفيديو بمجرد لصق رابطه في محتوى الموضوع
  المواقع المدعومة:
  YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, WordPress.tv
• ترقية المحرر الخاص بوورد بريس (TineMCE) و Simplepie
• يوجد العديد من التحديثات الداخلية، ولمراجعتها قم بزيارة التدوينة الرسمية لوورد بريس: Release Info

السبب في ذلك، هو ليس فقط في إختلاف المتصفح، المشكلة تكمن في إختلاف ما يسمى بـ “محرّك المظهر”، وفي الحقيقة المشكلة تكمن تحديداً في المحرّكات التي لا تتبع المعايير القياسية لإظهار العناصر بالشكل المفترض لها.

ماذا يعمل المحرّك؟

المحرّك هو المكوّن الأساسي والأهم في جميع المتصفحات. حيث مسؤوليته تتمركز حول تحويل تنسيقاتك من سطور HTML و CSS و JavaScript إلى مربعات وجداول وخطوط وألوان ورسومات وتحرّكات.. إلخ.

جودة محرّكات المظهر

أحد أهم الإختبارات التي تقوم بتقييم المتصفحات على أساس دعمها للمعايير القياسية، هو Acid3
حيث يقوم بإجراء فحص مكثف لكيفية عمل محرّك المتصفح، وفي النهاية يكون هناك تقييم حسب جودته، أو بمعنى آخر، مدى توافقيته مع المعايير القياسية لإظهار عناصر صفحات الويب من قبل منظمة W3.

وكما ذكرت، كل محرّك له طريقته في عرض العناصر، لكن كلّما إقترب المحرّك لمطابقة المعايير القياسية، كلّما ما كان أفضل لنا نحن مصممي المواقع، حيث في النهاية ستصبح جميع تصاميمنا تظهر بنفس الشكل في جميع المتصفحات دون تدخّل أو هاكات.

وحتى تأتي تلك اللحظة، دعونا نطّلع على نتائج المتصفحات في إختبار Acid3:

• آبل سفاري (يستخدم محرّك webkit): ١٠٠٪
• جوجل كروم (يستخدم محرّك webkit): ١٠٠٪
• أوبرا (يستخدم محرّك Presto): ١٠٠٪
• فايرفوكس (يستخدم محرّك Gecko): ٩٦٪
• إنترنت إكسبلورر ٨ (يستخدم محرّك Trident): ٢٠٪
• إنترنت إكسبلورر ٧ (يستخدم محرّك Trident): ١٤٪
• إنترنت إكسبلورر ٦ (يستخدم محرّك Trident): ١٢٪

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

وحتى تقوم بحل هذه المشكلة، إن كنت ترغب في ذلك

يجب عليك إستخدام ما يسمى بـ “الهاكات” أو “التلفيقات” كما أسميها.

هذه الهاكات، تمكنك من تعديل مظهر الصفحة (تنسيق الصفحة) بإستخدام شفرات محددة من الـ CSS، بحيث يكون أمر الـ CSS موجّه لمتصفح محدد، ولن يؤثر بتاتاً على بقية المتصفحات.

إذا، كيف تصمم موقعك بنفس الشكل في جميع المتصفحات؟

حتى تصل إلى هذه النتيجة، يجب عليك إتباع الخطوتين التاليتين:

1. تصميم الموقع بالشكل المرغوب بإستخدام المتصفح الذي يروق لك.
2. تضمين الهاكات التي تقوم بإصلاح التصميم ليصبح متوافق في جميع المتصفحات.

نصيحتي لك أن تبدأ في تصميم الموقع بإستخدام إما فايرفوكس، سفاري، كروم، أو أوبرا.. حيث غالباً ستكون نتائجهم متطابقة، ثم قم بتطبيق الهاكات المخصصة لإصدارات إنترنت إكسبلورر.

الهاكات:

/* IE 6 and below  */
 
* html {}
 
/* IE 7 and below */
 
*:first-child+html {} * html {}
 
/* IE 7 only */
 
*:first-child+html {}
 
/* IE 7 and modern browsers only */
 
 html>body {}
 
/* Modern browsers only (not IE 7) */
 
 html>/**/body {}
 
/* Recent Opera versions 9 and below */
 
html:first-child {}

الفكرة بسيطة جداً، فقط قم بكتابة أسم الـ Selector (الـ Class أو الـ ID أو حتى الـ Html Tag) قبل الأقواس المنحنية، تماماً كما تستخدم الـ CSS العادي.

مثال:

* html span {color: red}

بإستخدام الطريقة السابقة، سيصبح لون أي نص داخل الوسم span لونه أحمر، فقط في IE6 أو إنترنت إكسبلورر ٦

أتمنى لك ترقيعاً سعيداً

حالياً، أعمل على  مشروع مفيد للجميع “إن شاء الله”.

سأقوم بإطلاق النسخة الأولية “Private Alpha” قريباً.

تم الإنتهاء من النسخة الأولية من موقع هواتف، http://www.hwaatef.com

بإمكانك قراءة قصة الموقع من هنا (قصة موقع هواتف)

شكراً طلال

الحي ٩ – District 9

مرادفات مترجمة لإسم الفيلم (المنطقة ٩، المقاطعة ٩، الولاية ٩)

ما هو؟

فيلم الفضائيين الوحيد، اللي حرك مشاعري وخلاني أكتب تدوينة.

الفيلم رائع، رائع، رائع، من أروع الأفلام اللي شفتها.. والله ماني عارف وش أوصف في هالرائعة.  أنا ماني ناقد فني.. ولا مخرج ولا منتج.. أنا متابع (مشاهد)، إستمتعت بكل ثانية في هذا الفيلم المشوق.

الفيلم حاز على تقييم ٨.٤ من ١٠ ناتجة من أصوات ٩٥,١٤٣ مشاهد.. مثلي..

وش سالفة الفيلم؟

قصة الفيلم تحوم حول مجموعة كبيرة من الكائنات الفضائية جات كوكب الأرض مجبورة “لسبب ما”.  المجموعة لم تقابل أي ترحيب من سكّان الأرض… همجياً. لكن.. هناك شخص واحد فقط من البشر، يمتلك روح العطف ناحية الفضائيين، والتي تتطور أحداث الفيلم حوله ووجوده مع الفضائيين.

طبعاً، يمكن الجملتين اللي فوق، ما يحمسونك تشوف الفيلم، لكني تعمدت أني ما أخرّب عليك الأحداث، نفسي تحس مثل ما حسيت.. تشمئز من أفعال بنو جنسنا في بعضنا البعض، تتيقن بأن الفيلم يحاكي الواقع البشري المرير، بصورة مختلفة، فحبنا للعلم، أودى ببعضنا إلى الحضيض.

كيف تشوف الفيلم؟

وحدة من أربع، يا تشد رحالك البحرين لو الفيلم باقي ينعرض، أو أنك تشتريه، أو تأجره، وألا قوقل صديقك.

تحذير: الفيلم يحتوي على بعض المشاهد الغير ملائمة لصغار السن (تحوم الجبد)..

Rated R for bloody violence and pervasive language.

لن تندم..

في نظري، الفيلم، ليس عن الفضاء.. الفيلم عن البشر… وللبشر فقط!

رابط الفيلم في قاعدة بيانات الإنترنت للأفلام:

http://www.imdb.com/title/tt1136608/

الظاهر قوقل يحبوني، تو ما خلصوا دعواتي إلا أضافوا لي كمية طيبة من الدعوات.

العدّاد يقول: لا توجد دعوات متبقية

إلحق ما تلحق

** تحديث **

خلاص الدعوات بحت…finish.. تبخرت.. لو جاتني دعوات جديدة، ابشروا بعزكم

أحد هذي الأفكار، تتضمن: التوسيط العمودي

في هذا الموضوع، راح أتكلم بشكل شامل عن هذه فكرة، وفوائدها، والمشاكل اللي تحلها.

بسم الله نبدأ،

التوسيط العمودي

لنفترض بأنني حاولت أصمم وأنسّق تبويبات (Tabs) بإستخدام الـ HTML والـ CSS.
علشان أوصل للنتيجة المرغوبة، راح أستخدم الشفرة التالية:

1
2
3
4
5
6
7
8
9
10
11
12
13

#tabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
#tabs li {
  padding: 3px 10px;      /* لوضع مسافات بين أطراف العنصر ومحتواه */
  margin: 0 0 0 2px;       /* لوضع مسافات بين كل عنصر، والعنصر الذي على يساره */
  float: right;
  background: #ccc;
  text-align: center;
}

1
2
3
4
5
6

<ul id="tabs">
	<li>رابط أول</li>
	<li>رابط ثاني</li>
	<li>رابط ثالث</li>
	<li>رابط رابع</li>
</ul>

وراح تكون النتيجة كالتالي:

طبعاً، ما راح أواجه أي مشكلة لو إستخدمت الشفرة السابقة، لأن نص الروابط راح يتم توسيطه عمودياً في الحاوي Container، والسبب أني حطيت قيمة التبطين Padding متساوية من الأعلى والأسفل.

المشكلة تتخثر لو جا على بالي أخلي إرتفاع التبويبات Tabs محدد، بإستخدام الخاصية height في الـCSS.

طيب السؤال،

وش يخليني أستخدم height دام أنها راح تسوي لي مشكلة؟ ليه ما أستمر بإستخدام التبطين Padding فقط؟
الجواب هو أنك لو إستخدمت التبطين Padding ما راح تعرف إرتفاع كل تبويب Tab، وراح تبني تصميمك على “التقريب” و”التلفيق” في المقاسات،

وهذا عيييييييييييب… كيف ترضى تلفّق؟؟؟

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

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

خلصنا تهزيء، نرجع للشغل…

فهمت الحين ليش لازم تستخدم height بدل padding ؟

النتيجة السيئة بإستخدام الـ height شفرتها ونتيجتها كالتالي:

7
8
9
10
11
12
13
14
15

#tabs li {
  padding: 0 10px;
  height: 35px;
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
}

لاحظ بأن نص الروابط مرتفع فوق شوي، ومهو صاير في المنتصف، وهذي نتيجة غير مرضية.

طبعاً بإمكانك إضافة تبطين، وتجلس تلفق فيه إلى أن يصير في المنتصف، لكن لا تنسى أنك راح تضطر تقلل من قيمة height لأن إضافة التبطين، يؤثر على القيمة النهائية لإرتفاع العنصر.  كيف؟

لا تقول لي أنك ما تدري!!… ترى إرتفاع العنصر ما يتحدد بس بقيمة height.. لا لا يا حبيبي، إرتفاع العنصر يتأثر بأربعة أشياء، ألا وهي:

• قيمة الإرتفاع height
• قيمة الهامش margin
• قيمة التبطين padding
• قيمة الحدود border

يعني، لو عندك div قيم خصائصه كالتالي:

1
2
3
4
5
6

div {
  height: 10px;
  padding: 2px 0;
  margin: 1px 0;
  border: 1px solid #333;
}

إستناداً للكلام اللي مكتوب فوق، راح نستنتج أن إرتفاع الـ div بيكون: ١٨ بيكسل…!!

التفاصيل كالتالي:

• ١٠ بيكسل من قيمة height
• ٢ بيكسل من قيمة margin (١ فوق و ١ تحت)
• ٤ بيكسل من قيمة padding (٢ فوق و ٢ تحت)
• ٢ بيكسل من قيمة border (١ فوق و ١ تحت)

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

الحل

الحل جداً بسيط، ولا يطري على البال، كيف؟
كل ما عليك فعله، هو إستخدام خاصية line-height للتبويب وإعطائها نفس قيمة height بالضبط.
الحل منطقي جداً، وهي جعل إرتفاع السطر يساوي إرتفاع الحاوي أو الـ Container، وبما أن النص دائماً ما يكون في وسط السطر اللذي هو عليه، إذاً سيكون في وسط السطر الذي هو عليه وإرتفاعه مثلاً ٣٥ بيكسل، هذا يعني بأنه سيكون في وسط الـ ٣٥ بيكسل… Bingo!!!

الشفرة راح تكون كالتالي:

7
8
9
10
11
12
13
14
15
16

#tabs li {
  padding: 0 10px;  /* لا نرغب بإضافة تبطين علوي أو سفلي حتى لا تتأثر القيمة المطلقة لإرتفاع التبويب */
  height: 35px;  /* إرتفاع التبويب المرغوب */
  line-height: 35px;  /* قيمة مطابقة لإرتفاع التبويب المرغوب */
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
}

والنتيجة كالتالي:

على فكرتين

• تقدر تستخدم هذه الفكرة لحل مشاكل التوسيط العمودي للنصوص في أي حاوية بشرط يكون النص في سطر واحد فقط، ولا يمتد لأكثر من سطر.
• إستخدام الخاصية vertical-align لا يفي بالغرض، لأن هذه الخاصية مخصصة لتوسيط محتويات خلايا الجداول td و th

الختام

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

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#tabs li {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  margin: 0 0 0 2px;
  float: right;
  background: #ccc;
  color: #333;
  text-align: center;
  -moz-border-radius-topleft: : 10px;           /* تدوير الزاوية العلوية اليسرى لمتصفح فايرفوكس */
  -moz-border-radius-topright: : 10px;        /* تدوير الزاوية العلوية اليمنى لمتصفح فايرفوكس */
  -webkit-border-top-left-radius: 10px;        /* تدوير الزاوية العلوية اليسرى لمتصفح سفاري وكروم */
  -webkit-border-top-right-radius: 10px;     /* تدوير الزاوية العلوية اليمنى لمتصفح سفاري وكروم */
  border: 1px solid #aaa;
}