مشكلة صغيرة في CSS من فضلكم

هذا رابط الموقع الذي أقوم بتكويده

كيف من الممكن تعديله لتصبح الأيقونات على خط واحد مثل هذا

حيث أنني الآن إذا رفعت قيمة width تصبح على هذا الشكل

أيضا كيف من الممكن في حالة النافذة صغيرة أن يصبح العنوان في الأعلى علما أنه في الكود html هو الأخير ؟

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

مجهول
  • حذف بواسطة المستخدم

شكرا أخي بالفعل اشتغلت , لكن مازال هناك مشكل حيث أريد العمود الذي فيه الأيقونات أن يكون في وسط الصفحة تماما مهما كان طول العمودين الآخرين

مجهول
  • حذف بواسطة المستخدم

آسف أخي و لكن لم يشتغل

مجهول
  • حذف بواسطة المستخدم

صراحة أنا الآن في مرحلة تعلم لذا أحاول الإبتعاد عن الحلول السهلة :p

هل تعرف محترفا ذو خبرة هنا في arabia يمكنه حل المشكل ؟

مجهول
  • حذف بواسطة المستخدم
#about table {
    text-align: justify;
    margin: auto;
    padding: 10px 0;
    width: 50%;
}

#about table .td1 {
    text-align: right;
}

#about table div {
    background-color: #e2e0dd;
    height: 35px;
    width: 200px;
    display: inline-block;
}

#about table img {
    margin: auto;
    margin: 0 15px;
    position: relative;
    top: 15px;
}

#about table h3 {
    display: inline-block;
    margin: 0;
    font-weight: 400;
    font-size: 1.6em;
    position: relative;
    bottom: 7px;
    color: white;
}
مجهول
  • حذف بواسطة المستخدم

نعم ذلك هو المشكل . شكرا جزيلا لك أخي علي

لقد اكتشفت المشكل : يجب إضغفة display : block للأيقونات و أيضا يجب أن تكون قياسات العمودين الجانبيين متساوية

شكرا جزيلا لك

و أيضا أواجه مشكلة حين تصغير النافذة , ما العمل إذا أردت جعله متجاوب ؟

مجهول
  • حذف بواسطة المستخدم

نعم أخي أنا أستعمل media queries كما يمكنك أن ترى في الموقع , لكن لم تشتغل display : block