النتائج 1 إلى 7 من 7
الموضوع:

توسيط محتويات الصفحة الرئيسية

الزوار من محركات البحث: 242 المشاهدات : 1889 الردود: 6
جميع روابطنا، مشاركاتنا، صورنا متاحة للزوار دون الحاجة إلى التسجيل ، الابلاغ عن انتهاك - Report a violation
  1. #1
    من المشرفين القدامى
    قيصر
    تاريخ التسجيل: December-2010
    الدولة: سورية
    الجنس: ذكر
    المشاركات: 559 المواضيع: 141
    التقييم: 156
    مزاجي: خائف على أهلي وبلدي
    موبايلي: Nokia 701
    آخر نشاط: 9/September/2012

    توسيط محتويات الصفحة الرئيسية

    على طلب الغالي سامر بأن أضع هذه المشكلة التي ليست كبيرة جداً ولكنها مهمة وربما تصيب الكثير من أصحاب المواقع والمنتديات


    المشكلة وهي عدم توسط محتويات الصفحة الرئيسية .


    وماأقصده في الصورة التالية (لاحظوا قائمة الأقسام عندي غير موسطة في نصف الصفحة تمام )




    طبعاً حوالت بيها بكل قوتي وبكل الطرق عن طريق الفرونت بيج ولكن لم تنجح .


    وهذا هو كود الصفحة بأكمله مع تغيير روابط منتداي


    كود PHP:
    <!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>
    <
    meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
    <
    title>الصفحة الرئيسية</title>
            <
    meta name="keywords" content="الكلمات الدلالية هنا">
    <
    meta name="description" content="وصف الموقع هنا">
            <
    link rel="stylesheet" type="text/css" href="style.css" />

    </
    head>

    <
    body>
    <
    div class="m1">
    <
    div class="m2">
        <
    p align="center">&nbsp;</div>
    <
    div class="m3">
    <
    p align="center">&nbsp;</div>
    </
    div>
    <
    div id="m-l-nt">
    <
    ul>
       <
    li>
        <
    p align="center">
        <
    a href="http://www.******.com/vb/forum.php">المنتدى</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/misc.php?do=showrules">القوانين</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/register.php">التسجيل</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/usercp.php">التحكم</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/search.php">بحث</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/sendmessage.php">الإتصال 
        بنا
    </a></li>
    </
    ul>
    </
    div>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    div class="s2">لتصفح أفضل</div>
    <
    div class="s1"><ul class="learnnt_s1">
    <
    li ><a href="http://www.mozilla.com/en-US/firefox/">Fire Fox</a></li>
    <
    li ><a href="http://www.google.com/chrome">Google Chrome</a></li>
    <
    li ><a href="http://www.apple.com/safari/download">Safari</a></li>
    <
    li ><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie">Internet Explorer8</a></li>
                                    </
    ul>
    <
    br/>
    <
    img  alt="" src="images/l-nt2_08.png"/>
    </
    div>
    <
    div class="s3"></div>
    <
    p align="center">&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    div class="page">

    <
    div class="bb" style="width: 757px; height: 318px">
    <
    div class="h-tmdd">
    <
    div class="h-left"></div>
    <
    div class="h-right"></div>
    <
    div class="cc"><img src="images/menu.png" alt=""/></div>
    </
    div>
    <
    div class="body-bg">
    <
    div class="body-left">
    <
    div class="body-right">

    <
    table style="width: 100%;" cellpadding="0">
                <
    tbody><tr>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=14">
    المنتدى العام</a></span></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=4">
    المناسبات</a> </span></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=52">الغرفة الإجتماعية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=49">الترحيب بالأعضاء</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=5">العيادة النفسية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=15">العلوم والصحة</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=51">التاريخ والجغرافيا</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=44"><span lang="ar-sy">ا</span>لرجل 
    ومواضيعه
    </a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=6">المكتبة العلمية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=16">الشعر والأدب</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=56">نشرة الأخبار</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=17">الغرائب والعجائب</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=35">تطوير المواقع</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=38">
                                        
    الدين الإسلامي</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=41">
                                        
    الأحاديث الضعيفة</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=30">
                                        
    الألعاب والمسابقات</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td>
                                    <
    p>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=43">المرأة ومواضيعها</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=11">المرأة والجمال</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=19">الرياضة وأخبارها</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=21">الصور والفيديو</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td>
                                    <
    p>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=22">
    إضحك معنا</a></li
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=45">
    التصميم والرسم</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=32">&nbsp;الإنترنت والبرمجة</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=55">استخدام المنتدى</a></li>
                                    </
    ul>
                                    </
    td>
                                </
    tr>
                            </
    tbody></table>

    </
    div>
    </
    div>
    </
    div>
    <
    div class="f-tmdd">
    <
    div class="f-left"></div>
    <
    div class="f-left4"></div>

    <
    div class="f-right"></div>
    </
    div>
    </
    div>
    &
    nbsp;<p>&nbsp;</p>
    <
    p>&nbsp;</div>
    <
    div class="f1">
    <
    div class="f2">
        <
    p align="center"></div>

    <
    div class="f3" style="width: 391px; height: 200px">
        <
    p align="center">&nbsp;</div>

    </
    div>
    </
    body>

    </
    html



    بانتظار آراء الخبراء

  2. #2
    Ibn Alforat
    Ibn-Alforat
    تاريخ التسجيل: March-2010
    الدولة: Iraq - Alkut
    الجنس: ذكر
    المشاركات: 3,626 المواضيع: 631
    صوتيات: 31 سوالف عراقية: 4
    التقييم: 1244
    مزاجي: Terrible
    آخر نشاط: منذ 4 يوم
    مقالات المدونة: 1
    العزيز قيصر
    مكان الاقسام حسب التصميم في مكانه ليس فيه اي خلل
    ولكن الشريط الي فوك الاقسام الي بيه المنتدى واتصل بنا والتسجيل والتحكم وغيرها
    في تصميم ها لم تبدا من اليمين الى اليسار لذلك ظهرت في اليسار الان
    اذا حاول تجرت هذا الكود احتفظ بالقديم اخي قيصر
    كود PHP:
    <!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" dir="rtl">

    <
    head>
    <
    meta content="text/html; charset=windows-1256" http-equiv="Content-Type" />
    <
    title>الصفحة الرئيسية</title>
            <
    meta name="keywords" content="الكلمات الدلالية هنا">
    <
    meta name="description" content="وصف الموقع هنا">
            <
    link rel="stylesheet" type="text/css" href="style.css" />

    </
    head>

    <
    body>
    <
    div class="m1">
    <
    div class="m2">
        <
    p align="center">&nbsp;</div>
    <
    div class="m3">
    <
    p align="center">&nbsp;</div>
    </
    div>
    <
    div id="m-l-nt">
    <
    ul>
       <
    li>
        <
    p align="center">
        <
    a href="http://www.******.com/vb/forum.php">المنتدى</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/misc.php?do=showrules">
        
    القوانين</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/register.php">التسجيل</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/usercp.php">التحكم</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/search.php">بحث</a></li>
        <
    li>
        <
    p align="center"><a href="http://www.******.com/vb/sendmessage.php">الإتصال 
        بنا
    </a></li>
    </
    ul>
    </
    div>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    p align="center">&nbsp;</p>
    <
    div class="s2">لتصفح أفضل</div>
    <
    div class="s1"><ul class="learnnt_s1">
    <
    li ><a href="http://www.mozilla.com/en-US/firefox/">Fire Fox</a></li>
    <
    li ><a href="http://www.google.com/chrome">Google Chrome</a></li>
    <
    li ><a href="http://www.apple.com/safari/download">Safari</a></li>
    <
    li ><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie">
    Internet Explorer8</a></li>
                                    </
    ul>
    <
    br/>
    <
    img  alt="" src="images/l-nt2_08.png"/>
    </
    div>
    <
    div class="s3"></div>
    <
    p align="center">&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    p>&nbsp;</p>
    <
    div class="page">

    <
    div class="bb" style="width: 757px; height: 318px">
    <
    div class="h-tmdd">
    <
    div class="h-left"></div>
    <
    div class="h-right"></div>
    <
    div class="cc"><img src="images/menu.png" alt=""/></div>
    </
    div>
    <
    div class="body-bg">
    <
    div class="body-left">
    <
    div class="body-right">

    <
    table style="width: 100%;" cellpadding="0">
                <
    tbody><tr>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=14">
    المنتدى العام</a></span></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=4">
    المناسبات</a> </span></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=52">الغرفة الإجتماعية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=49">الترحيب بالأعضاء</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=5">العيادة النفسية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=15">العلوم والصحة</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=51">التاريخ والجغرافيا</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=44"><span lang="ar-sy">
    ا</span>لرجل ومواضيعه</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=6">المكتبة العلمية</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=16">الشعر والأدب</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=56">نشرة الأخبار</a></li>
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=17">الغرائب والعجائب</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li><a href="http://www.******.com/vb/forumdisplay.php?f=35">تطوير المواقع</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=38">
                                        
    الدين الإسلامي</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=41">
                                        
    الأحاديث الضعيفة</a></li>
                                        <
    li>
                                        <
    a href="http://www.******.com/vb/forumdisplay.php?f=30">
                                        
    الألعاب والمسابقات</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td>
                                    <
    p>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=43">المرأة ومواضيعها</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=11">المرأة والجمال</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=19">الرياضة وأخبارها</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=21">الصور والفيديو</a></li>
                                    </
    ul>
                                    </
    td>
                                    <
    td>
                                    <
    p>
                                    <
    td width="120">
                                    <
    ul class="al7rbily_navigations">
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=22">
    إضحك معنا</a></li
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=45">
    التصميم والرسم</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=32">&nbsp;الإنترنت والبرمجة</a></li>
    <
    li>
    <
    a href="http://www.******.com/vb/forumdisplay.php?f=55">استخدام المنتدى</a></li>
                                    </
    ul>
                                    </
    td>
                                </
    tr>
                            </
    tbody></table>

    </
    div>
    </
    div>
    </
    div>
    <
    div class="f-tmdd">
    <
    div class="f-left"></div>
    <
    div class="f-left4"></div>

    <
    div class="f-right"></div>
    </
    div>
    </
    div>
    &
    nbsp;<p>&nbsp;</p>
    <
    p>&nbsp;</div>
    <
    div class="f1">
    <
    div class="f2">
        <
    p align="center"></div>

    <
    div class="f3" style="width: 391px; height: 200px">
        <
    p align="center">&nbsp;</div>

    </
    div>
    </
    body>

    </
    html

  3. #3
    المدير الفني للموقع
    تاريخ التسجيل: January-2010
    الدولة: بغداد &
    الجنس: ذكر
    المشاركات: 17,392 المواضيع: 1,088
    صوتيات: 71 سوالف عراقية: 328
    التقييم: 9783
    مزاجي: روبوت
    المهنة: <dev></dev>
    أكلتي المفضلة: مربى وخبز &
    آخر نشاط: منذ 16 ساعات
    الاتصال: إرسال رسالة عبر Yahoo إلى Samer
    لا تعتقد إن التوسيط دائما سهل .. او التموضع بصورة عامة سهل بأي جزء او جهة من بالصفحة .. اكو اساليب بالـ CSS تعلمتها قبل فترة بهذا الخصوص لذلك كتلك انشر الموضوع

    اصبرلي اوك .. ارجع ارد عل موضوع

  4. #4
    المدير الفني للموقع
    السلام عليكم

    بدل هذا


    كود HTML:
    <div class="page">
    
    <div class="bb" style="width: 757px; height: 318px">
    بهذا

    كود HTML:
    <div class="page" style="margin-left: 200px;">
    
    <div style="width: 757px; height: 318px; margin-left: auto; margin-right: auto;" class="bb">

  5. #5
    من المشرفين القدامى
    قيصر
    في البداية شكراً لكما جزيل الشكر صديقي حازم وصديقي سامر بارك الله بكما ..


    أما عن خطوة أخي حازم فأعتزر منك صديقي الغالي لم تنجح العملية والمريض مازال مريضاً ..


    أما خطوة سامر بيك ماشاء الله عليك نعم صديقي الكريم تم الأمر بنجاح وقام المريض بخير وسلامة . ولكن هل لك بأن تخبرنا ماهو السر ؟؟؟!! كي نستفيد جميعاً ..


    شكراً لكما مرة أخرى بحق انتما رائعيييييين

  6. #6
    المدير الفني للموقع
    يا عيني .. لا سر و لا شي .. التغيير اللي سويته يشرح نفسه لأي شخص يعرف قواعد الـ CSS

    الطبقة page عندك (حسب style.css) مخللين حافتها اليمنى تبدأ من 200 بكسل (حسب ملف style.css) ، لذلك حددت إلها حافة من اليسار كذلك 200 بكسل علمود اوسطها في منتصف المتصفح

    الطبقةاللي بداخلها اللي تحتوي على الأقسام مجرد كانت تحتاج إلى توسيط (بالنسبة إلى الطبقة اللي قبلها) لذلك أعطيتها margin من اليسار و اليمين تلقائية auto و هذا يخلليها في وسط الطبقة اللي قبلها (اللي خلليناها بالوسط بالخطوة السابقة)

    بس ليش حذفت كود ملف style.css ؟؟ خطواتي اللي عملتها اعتمدت عليه بصورة مباشرة .. بدونه ما كان ممكن اعرف وين الخلل علمود اعالجه

    لاحظ .. إعطاء ستايل css للعناصر بالصفحة يكون عبر ثلاث طرق

    1- استدعاء ملف CSS خارجي بداخل الـ head مثل ما موجود بحالة الصفحة مالتك
    2- كتابة كود CSS مباشرة داخل الـ head
    3- تحديد كود CSS مباشرة مع العنصر و هو ما يعرف بالـ inline style و هو هذا اللي سويته اني

    الاولوية للطريقة الثالثة، بعدها للثانية بعدها للأولى يعني لو كان عنصر إله قاعدة بالاولى و قاعدة بالثالثة، راح يتبع القاعدة اللي بالثالثة

    تحياتي

  7. #7
    صديق جديد
    تاريخ التسجيل: December-2019
    الجنس: ذكر
    المشاركات: 1 المواضيع: 0
    التقييم: 1
    آخر نشاط: 9/January/2019
    اقتباس المشاركة الأصلية كتبت بواسطة Samer مشاهدة المشاركة
    السلام عليكم

    بدل هذا


    كود HTML:
    <div class="page">
    
    <div class="bb" style="width: 757px; height: 318px">
    بهذا

    كود HTML:
    <div class="page" style="margin-left: 200px;">
    
    <div style="width: 757px; height: 318px; margin-left: auto; margin-right: auto;" class="bb">
    السلام عليكم أخي هل يمكنك مساعدتي في توسيط قائمة الأقسام






    كود html
    كود HTML:
    <ul class='orion-menu'>
       
    <li><a href='https://www.******/' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-home' style='font-size:1.2em;'/>
    الرئيسيـة</span></a></li>
       <li><a href='https://www.*******.com/search/label/%D8%A7%D9%84%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-laptop' style='font-size:1.2em;'/>
    الكمبيــوتــر</span></a></li>
    <li><a href='https://www.******.com/search/label/التلفاز?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-tv' style='font-size:1.2em;'/>
    التلفــاز</span></a></li>
       <li><a href='https://www.*****.com/search/label/%D8%A7%D9%84%D9%87%D8%A7%D8%AA%D9%81?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-mobile-alt' style='font-size:1.2em;'/>
    الهــاتف</span></a></li>
       <li><a href='https://www.*******.com/search/label/%D8%A7%D9%84%D8%B1%D8%B3%D8%B1%D9%81%D8%B1?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='far fa-hdd' style='font-size:1.2em;'/>
    الرسرفــر</span></a></li>
      <li class='menu-button'><a class='dropdown-toggle parent' href='javascript:void(0)'>
    <i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
    سرفرات</a>
        <ul class='menu-dropdown'>
       <li><a href='https://www.********.com/search/label/IPTV?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
    IPTV</span></a></li>
       <li><a href='https://www.*******.com/search/label/Cccam?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='fas fa-server' style='font-size:1.2em;'/>
    Cccam</span></a></li>
         </ul>
    </li>
       <li><a href='https://www.******.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A3%D9%86%D8%AA%D8%B1%D9%86%D8%A7%D8%AA?&amp;max-results=9' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='far fa-money-bill-alt' style='font-size:1.2em;'/>
    الربح من الأنترنــات</span></a></li>
       <li><a href='https://www.********.com/search/label/%D8%A7%D9%84%D8%A8%D8%B7%D8%A7%D9%82%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D8%B5%D8%B1%D9%81%D9%8A%D8%A9?&amp;max-results=9 ' itemprop='url' title=''><span itemprop='name'>
    <i aria-hidden='true' class='far fa-caret-square-left' style='font-size:1.2em;'/>
    البطاقات المصرفية</span></a></li>
        </ul>
    css
    كود HTML:
    .orion-menu{
       width: 100%;
     position: relative;
     float: right;
     background: #0097a7;
     list-style: none;
     top: -13px
    }
    .orion-menu li {
     display: inline-block;
     font-size: 15px;
     margin: 0px;
     padding: 0;
     float: right;
     line-height: 20px;
     position: relative;
    }
    .orion-menu li a {
     padding: 27px 22px 20px;
     color: #ffffff;
     text-decoration: none;
     display: inline-block;
     -o-transition: color .3s linear, background .3s linear;
     -webkit-transition: color .3s linear, background .3s linear;
     -moz-transition: color .3s linear, background .3s linear;
     transition: color .3s linear, background .3s linear; 
    }
    .orion-menu li:hover > a{
     color: #fff;
    }
    .orion-menu li.active > a{
     background: #555555;
    }
    .orion-menu > li > a {
     text-transform: uppercase;
    }
    
    /* DROPDOWN */
    .orion-menu ul, 
    .orion-menu ul li ul {
     list-style: none;
        margin: 0;
        padding: 0;    
     display: none;
        position: absolute;
        z-index: 999;
     width: 150px;
     background: #12aebd;
    }
    .orion-menu ul{
        top: 68px;
        right: 0;
    }
    .orion-menu ul li ul{
        top: 0;
        right: 150px;
    }
    .orion-menu ul li{
     clear:both;
     width:100%;
     font-size:14px;
    }
    .orion-menu ul li a {
     width:100%;
     padding:12px 22px;
     display:inline-block;
     float:right;
     clear:both;
     box-sizing:border-box;
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box;
    }
    .orion-menu ul li:hover > a{
     background: #555555;
    }
    
    /* DROPDOWN ARROWS*/
    .orion-menu .indicator{
     color: #bababa;
     position: absolute;
     left: 8px;
     top: 30px;
     font-family: 'FontAwesome';
     font-size: 12px;
    }
    .orion-menu .indicator:before{
     content: "\f0d7";
    }
    .orion-menu ul li .indicator{
     left: 20px;
     top: 13px;
    }
    .orion-menu ul li .indicator:before{
     content: "\f0da";
    }
    
    
    /* SOCIAL ICONS*/
    .orion-menu li.social{
     float: left;
     margin-left: 20px;
    }
    .orion-menu li.social a{
     display: inline-block;
     padding: 24px 6px 24px;
     color: #bababa;
     position: relative;
     width: 15px;
     text-align: center;
    }
    .orion-menu li.social a:hover{
     color: #fff;
    }
    .orion-menu li.social a .tooltip{
     width: 70px;
     padding: 5px;
     background: #555555;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     opacity: 0;
     position: absolute;
     font-size: 9px;
     top: -20px;
     left: -27px;
     border-radius: 2px;
     text-align: center;
     -o-transition: opacity .3s linear;
     -webkit-transition: opacity .3s linear;
     -moz-transition: opacity .3s linear;
     transition: opacity .3s linear;
    }
    .orion-menu li.social a:hover .tooltip{
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     opacity: 1;
    }
    .orion-menu li.social a .tooltip:before,
    .orion-menu li.social a .tooltip:after{
     content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        margin-left: -7px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #555555;
    }
    
    
    /* COLLAPSIBLE CONFIGURATION */
    .orion-menu > li.showhide{
     display: none;
     width: 100%;
     height: 50px;
     cursor: pointer;
     color:  #ffffff;
     background: #0097a7;
    }
    .orion-menu > li.showhide span.title{
     margin: 16px 0 0 18px;
     float: right;
    }
    .orion-menu> li.showhide span.icon{
     margin: 17px 0px;
     float: left;
    }
    .orion-menu > li.showhide .icon em{
     margin-bottom: 3px;
     display: block;
     width: 20px;
     height: 2px;
     background: #fff;
    }
    /* blue */
    .blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; }
    .blue li a, .orion-menu li.social a{ color: #dedede; }
    .blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; }
    .blue li.search form input.search:focus{ background-color: #009fb4; }
    .blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; }
    
    @media only screen and (max-width: 1024px) {
    .orion-menu {
        width: 100%;
        padding: 0px 0px 0px 0px;
        position: relative;
        float: right;
        background: #0097a7;
        list-style: none;
        top: -13px;}
    .orion-menu li a {
        padding: 27px 5px 20px;;}
    .orion-menu .indicator {
        color: #bababa;
        position: absolute;
        left: 25px;
        top: 50px;
        font-family: 'FontAwesome';
        font-size: 12px;
    }
    }
    
    
    @media only screen and (max-width: 768px) {
     .orion-menu{
      padding: 0px 15px;
      display: block;
     } 
     .orion-menu li{
      display: block;
      width: 100%;
     }
     .orion-menu > li > a{
      padding: 16px 70px 16px 18px;
      text-align: right;
      border-top: solid 1px rgba(255, 255, 255, 0.05);
      box-sizing:border-box;
      -moz-box-sizing:border-box; 
      -webkit-box-sizing:border-box;
     }
     .orion-menu a{
      width: 100%;
      box-sizing:border-box;
      -moz-box-sizing:border-box; 
      -webkit-box-sizing:border-box; 
     }
     .orion-menu ul, 
     .orion-menu ul li ul{
      width: 100%;
      left: 0;
      padding: 0 20px;
      position: static;
      box-sizing:border-box;
      -moz-box-sizing:border-box; 
      -webkit-box-sizing:border-box; 
     }
     .orion-menu .indicator{
      left: 20px;
      top: 18px;
     }
     .orion-menu ul li .indicator{
      display: block;
     }
     .orion-menu ul li .indicator:before{
      content: "\f0d7";
     }
     .orion-menu li.search{
      border-bottom: none;
     }
     .orion-menu li.search form{
      margin: 20px 18px 0 18px;
     }
     .orion-menu li.search form input.search,
     .orion-menu li.search form input.search:focus{
      width: 100%;
      color: #fff;
      background-color: #555555;
      background-position: 99% 8px;
      cursor: auto;
      box-sizing:border-box;
      -moz-box-sizing:border-box; 
      -webkit-box-sizing:border-box; 
     }
     
     .orion-menu li.social a{
      display: inline;
      padding: 8px 15px 8px 15px;
      border: none;
     }
     .orion-menu li.social a:hover{
      color: #fff;
     }
     .orion-menu li.social a:hover .tooltip{
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      opacity: 0;
     }
     .orion-menu > li.showhide{
      display: block;
     }
    }
    ​

تم تطوير موقع درر العراق بواسطة Samer

قوانين المنتديات العامة

Google+

متصفح Chrome هو الأفضل لتصفح الانترنت في الجوال