شرح طريقة (كيفية توسيط الصورة بتقنية Css ) ..

[salima]

http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* (ظƒظٹظپظٹط© طھظˆط³ظٹط· ط§ظ„طµظˆط±ط© ط¨طھظ‚ظ†ظٹط© Css ) .. (http://www.dzbatna.com/t1669767/)



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


.. أقدم لكم درس مفصل إستثنائي وهو بعنوان كيفية توسيط صورة بتقنية Css ..

.. وذلك لسهولة وصول المعلومة لذهن المتلقي راح أشرح طريقة عملية التوسيط بالتكويد ..

.. وراح نوزع هيدر يتكون من صورة واحدة أي مقطعه قطعه واحدة ولون خلفيتها مثل لون خلفية الإستايل style لروؤية المثال : http://forum.swalifcam.com/index.php?styleid=30 لاحظ صورة الهيدر header صورة واحدة مقطعه قطعه واحدة ..~

أول شئ نقوم بكتابة كلاس الصورة في منطقة الـ body وراح يصبح بالشكل التالي :
رمز PHP:

<code style="white-space:nowrap"> <code> <div class="hedr_in_center"></div>
</code> </code>

بعد كذأ نكتب خصائص الـ Css للصورة وهي كالتالي :
رمز PHP:

<code style="white-space:nowrap"> <code> .hedr_in_center{
background-image:url('r3d_br8_re7_by_mezo_des_hdr.jpg');



height: 346px;
width: 770px;
background-repeat:no-repeat;
}
</code> </code>

نلاحظ الأن بأننا حدننا عرض وطول الصورة وأننا منعناها عن التكرار .. وما سوينا محاذاه بخاصية الـ Flote .

لأننا بنحط خاصية الـ margin لكي نقوم بتوسيط الصورة بالنص بالضبط .. لاحظ خصائص الـ Css كاملة الأن ..
رمز PHP:

<code style="white-space:nowrap"> <code> .hedr_in_center{
background-image:url('r3d_br8_re7_by_mezo_des_hdr.jpg');
height: 346px;
width: 770px;
background-repeat:no-repeat;
margin:0px auto 0px auto;
}
</code> </code>

المصدر : http://forum.swalifcam.com/showthread.php?t=600

أصبحت في المنتصف بالضبط ..~

وأتمنى أنوا الدرس مفصل وصل لكم ..~

وإلى هنا دمتم بخير ..~






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©