More

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الخامس – المحاذاة الأفقية

" Here you can search for everything you want and you will find it as soon as possible "
هناك الكثير من الخاصيات التي تقوم بعمل المحاذاة الأفقية للعناصر

شاهد المثال المباشر

محاذاة العناصر الكتلية

العناصر الكتلية هي العناصر التي تكون مرتبة تحت بعضها البعض والتي تأخذ عرض كامل

مثال عن عناصر كتلية (مرتبة تحت بعضها)

  • <h1>
  • <p>
  • <div>

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

المحاذاة في الوسط باستخدام خاصية الهوامش الخارجية margin

يمكن للعناصر الكتلية ضبط محاذاتها من خلال ضبط هوامش اليمين واليسار بتلقائي “auto”

ملاحظة: لن تعمل خاصية margin:auto على IE8 مالم تحدد نوع الصفحة من خلال !DOCTYPE

باستخدام ضبط هوامش اليمين واليسار بتلقائي “auto” فهذا يعني بأن العناصر ستقتص الهوامش المتوفرة والنتيجة سيصبح العنصر في الوسط .

مثال

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

ملاحظة: اذا كان العرض 100% فعندها المحاذاة لن يكون لها أي تأثير

المحاذاة إلى اليمين و اليسار باستخدام خاصية الترتيب position

هناط طريقة أخرى لاستخدام المحاذاة وهي عن طريق الترتيب المطلق absolute positioning

مثال

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

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

تخطي مشكلة توافقية المتصفحات

عند استخدام محاذاة العناصر كما في الأمثلة السابقة يجب تعريف الهوامش
الخارجية margin والداخلية padding لوسم <body> وذلك لتجنب موضوع
التوافقية الناتج عن اختلاف المتصفحات

دائماً هناك مشكلة مع اصدارات متصفح IE8 وماقبل عند استخدام خاصية
الترتيب position . إن تم تحديد عرض العنصر “المحتوى” أي في هذه الحالة مثل
<div class=”container”> و لم يتم تعريف صفحة الويب باستخدام خاصية !DOCTYPE
فإن اصدارات المتصفح IE8 وماقبل ستضيف هوامش خارجية للجانب اليمين 17px
وهذا سيسبب مشكلة لهذا دائماً تأكد من تحديد أو تعريف صفحة الويب !DOCTYPE عند استخدام خاصية الترتيب position

You may also like  [CrossFire Hack] - [Vina CF] – [New [2] Update] – 13 / 7 / 2015

مثال

Body {
margin:0;
padding:0;
}
.container {
position:relative;
width:100%;
}
.right {
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

المحاذاة إلى اليمين و اليسار باستخدام خاصية الطفو float

طريقة أخرى لاستخدام المحاذاة هي استخدام خاصية الطفو float

مثال

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

تخطي مشكلة توافقية المتصفحات

عند استخدام محاذاة العناصر كما في الأمثلة السابقة يجب تعريف الهوامش
الخارجية margin والداخلية padding لوسم <body> وذلك لتجنب موضوع
التوافقية الناتج عن اختلاف المتصفحات

دائماً هناك مشكلة مع اصدارات متصفح IE8 وماقبل عند استخدام خاصية الطفو float . إن لم يتم تعريف صفحة الويب باستخدام خاصية !DOCTYPE
فإن اصدارات المتصفح IE8 وماقبل ستضيف هوامش خارجية للجانب اليمين 17px
وهذا سيسبب مشكلة لهذا دائماً تأكد من تحديد أو تعريف صفحة الويب !DOCTYPE عند استخدام خاصية الطفو float

مثال

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker