الشبح
17-07-2010, 02:02 مساءً
السلام عليكم ورحمة الله وبركاته
لعناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، ، المثال التالي يوضح مبدأ تعويم العناصر:
http://img251.imageshack.us/img251/9007/38798653.gif
إذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:
http://img51.imageshack.us/img51/2788/61213911.gif
كيف يمكن فعل ذلك؟
ملف HTML للمثال أعلاه سيكون بهذا الشكل
<div id="picture">
<img src="is.jpg" alt="خادم الاسلام">
</div>
لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية float القيمة left:
#picture {
float:left;
width: 100px;
}
float يمكن أن تحمل القيمة left أو right أو none.
الخاصية clear
خاصية clear تستخدم للتحكم بوضعية العناصر اللاحقة لأي عنصر الصفحة تم تعويمه.
تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه، أنظر إلى المثال أعلاه حيث ترى النص قد التف تلقائياً بجانب صورة بيل غيتس.
الخاصية clear يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية clear قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.
div id="picture">
<img src="is.jpg" alt="خادم الاسلام">
<div class="floatstop"></div>
</div>
إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
والقادم احلى
:18:
لعناصر يمكن تعويمها إلى اليمين أو اليسار باستخدام الخاصية float، هذا يعني أن الصندوق ومحتوياته ستعوم إلى اليمين أو اليسار من الصفحة، أو من ستعوم إلى إحدى الجهتين ضمن عنصر صندوق آخر، ، المثال التالي يوضح مبدأ تعويم العناصر:
http://img251.imageshack.us/img251/9007/38798653.gif
إذا كان لدينا مثلاً نص يلتف حول صورة ستظهر النتيجة بهذا الشكل:
http://img51.imageshack.us/img51/2788/61213911.gif
كيف يمكن فعل ذلك؟
ملف HTML للمثال أعلاه سيكون بهذا الشكل
<div id="picture">
<img src="is.jpg" alt="خادم الاسلام">
</div>
لكي نجعل الصورة تطفو إلى اليسار والنص يحيط بها فعليناً أولاً تحديد عرض الصندوق المحيط بالصورة ثم نعطي للخاصية float القيمة left:
#picture {
float:left;
width: 100px;
}
float يمكن أن تحمل القيمة left أو right أو none.
الخاصية clear
خاصية clear تستخدم للتحكم بوضعية العناصر اللاحقة لأي عنصر الصفحة تم تعويمه.
تلقائياً العناصر اللاحقة تحرك لتغطي المساحة حول العنصر الذي تم تعويمه، أنظر إلى المثال أعلاه حيث ترى النص قد التف تلقائياً بجانب صورة بيل غيتس.
الخاصية clear يمكنها أن تحمل القيمة left أو right أو both أو none، المبدأ هنا إذا وضعنا لخاصية clear قيمة "both" مثلاً فإن الحاشية العلوية للعنصر ستصبح أسفل الحاشية السفلية لعنصر يعلوه.
div id="picture">
<img src="is.jpg" alt="خادم الاسلام">
<div class="floatstop"></div>
</div>
إذا لم ترغب في أن يلتف النص حول الصورة يمكنك إضافة هذه الخاصية في CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
والقادم احلى
:18: