![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" 613623](https://2img.net/h/help.ahlamontada.com/users/68/54/94/smiles/613623.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" 829894](https://2img.net/h/help.ahlamontada.com/users/68/54/94/smiles/829894.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" 103798](https://2img.net/h/help.ahlamontada.com/users/68/54/94/smiles/103798.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Egypt110](https://i.servimg.com/u/f46/11/86/01/52/egypt110.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Pi-ca-18](https://i.servimg.com/u/f28/11/59/42/77/pi-ca-18.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Empty](https://2img.net/i/empty.gif)
السلام عليكم ورحمة الله وبركاته
..............................
في هذا الدرس نوضح كيفيت وضع شريط منزلق لوصف اي عنصر "صورة مثلا" في صفحة الهتمل الخاصة بك
للتوضيح على الطبيعة:
هنـــــــــــــــــــــــــــــا
مختصر الطريقة:
نقوم بوصف العنصر بطريقة عادية جدا مع تحديد اسم للوصف عن طريق وسم
بعد ذلك
في منطقة الstyleفي رأس الصفحة او في ملف css نقوم بتحديد خاصية ال
overflowللعنصر"desc"فيكون الكود هكذا
تعني ظهور الشريط المنزلق في حالة اذا كان الوصف اعرض او أطول من مساحة المنطقة المحددة للكتابة
هناك خصائص أخرى لoverflow
hidden مخفي
auto بمعنى ان الشريط سيظهر فقطاذا لزم الامر حتى يمكن مشاهدة بقية الوصف
و الآن كود جاهز للتجربة
..............................
في هذا الدرس نوضح كيفيت وضع شريط منزلق لوصف اي عنصر "صورة مثلا" في صفحة الهتمل الخاصة بك
للتوضيح على الطبيعة:
هنـــــــــــــــــــــــــــــا
مختصر الطريقة:
نقوم بوصف العنصر بطريقة عادية جدا مع تحديد اسم للوصف عن طريق وسم
- الكود:
<div class="desc">هنا الوصف</div>
بعد ذلك
في منطقة الstyleفي رأس الصفحة او في ملف css نقوم بتحديد خاصية ال
overflowللعنصر"desc"فيكون الكود هكذا
- الكود:
.desc{
overflow:scroll;
}
تعني ظهور الشريط المنزلق في حالة اذا كان الوصف اعرض او أطول من مساحة المنطقة المحددة للكتابة
هناك خصائص أخرى لoverflow
hidden مخفي
auto بمعنى ان الشريط سيظهر فقطاذا لزم الامر حتى يمكن مشاهدة بقية الوصف
و الآن كود جاهز للتجربة
- الكود:
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>تجربة</title>
<style type="text/css">
#content{
text-align:center;
width:300px;
margin:auto;
position:relative;
border:1px solid #dcdcdc;
}
.desc{
margin:auto;
width:200px;
height:80px;
color:red;
font:normal 12px Tahoma;
overflow:scroll;
border:1px solid #dcdcdc;
}
</style>
</head>
<body>
<div id="content">
<img src="http://img525.imageshack.us/img525/8771/65379900.jpg" />
<div class="desc">
برنامج رائع و صغير الحجم
<br />
يسخدم في التصميم لانتاج
<br />
الصور الرائعة سواء
<br />
الثابتة أو
<br />
المتحركة كما أنه مجاني
و متاح للجميع
<div>
</div>
</body>
</html>
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Saudi210](https://i.servimg.com/u/f46/11/86/01/52/saudi210.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Pi-ca-10](https://i.servimg.com/u/f28/11/59/42/77/pi-ca-10.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Pi-ca-21](https://i.servimg.com/u/f28/11/59/42/77/pi-ca-21.gif)
![[درس css]كيفية عمل scroll bar لوصف عنصر في صفحتك "overflow property" Kli8sqegxpq6uu8h787o](https://2img.net/h/www.image.gostshare.com/files/kli8sqegxpq6uu8h787o.gif)
