مولاتى

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


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


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


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


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

مولاتى


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

شاطر | 
 

 الدرس 13: تعويم العناصر (floats)

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

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

مُساهمةموضوع: الدرس 13: تعويم العناصر (floats)   الثلاثاء ديسمبر 16, 2014 5:04 am

العناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية 

الكود:
float

، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، أنظر [وحدهم المديرون لديهم صلاحيات معاينة هذا الرابط] للمزيد حول نموذج الصندوق، المثال التالي يوضح مبدأ تعويم العناصر:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
إذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كيف يمكن فعل ذلك؟

ملف HTML للمثال أعلاه سيكون بهذا الشكل:

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

[center][size=16]   <div id="picture">[/size][/center]

[center][size=16]      <img src="bill.jpg" alt="Bill Gates">[/size][/center]
   </div>


[center][size=16]   idciro etiam nostrarum voluntatum...</p>[/size][/center]
   <p>causas naturales et antecedentes,

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






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

الكود:
float

 القيمة left:


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

[center][size=16]   #picture {[/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]float:left;[/size][/b][/center]

[center][b][size=16]      width: 100px;[/size][/b][/center]

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

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







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


مثال آخر: الأعمدة

خاصية التعويم يمكن استخدامها للأعمدة في الصفحة، لإنشاء عمود عليك ببساطة أن تضع هيكلية للأعمدة في HTML باستخدام 

الكود:
<div>

 كما يلي:


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

[center][size=16]   <div id="column1">[/size][/center]

[center][size=16]      <p>Haec disserens qua de re agatur[/size][/center]

[center][size=16]      et in quo causa consistat non videt...</p>[/size][/center]
   </div>

   <div id="column2">

[center][size=16]      idciro etiam nostrarum voluntatum...</p>[/size][/center]
      <p>causas naturales et antecedentes,
   </div>

   <div id="column3">

[center][size=16]      potestate si res ita se haberet...</p>[/size][/center]
      <p>nam nihil esset in nostra
   </div>

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






الآن عرض العمود الذي نريد هو 33% ويمكننا ببساطة أن نعوم كل الأعمدة إلى اليسار باستخدام الخاصية 

الكود:
float

:


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

[center][size=16]   #column1 {[/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]float:left;[/size][/b][/center]

[center][b][size=16]      width: 33%;[/size][/b][/center]

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


[center][size=16]   #column2 {[/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]float:left;[/size][/b][/center]

[center][b][size=16]      width: 33%;[/size][/b][/center]

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


[center][size=16]   #column3 {[/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]float:left;[/size][/b][/center]

[center][b][size=16]      width: 33%;[/size][/b][/center]

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

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







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


الكود:
float

 يمكن أن تحمل القيمة left أو right أو none.

الخاصية clear

خاصية 

الكود:
clear

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

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

الكود:
clear

 يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية 

الكود:
clear

 قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.


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

[center][size=16]   <div id="picture">[/size][/center]

[center][size=16]      <img src="bill.jpg" alt="Bill Gates">[/size][/center]
   </div>

   <h1>Bill Gates</h1>


[center][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]   <p [/size][/size][/font][b][size=16]class="floatstop"[/size][/b][font=sans-serif, trebuchet ms, lucida grande, lucida sans unicode, arial, helvetica, sans-serif][size=13][size=16]>causas naturales et antecedentes, [/size][/size][/font][/center]

[center][size=16]   idciro etiam nostrarum voluntatum...</p>[/size][/center]

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






إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS:

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

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

[center][size=16]      float:left;[/size][/center]

[center][size=16]      width: 100px;[/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]clear:both;[/size][/b][/center]
   .floatstop {

[center][/center]
   }

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







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


ملخص

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


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

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


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

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