توسيط الصور عن طريق CSS
غالبا ما يواجه مصممي المواقع الذين لا يتعاملون مع CSS و المبتدئين فيها (أمثالي) صعوبة في بعض الحالات و ذلك بسبب عدم معرفتنا باللغة بالشكل المناسب.
أحد الحالات التي نواجه فيها بعض الصعوبة هي توسيط الصور عن طريق إستخدام وسوم في ملف الأنماط المتتالية CSS خاصة ما إذا أردنا أن يكون الموقع مطابق لأحد المعايير القياسية المتقدمة على سبيل المثال فرضا XHTML Strict و التي تتطلب أن يكون التوسيط عن طريق ملف CSS فقط و ليس عن طريق كود HTML/XHTML.
الطريقة القديمة لتوسيط الصور كانت عن طريق إستخدام الوسم Align=”Center” في وسم الصورة نفسه، لكن الوسم Align هو من الوسوم المهملة و التي سوف يتم التوقف عن إستخدامها و إهمالها، و بالتالي لا بد من إيجاد طريقة مناسبة لتوسيط الصور غير هذه الطريقة، و ذلك عن طريق التوسيط بإستخدام CSS.
الطريقة ستكون عن طريق وضع الصورة بداخل مربع Div و إعطاء الـDiv كلاس معين نقوم بتحديد مواصفاته في ملف CSS.
قم بإضافة الصورة و الكود بالشكل التالي (مع تغيير الرابط لصورتك) و حذف علامات $$ (اضطررت لوضعها لعرض الكود بشكل صحيح في الموقع):
<$$div class="center">
<$$img src="http://www.ala7lam.com/mypic1.jpg” alt="image" />
<$$/div>
الآن سنحتاج أن نضيف الوسم center الذي وضعناه بالأعلى إلى ملف CSS مع تحديد خصائص هذا الوسم
الوسم هو Class و سميناه بالأعلى Center لسهولة و دلالة الإسم.
في ملف CSS لديك قم بإضافة الوسم التالي:
.center {
margin: 0 auto;
}
مشكلة!: الكود السابق يعمل في جميع المتصفحات تقريبا ماعدا إنترنت إكسبلورير فهو لا يعجبه العجب 😛 لذلك علينا يإضافة خاصية إضافية إلى الوسم السابق بحيث يصبح كالتالي:
.center {
margin: 0 auto;
text-align: center;
}
قم بحفظ الملف و إستعراضه، ستجد أن الصورة تظهر في الوسط.
انت متى نقلت
ياباشا
ولا ادري والله
واقول اشبه هاجد
نقلت فين 😆 ؟ من السيرفر القديم قصدك ❓
شكرا لك 😉
و ياريت لو تستمر في عرض الملاحظات الصغيرة هذه المفيدة عند التصمميم و الي البعض يغفل عنها
غريبة ماتذكرني انا منتديات شباب http://www.shabab.com
ابيك ضروري على المسنجر ..
اخوك
محمد،
العفو، و سأحاول إن شاء الله أن اكتب كل ما أراه مفيدا من الأكواد
الأخ أبو فهد،
حياك الله، اعتذر و الله، لكن قابلت الكثير سابقا و ماأذكر الي من زمان 👿
فكرني ايش صار بيننا
الي صار بيننا انك كنت تبي تسوي منتدى اسمه الاحلام وتبيه يكون توب ومشهور وانا اطور بموقعي وكنا نتناقر و نتحدى بعض وفي يوم من الايام مدري وش شاك وقفلت الموقع :
ومرة قلت لك بسافر مصر وكانت كل هذه بإجازة الصيف انتظر اضافاتك ضروري وراح تذكرني انت يمكن اول واحد اعرفك من الانترنت 😳
تذكر هذا الايميل popo-20062hot …
او
الموقع : http://www.designer1.ws
ايميل : mo@designer1.ws
انتظر اضافتك 😆
لا تنسى يوم سويت لي منتدى لي على استضافتي و مركز تحميل وكان عندي المسموح قاعدة بيانات واحد وقلت لك عطني وحدة وبعدين ارجهعها لك ثنتين ههههههههههههه
انتظرك
الموقف ماافتكرته لسع
.
امكن على الماسنجر يوضح أكثر 😀 .
أيش إيميلك للماسنجر ؟ نفس popo-20062hot ولا غيره ؟
اخوي مقولة ماتذكرتني
ايميلي هو popo-2006@hotmail.com
او
shababb@shababb.com
او
mo@designer1.ws
وحالياً ..
الي ردست به من لوحة التحكم تقدر تشوفه وتضيفني لو بغيت تعرفني وانا اعرفك من قبل 3 سنوات واكثر 🙂
انتظر ع المسنجر واعذرني على الازعاج لكن انت من اول ماعرفت 🙂
هلا فيك
سأقوم بإضافتك إن شاء الله 😀
تحياتي
كما كنا نستخدم الجداول في وضع ثلاث حقول أحدها يمنى والآخر يسى والتمدد كيف يمكنني تطبيقه بدون استخدام الجدوال واستخدام الـ div
أولا عليك عمل Div و تحديد العرض الخاص به (يفضل تحديد العرض للتسهيل)ـ
ثم بداخل الـDiv السابق تقوم بعمل 3 Div (بعدد الأعمدة) مع إعطاء كل Div كلاس مختلف عن الآخر مثلا:
class=”leftColumn”
class=”rightColumn”
class=”centerColumn”
ثم تقوم بعمل Float لجميع العناصر السابقة في ملف CSS بالطريقة التي تعجبك.
فإما أن تقوم بعمل Float لليمين لها كلها أو عمل Float لليمين للعمود الأيمن و Float لليسار للعمود الأيسر مع ترك المنتصف بدون Float.
تحياتي
😳 😥 😥 😯 والله اني جالسة ابحث فقط لمشروع التخرج بس مادري عن هذي اللغة اي شي ههههههه
طيب أيش فكرة مشروع التخرج و أيش تحتاجي تعرفي عن الـCSS ؟
إذا كانت لغتك الإنجليزية طيبة في مجموعة من المواقع الي تساعدك في الـCSS، و على فكرة هي ماهي لغة ولا فيها أي نوع من الصعوبة.
أنا أكره البرمجة 🙄 لكن الـCSS جدا سهلة و هي تساعد في تحديد الخصائص المختلفة للخطوط و المربعات و الجداول و الصور،…الخ، و لا يمكن كتابة برامج كاملة بها.
راسليتي على بريدي إذا حبيتي أشوف لك بعض المراجع الإنجليزية المفيدة من الموجودة عندي.
و بالتوفيق إن شاء الله 😎
شكراً للمشاركة
http://www.css-edge.blogspot.com