إعداد رسائل الأخطاء و الرسائل التحذيرية في CSS
في 26 February 2007 ميلادي | 07 صفر 1428 هجري (المشاهدات 905 مشاهدة)عندما نقوم بتصميم صفحات الويب نحتاج كثيراً لعرض رسائل أخطاء أو رسائل تحذيرية عند إدخال معلومات خطأ في نموذج الإرسال أو إتباع رابط خطأ أو رسائل ترحيبية عند دخول صفحة معينة أو دخول لوحة التحكم في سكريبت معين, عندما نستخدم CSS في تصميم صفحتنا فأنها تقدم لنا ميزات رائعة في تشكيل هذه الرسائل بشكل لا أعتقد أنها توفر بغيرها و سأسرد بعض الأمئلة عن استخدام هذه الرسائل.
رسائل الأخطاء يجب أن تتميز عن باقي الشكل العام للصفحة و ذالك لتكون واضحة و ملفتة للنظر و يكون هذا بإدراج صور فيها تزيدها جمالاً و وضوحاً أو بتغير لون خلفية النص بشكل مميز و تغير بعض السمات و لكن دون أن يؤثر ذالك سلباً على جمال الصفحة, فليس من الجميل أن نجعل قياس الخط كبيرا جدا بحيث نقوم بإتلاف الصفحة .
div.error {
background: #ffcccc url(images/error_small.png) no-repeat 5px 5px;
color: #900;
border-top: 1px solid #c00;
border-bottom: 1px solid #c00;
padding: 0.25em 0.5em 0.25em 2.5em;
font-weight: bold;
min-height: 1.25em;
text-align: center}هذا الكود يحدد سمات كائن div بخلفية باللون الزهري و هذه الخلفية أيضا تحوي صورة غير متكررة تظهر بالجانب اليساري العلوي و محدد حواف من الأعلى و الأسفل فقط , لون النص و لون الخلفية و لون الحدود متناسقين بشكل جميل و ملفت للنظر على أنها رسالة تحذيرية .
بعد ذالك نكتب كود ال xhtml بالشكل التالي
Your code was not in the correct format
في الكود السابق استخدمنا الصور كخلفيات مما يمنعنا من استخدام خاصية alt أو title على الصور , و للاستفادة من هذه الميزة نحول الكود إلى ما يلي
div.bettererror {
background-color: #ffcccc;
color: #900;
border-top: 1px solid #c00;
border-bottom: 1px solid #c00;
padding: 0.25em 0.5em 0.25em 2.5em;
font-weight: bold;
position: relative;
min-height: 1.25em}
div.bettererror img {
display: block;
position: absolute;
left: 5px;
top: 5px;
padding: 0;
margin: 0}
div.bettererror p {
position: absolute;
right: 2.5em;
padding: 0;
margin: 0;
text-align: center;
} هنا حددنا مواصفات كائن div و حددنا مواصفات كائن الـ img الذي سيحوي الصورة ضمنه و كائن p الذي سيحوي النص و من ثم نقوم بكتابة الكود ال xhtml بالشكل التالي
Your code was not in the correct format
يمكنك تحميل صفحة فيها المثال من هذا الرابط messages-in-css.zip
S.Wanderer قال :
حبيت أشكرك على هالدرس الجميل جداً
طريقة تجعل الموقع محبب للقلب وعمليّ اكثر.
بارك الله فيك واتمنى ان ارى المزيد من التلميحات الجميلة حول تصميم المواقع.
RedMan قال :
شكراً لمرورك و كلماتك التي تزيد من تشجيعي على الاستمرار قريباً أن شاء الله ستجد الكثير من مواضيع تطوير مواقع الويب .