مولاتى

بســــــم الله الرحمن الرحيم


<meta name="propeller" content="7edb445ea1f8a84d8d2c566f754a8268" />
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا


او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي


سنتشرف بتسجيلك


شكرا
ادارة المنتدي

مولاتى


 
البوابةالرئيسيةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 الدرس 14: وضعية العناصر

اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin
Admin
avatar

الساعة الأن :
الدوله :
ذكر عدد المساهمات : 210
نقاط : 6835
تاريخ التسجيل : 25/11/2014
العمر : 31
الموقع : www.moulati.arab.st

مُساهمةموضوع: الدرس 14: وضعية العناصر   الثلاثاء ديسمبر 16, 2014 5:06 am

باستخدام وضعية العناصر في CSS يمكن أن تضع أي عنصر في المكان الذي تريده من الصفحة ويمكن لتعويم العناصر أن يساعدك على فعل ذلك أيضاً (إقرأ [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط])، وضعية العناصر في CSS يعطيك الكثير من الخيارات لإنشاء تصاميم متقدمة وعالية الدقة.
هذا ما سنتعلمه في الدرس:

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


مبادئ وضعية العناصر في CSS

تصور أن نافذة المتصفح منسقة بهذا النظام:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
مبدأ وضعية العناصر في CSS هو أنك تستطيع وضع أي صندوق على أساس إحداثيات ونظام محدد.
لنقل بأننا نريد أن نضع عنواناً في مكان محدد، باستخدام نموذج الصندوق - إقرأ [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] - يمكن للعنوان أن يظهر بهذا الشكل:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
إذا أردنا للعنوان أن يكون موقعه على بعد 100 بكسل من أعلى الصفحة، و200 بكسل من يسار الصفحة فعلينا أن نكتب أوامر CSS بهذه الطريقة:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   h1 {[/size][/center]

[center][size=16]      position:absolute;[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]top: 100px;[/size][/b][/center]

[center][b][size=16]      left: 200px;[/size][/b][/center]

[center][size=16]   }[/size][/center]

[center][size=16]   [/size][/center]






والنتيجة ستكون بهذا الشكل:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
كما ترى وضعية العناصر في CSS أسلوب دقيق جداً لوضع العناصر حيث تشاء، وهو أسهل بكثير من تجربة استخدام الجداول لفعل ذلك أو الصور الشفافة أو أي شيء آخر.

وضعية العناصر المطلقة

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

الكود:
position

 القيمة absolute، ويمكن أيضاً استخدام الخصائص left وright وtop وbottom لتحديد وضعية الصندوق.

كمثال للوضعية المطلقة قمنا بوضع أربع صناديق في الزواية الأربعة للصفحة:

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   #box1 {[/size][/center]

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]position:absolute;[/size][/b][/center]

[center][size=16]      top: 50px;[/size][/center]

[center][size=16]      left: 50px;[/size][/center]
   }

   #box2 {

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]position:absolute;[/size][/b][/center]

[center][size=16]      top: 50px;[/size][/center]

[center][size=16]      right: 50px;[/size][/center]
   }

   #box3 {

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]position:absolute;[/size][/b][/center]

[center][size=16]      bottom: 50px;[/size][/center]
      right: 50px;

[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]      [/size][/size][/font][b][size=16]position:absolute;[/size][/b][/center]
   }

   #box4 {

[center][/center]
      bottom: 50px;

[center][size=16]   }[/size][/center]
      left: 50px;

[center][size=16]   [/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


وضعية العناصر النسبية

لوضع العناصر بشكل نسبي عليك أن تعطي الخاصية 

الكود:
position

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

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

الكود:
[center][size=16][color=#ffffff]
[/color][/size][/center]

[center][size=16]   #dog1 {[/size][/center]

[center][size=16]      position:relative;[/size][/center]
      left: 350px;

[center][size=16]   #dog2 {[/size][/center]
      bottom: 150px;
   }

[center][size=16]      left: 150px;[/size][/center]
      position:relative;
      bottom: 500px;
   }

[center][size=16]      left: 50px;[/size][/center]

   #dog3 {
      position:relative;

[center][size=16]   [/size][/center]
      bottom: 700px;

[center][size=16]   }[/size][/center]







  • [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


ملخص

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


قناة المعلم التعليميه للشروحات المصوره والشروحات التعليميه والثقافيه والفنيه والتكنلوجيا
نحن نؤمن بأنه ليس هناك رجلا يعرف كل شئ ولكننا نؤمن بتبادل الافكار
اذا اعجبكم الشرح ارجو ان تضغطو على زر ( اعجاب + مشاركه )
ومتابعتنا على قناة المعلم عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]

ومتابعتنا عبر صفحتنا فى الفيس بوك عبر الرابط التالى
[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]


[وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط]
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://moulati.arab.st
 
الدرس 14: وضعية العناصر
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
مولاتى :: youtube :: قناة المُعلم :: دروس شامله وكامله لتتعلم كل شئ عن الـ CSS وكيفية التعامل بيها وما هيا الـ CSS-
انتقل الى: