said
11-01-2013, بتوقيت غرينيتش 04:00 PM
http://www.dzbatna.com/images/icons/idea.gif [ ط¯ط±ط³] ط§ظ„ط§ط±طھظپط§ط¹ ط§ظ„ظƒط§ظ…ظ„ ظ„ظ„طµظپط*ظ‡ 100% ظˆطھط«ط¨ظٹطھ ط§ظ„ظپظˆطھط± ظپظ‰ ط§ظ„ط*ط§ط¦ط· ط¨ط§ظ„ط§ط³ظپظ„ . (http://www.dzbatna.com/t1838474/)
السلام عليكم ورحمة الله وبركاته
يوجد الكثير من المصممين عن تصميم قالب template ما
يكون فيها محتوى Main صغير او محتوى الصفحه فعندها لا يحدث التساق الفوتر بالحائط بالاسفل
ولا تعطى شكل جيد للصفحه ووجدت طريقه لتملئ هذه المنطقه الفاضيه بمحتوى الصفحه لتجعل الفوتر ملتصق بالحائط بالاسفل .
============
هذا الدرس مفصل لمن يعرف الcss راح يفهمه
===============
تكون بعض المواقع بهذه الصوره
الفوتر غير ملتسق بالحائط بالاسفل
http://filaty.com/i/1104/94238/main50.jpg
========================
==================
والان بعد هذا الدرس مفصل سوف نجعله ملتسق بالاسفل هكذا
http://filaty.com/i/1104/51723/main.jpg
========
هنا عملت صفحه بسيطه
اكواد الهتمل لعمل صفحه بسيطه فقط لنعرف ما هو الحل
http://filaty.com/i/1104/10656/html.jpg
======
بالنسبه الى <body> < html>
انا وضعت الأرتفاع الكامل 100% للوسم <body> وكذلك للصفحة <html> ومهم جدا أن تعطي لهذا الأخير الأرتفاع الكامل 100% ولا تهمله حتى لا تحدث مشاكل مع المتصفحات المختلفة، مع تصفير كل من خواص margin و padding وذلك لحذف جميع الهوامش على أطراف الصفحة.
==========================================
اكواد الCSS
http://filaty.com/i/1104/41149/style.jpg
=========
الصندوق الرئيسي container# حددت له الخاصية position بالوضع relative وهذا الوضع يسمح لنا لاحقاً بالتحكم في مكان جميع العناصر الأخرى التى تأخذ أحد خواص التموضع داخل نفس الصندوق، نأتي للرأس header# وكل ماتم عمله هو وضع خلفية وتحديد ارتفاع له فقط لنرى الشكل النهائى ، ثم صندوق المحتويات الفعلي الذى يأخذ المعرّف main# ، وتم إعطاء الصندوق الفارغ clear# خواص حتى لا يتداخل المحتوى مع نهاية الصفحة ويسقط أسفل صندوق footer# خاصة عند إستخدام الخاصية float بأحد عناصر المحتوى.
أخيراً النهاية footer# وضعت له خلفية وإرتفاع ثابت بقيمة 80px وعرض بقيمة 100% حتى يمتد ويأخذ نفس عرض الصندوق الرئيسي، ثم الموضع حُدد بـ absolute ومكانه أسفل الصندوق الرئيسي بالخاصية bottom:0; وهذا مايجعل العنصر دائما بالأسفل حتى مع عدم وجود محتويات تبعاً للصندوق الرئيسي.
------------------
واكرر هذا الدرس مفصل لمن يعرف الcss ويقوم بتصميم قوالب بها http://www.dzbatna.com/images/smilies/tears.gif
اتمنى ان اكون قد افدتكم
والسلام عليكم ورحمة الله وبركاته
ألعاب الأندرويد مجانا و حصريا (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)©
السلام عليكم ورحمة الله وبركاته
يوجد الكثير من المصممين عن تصميم قالب template ما
يكون فيها محتوى Main صغير او محتوى الصفحه فعندها لا يحدث التساق الفوتر بالحائط بالاسفل
ولا تعطى شكل جيد للصفحه ووجدت طريقه لتملئ هذه المنطقه الفاضيه بمحتوى الصفحه لتجعل الفوتر ملتصق بالحائط بالاسفل .
============
هذا الدرس مفصل لمن يعرف الcss راح يفهمه
===============
تكون بعض المواقع بهذه الصوره
الفوتر غير ملتسق بالحائط بالاسفل
http://filaty.com/i/1104/94238/main50.jpg
========================
==================
والان بعد هذا الدرس مفصل سوف نجعله ملتسق بالاسفل هكذا
http://filaty.com/i/1104/51723/main.jpg
========
هنا عملت صفحه بسيطه
اكواد الهتمل لعمل صفحه بسيطه فقط لنعرف ما هو الحل
http://filaty.com/i/1104/10656/html.jpg
======
بالنسبه الى <body> < html>
انا وضعت الأرتفاع الكامل 100% للوسم <body> وكذلك للصفحة <html> ومهم جدا أن تعطي لهذا الأخير الأرتفاع الكامل 100% ولا تهمله حتى لا تحدث مشاكل مع المتصفحات المختلفة، مع تصفير كل من خواص margin و padding وذلك لحذف جميع الهوامش على أطراف الصفحة.
==========================================
اكواد الCSS
http://filaty.com/i/1104/41149/style.jpg
=========
الصندوق الرئيسي container# حددت له الخاصية position بالوضع relative وهذا الوضع يسمح لنا لاحقاً بالتحكم في مكان جميع العناصر الأخرى التى تأخذ أحد خواص التموضع داخل نفس الصندوق، نأتي للرأس header# وكل ماتم عمله هو وضع خلفية وتحديد ارتفاع له فقط لنرى الشكل النهائى ، ثم صندوق المحتويات الفعلي الذى يأخذ المعرّف main# ، وتم إعطاء الصندوق الفارغ clear# خواص حتى لا يتداخل المحتوى مع نهاية الصفحة ويسقط أسفل صندوق footer# خاصة عند إستخدام الخاصية float بأحد عناصر المحتوى.
أخيراً النهاية footer# وضعت له خلفية وإرتفاع ثابت بقيمة 80px وعرض بقيمة 100% حتى يمتد ويأخذ نفس عرض الصندوق الرئيسي، ثم الموضع حُدد بـ absolute ومكانه أسفل الصندوق الرئيسي بالخاصية bottom:0; وهذا مايجعل العنصر دائما بالأسفل حتى مع عدم وجود محتويات تبعاً للصندوق الرئيسي.
------------------
واكرر هذا الدرس مفصل لمن يعرف الcss ويقوم بتصميم قوالب بها http://www.dzbatna.com/images/smilies/tears.gif
اتمنى ان اكون قد افدتكم
والسلام عليكم ورحمة الله وبركاته
ألعاب الأندرويد مجانا و حصريا (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)©
