للاسف هذه المدونة اصبحت ارشيف فقط، لمتابعة جديد مقالاتي يرجى زيارة موقعي الشخصي BassamShhadat.com

إعداد رسائل الأخطاء و الرسائل التحذيرية في CSS

عندما نقوم بتصميم صفحات الويب نحتاج كثيراً لعرض رسائل أخطاء أو رسائل تحذيرية عند إدخال معلومات خطأ في نموذج الإرسال أو إتباع رابط خطأ أو رسائل ترحيبية عند دخول صفحة معينة أو دخول لوحة التحكم في سكريبت معين, عندما نستخدم 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 بالشكل التالي

erorrYour code was not in the correct format

يمكنك تحميل صفحة فيها المثال من هذا الرابط messages-in-css.zip



4 تعليقات to “ “إعداد رسائل الأخطاء Ùˆ الرسائل التحذيرية في CSS”

  1. يقول S.Wanderer:

    حبيت أشكرك على هالدرس الجميل جداً

    طريقة تجعل الموقع محبب للقلب وعمليّ اكثر.

    بارك الله فيك واتمنى ان ارى المزيد من التلميحات الجميلة حول تصميم المواقع.

  2. يقول RedMan:

    شكراً لمرورك و كلماتك التي تزيد من تشجيعي على الاستمرار قريباً أن شاء الله ستجد الكثير من مواضيع تطوير مواقع الويب .

  3. السلام عليك
    اشكرك جزيل الشكر
    لأسف رابط التحميل لا يعمل

  4. يقول samir alemam:

    .search about some one to learn me towday i
    found hem

اضف تعليق