السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم

اخواني
الدرس مترجم

اولاً نبدأ بالمثال


ملف ال Class

كود PHP:
                            <div id="clockbase">

  [
IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
<div id="hours"></div>
<
div id="minutes"></div>
<
div id="seconds"></div>
</
div
ملفات ال Css


كود PHP:
                            body {
margin0;
padding0;
background#3e5e84 url(bg_stretch.gif) repeat-x;
}
* {
margin0;
padding0;
}
#clockbase {
width512px;
height512px;
positionrelative;
margin0 auto;
backgroundurl(clock_bg.jpgno-repeat;
}
#minutes {
width229px;
height229px;
positionabsolute;
top200px;
left137px;
backgroundurl(minutes-arm.pngno-repeat;
}
#hours {
width200px;
height200px;
positionabsolute;
top220px;
left150px;
backgroundurl(hours-arm.pngno-repeat left bottom;
}
#seconds {
width260px;
height260px;
positionabsolute;
top184px;
left120px;
backgroundurl(SECS.gifno-repeat;

}
#clockbase .min05 {background-position: left top;}
#clockbase .min10 {background-position: left -229px;}
#clockbase .min15 {background-position: left -458px;}
#clockbase .min20 {background-position: left -687px;}
#clockbase .min25 {background-position: left -916px;}
#clockbase .min30 {background-position: left -1145px;}
#clockbase .min35 {background-position: left -1374px;}
#clockbase .min40 {background-position: left -1603px;}
#clockbase .min45 {background-position: left -1832px;}
#clockbase .min50 {background-position: left -2061px;}
#clockbase .min55 {background-position: left -2290px;}
#clockbase .min00 {background-position: left -2519px;}

#clockbase .hr1 {background-position: left top;}
#clockbase .hr2 {background-position: left -200px;}
#clockbase .hr3 {background-position: left -400px;}
#clockbase .hr4 {background-position: left -600px;}
#clockbase .hr5 {background-position: left -800px;}
#clockbase .hr6 {background-position: left -1000px;}
#clockbase .hr7 {background-position: left -1200px;}
#clockbase .hr8 {background-position: left -1400px;}
#clockbase .hr9 {background-position: left -1600px;}
#clockbase .hr10 {background-position: left -1800px;}
#clockbase .hr11 {background-position: left -2000px;}
#clockbase .hr12 {background-position: left -2200px;}

/*--Replaced the PNG with a GIF for IE6--*/
*html #minutes {
backgroundurl(minutes-arm.gifno-repeat;
}
*
html #hours {
backgroundurl(hours-arm.gifno-repeat left bottom;

شكرا انتهى الدرس