مواقع مفضّلة: وصفات طبخ كوكتيل

النتائج 1 إلى 4 من 4

الموضوع: الدرس السادس عشر من دورة css - المحاذاة الأفقية - Horizontal Alignment

  1. #1
    الصورة الرمزية bringy
    تاريخ التسجيل : Dec 2011
    رقم العضوية : 30217
    الاقامة : مصر
    الجنس : شركة اخرى
    الجنسية : 512 Kbps
    المشاركات : 3,359
    My SMS : D-LINK G604T
    انا دلوقتى نايــم
    معدل تقييم المستوى : 182
    Array

    افتراضي الدرس السادس عشر من دورة css - المحاذاة الأفقية - Horizontal Alignment


    المحاذاة الأفقية - Horizontal Alignment


    تعرفنا فى الدروس السابقة على الخاصية text-align والخاصة بضبط محاذاة النصوص فقط وأيضا تعرفنا على ضبط المحاذاة الرأسية للعناصر من خلال الخاصية vertical-align
    ولو لاحظنا سنجد أنه لا يوجد خاصية خاصة بضبط المحاذاة الأفقية للعناصر ولكن يمكنك فعل ذلك بالطرق التالية:

    - أولا توسيط عنصر داخل عنصر آخر عن طريق الخاصية(margin):
    وذلك بإعطاء القيمة auto للهامش الأيمن والهامش الأيسر للعنصر الذى نريد توسيطه بهذا الشكل:
    كود css:
    كود:
    .yellow { background-color:yellow; width:100%; height:50px; } .red { width:100px; height:50px; background-color:red; margin-right:auto; margin-left:auto; }
    كود html :
    كود:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>بوابة إنجاز التقنية</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="yellow">
    <div class="red"></div>
    </div>
    </body>
    </html>
    وهذا موضع العنصر بعد العرض في المتصفح :

    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=122822
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=122822

    فى هذا المثال تم توسيط العنصر الذى باللون الأحمر داخل العنصر الذى باللون الأصفر من خلال إعطاء القيمة auto للهامش الأيمن والأيسر للعنصر الأحمر .



    ملحوظة(1): القيمة auto لا تعمل على المتصفح إنترنت إكسبلورر 8 وماسبقه إلا عندما يكتب سطر التعريف !DOCTYPE ... للتعرف على سطر التعريف يرجى قراءة هذا الموضوع الخاص بلغة xhtml


    ملحوظة (2): لا تعمل هذه الطريقة إذا كان عرض العنصر الذى نريد توسيطه 100%

    ملحوظة (3): لا يمكن إستخدام هذه الطريقة فى توسيط كل العناصر وإنما العناصر block element فقط وقد تعرفنا عليها مسبقا ... بمعنى أنه لا يمكن إستخدام هذه الطريقة مع الصور على سبيل المثال

    إذا أردت توسيط عنصر inline element (صورة على سبيل المثال) داخل عنصر آخر
    يمكنك فعل ذلك عن طريق وضع الصورة داخل عنصر block element ثم توسيطه بالطريقة السابقة بهذا الشكل:

    كود css :

    كود:
    .yellow { background-color:yellow; width:100%; height:100px; } .red { width:100px; height:100px; background-color:red; margin-right:auto; margin-left:auto; } .image { width:100px; height:100px; }

    كود html :

    كود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>بوابة إنجاز التقنية</title>
    <meta http-equiv="Content-Type" content="text/html; 
    charset=utf-8" />
    <link href="style.css" rel="stylesheet" 
    type="text/css" />
    </head>
    <body>
    <div class="yellow">
    <div class="red">
    <image src="enjaz.png" class="image">
    </div>
    </div>
    </body>
    </html>
    وهذا هو موضع الصورة عند العرض بالمتصفح:



    ملاحظة :عند توسيط الصورة بهذه الطريقة يجب أن يكون للعنصر الذى يتحويها نفس طول وعرض الصورة.


    وهناك شكل آخر للطريقة السابقة وذلك بجعل الصورة خلفية للعنصر الذى تم توسيطه بهذا الشكل :

    كود:
    .yellow {
    background-color:yellow;
    width:100%;
    height:100px;
    }
    .red
    {
    margin-right:auto;
    margin-left:auto;
    background-image:url('enjaz.png');
    height:100px;
    width:100px;
    }


    - ثانيا المحاذاة يمينا أو يسارا بإستخدام الخاصية( position):
    لجعل محاذاة العنصر جهة اليمين أو جهة اليسار يمكنك إستخدام الخاصية position بهذا الشكل :

    كود:
    image { position:absolute; right:0px; width:100px; height:100px; }
    وطبعا تعرفنا على هذه الخاصية بالتفصيل فى دروس سابقة.



    - ثالثا المحاذاة يمينا أو يسارا بإستخدام الخاصية (float):
    لجعل محاذاة العنصر جهة اليمين أو جهة اليسار يمكنك أيضا إستخدام الخاصية float بهذا الشكل :
    كود:
    image { float:right; width:100px; height:100px; }
    وأيضا قد تعرفنا على الخاصية float فى الدرس السابق بالتفصيل.



    ملاحظة :عند إستخدام الخواص position أو float فى ضبط محاذاة العناصر يفضل تحديد القيم margin ,padding للعنصر <body> وذلك لتجنب بعض المشاكل التى قد تحدث من بعض المتصفحات... وذلك كما يلى:

    كود:
    body { margin:0; padding:0; }

    إنتهى الدرس ...



  2. #2
    الصورة الرمزية 7abeb
    تاريخ التسجيل : Mar 2014
    رقم العضوية : 37811
    الاقامة : مصر

    افتراضي رد: الدرس السادس عشر من دورة css - المحاذاة الأفقية - Horizontal Alignment

    بارك الله فيك أخي الغالي ماشاء الله شرح بسيط ومفيد
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=216070
    الموضوع الأصلى من هنا: بوابة إنجاز التقنية | خاصة بـ DSL و التقنية و الشبكات http://www.enjaztech.com/vb/showthread.php?p=216070
    تقبل تحياتي

  3. #3
    الصورة الرمزية jiklfox
    تاريخ التسجيل : Mar 2014
    رقم العضوية : 37816
    الاقامة : أرض الله الواسعة

    افتراضي رد: الدرس السادس عشر من دورة css - المحاذاة الأفقية - Horizontal Alignment

    مشكور على الموضوع
    بارك الله فيك

  4. #4
    الصورة الرمزية fmounirf
    تاريخ التسجيل : Jan 2013
    رقم العضوية : 33185
    الاقامة : المغرب

    افتراضي رد: الدرس السادس عشر من دورة css - المحاذاة الأفقية - Horizontal Alignment

    شكرا على الدرس المفهوم

المواضيع المتشابهه

  1. [ برنامج ] : تطبيق Horizon – Horizontal videos مجانا لفترة محدودة
    بواسطة نونو2014 في المنتدى منتدى برامج آيفون IPhone Software
    مشاركات: 1
    آخر مشاركة: 03-17-2014, 12:38 AM
  2. [ شرح ] : ما المقصود بكلمة استقطاب أفقي Horizontal Polarization-Antenna Polarization
    بواسطة سمسمة في المنتدى منتدى اجهزة الـ DSL Modems | DSL
    مشاركات: 2
    آخر مشاركة: 02-18-2013, 08:50 PM
  3. Satellite Antenna Alignment برنامج لمعرفة كل شىء عن تركيب الاطباق وترددات الاقمار
    بواسطة رمز في المنتدى منتدى المشاركة [ Sharing ] وكروت الساتلايت بكل انواعها
    مشاركات: 6
    آخر مشاركة: 08-29-2011, 01:08 AM

الكلمات الدلالية لهذا الموضوع

المفضلات

المفضلات

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •