[CSS]ط´ط±ط* ط¹ظ…ظ„ طµظ†ط¯ظˆظ‚ ط£ظˆ ط²ط± ط¬ط§ظ†ط¨ظٹ ط«ط§ط¨طھ


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

صباحكم | مسائكم معطر بذكر الرحمن،،

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

والحمدلله جربتها ونفعت الطريقة ..

عـاينـها من هــنا


،، شـرح طـريقتــهــا ،،
--------

نبــدأ باسم اللــهـ
--------
صمم شكل الصندوق في الفوتوشوب..
أنا استخدمت التالي:



هنا صورتين للوضع العادي ووضع مرور الماوس ان شئت ..

---------------------

افتح صفحة جديدة على الاكسبريشن او الدريم ويفر
أو استخدم صفحة تريد تركيب install هذا الصندوق او الزر عليها ..

انشيئ ديف جديد واعطيه ID خاص .. هنا سميته contact

رمز PHP:
<code style="white-space:nowrap"> <code> <div id="contact"></div>
</code> </code>

نبدأ في تكويد الـ CSS

الـ ID سيحتوي على العرض والارتفاع ونوع التموضع والخلفية..
ومكان وجود الديف في الصفحة والذي سنحددها من اعلى الصفحة باستخدام TOP


رمز PHP:
<code style="white-space:nowrap"> <code> #contact{



width:40px;
height:168px;
position:fixed;
left:0;
top:200px;
background:transparent url('contbg.gif') no-repeat;
</code> </code>

مكنك الاكتفاء بهذا.. واضافة الرابط فقط على الديف وانتهينا..

ولكن اذا اردت اضافة تأثير الهوفر أو تغير شكل الصندوق عند مرور الماوس اكمل معي ..

--------------

يجب ان يتعامل الماوس مع الديف كا Block عند مرور الماوس

رمز PHP:
<code style="white-space:nowrap"> <code> #contact a
{
display:block;
width:40px;
height:168px;
}
</code> </code>

اللآن عند مرور الماوس نغير شكل الخلفية بالصورة الثانية

رمز PHP:
<code style="white-space:nowrap"> <code> #contact:hover{
background:transparent url('contbg5.gif') no-repeat;
}
</code> </code>

نضيف الرابط على الديف في اكواد الهتمل ..

رمز PHP:
<code style="white-space:nowrap"> <code> <div id="contact"><a href="http://www.cliprz-php.com/news.php"></a></div>
</code> </code>

والى اللقاء في حركة جديدة ،،

دمــتم في حفــظ المولــى ،،

رابـط الموضـوع الأصـلي









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©