ماسبب ظهور الشريط الأفقي وزيادة مساحة عرض الصفحة في مشروعي ؟

ماسبب ظهور الشريط الافقي وزيادة عرض الصفحة كما هو واضح أسفل يسار الشاشة

رغم ان مقاس الصفحة

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

التعليقات

جزر .. بدون كود الاجابة جزر :)

لم افهم اخي؟

صعب التخمين بدون الكود لكن جرب اضافة هذا

* {
   box-sizing: border-box;
 }

صعب التخمين بدون الكود

هذا ملف المشروع صديقي اذا اردت مساعدتي

جزاك الله خيرا

تفضل ملف style.css

ملاحظة لاتضع @import لملف css اخر داخل وسم body بل تكون في اعلي الملف

@import url("

http://fonts.googleapis.com... "); @import url(" http://fonts.googleapis.com... ");

body {
    background-color:#e9e8e8;
    font-family: 'Droid Arabic Kufi', serif;
    margin: 8px 0;
    overflow-x: hidden;
}

#wrapper {
    width:1170px;
    margin:0 auto;
}

.clear {
clear:both;
}

.float-right {
float:right;
}

.float-left {
float:left;
}

#eng-clock {
font-family: 'Open Sans', sans-serif;
}

#clock {

}

#hm-top {
padding-top: 15px;
padding-right: 30px;
font-family: 'Droid Arabic Kufi', serif;
color:#ffffff;
width:1140px;
height:45px;
margin-top:0px;
background-color:#ab46b7;
font-size:14px;
}

#hm-logo {
padding-top:15px;
width:1170px;
height:130px;
margin-top:0px;
background-color:#ffffff;
}

#hm-logo img {
margin-right:580px;
margin-left:579px;
}


#hm-menu {
padding-top:15px;
width:1170px;
height:45px;
background-image:url(../images/menu.png);
}

#left  a {
margin-left:30px;
}

#right a {
width:500px;
text-align:center;
text-decoration:none;
color:#353a3d;
margin-right:30px;
}
#right a:hover {
color:#ab46b7;
}

#hm-menu .current {
color:#ab46b7;
}

اشكرك كثيرا اخي العزيز على تعديلك وعلى ملاحظتك التي نصحتني بيها

، لدي سؤال إن لم يكن لك مانع :

كيف ازيل هذا الفراغ من الاعلى ؟؟ ، وضعت

margin-top:0px;

ولكن لازال مثلما هو ، #تحياتي لك

عدل

body {
   background-color:#e9e8e8;
   font-family: 'Droid Arabic Kufi', serif;
   margin: 8px 0;
  overflow-x: hidden;

}

الي

body {
   background-color:#e9e8e8;
   font-family: 'Droid Arabic Kufi', serif;
   margin: 0;
  overflow-x: hidden;

}

في اول الملف

شكر لك قد نجحت ومنك نستفيد

عليك ان تعمل بالنسب المئوية

لذلك عوض

width:1170px;

ب width:100%;

كما ان هذا سيجعل الموقع متجاوب بدون اطر عمل

(هذا ما اقوم به في كل مشاريعي)

أخي أشكرك أولا

لكن ماقصدته بـ

width:1170px;

هو هذا :


*وللعلم هذا المشكلة حدثت لي بعد أن قمت بإضافة السلايدر "سلايد شو" وايضا تأكدت من ملف css المخصص للسلايدر أن أجعل حجمه width:1170px;

جرب ان تعدل Width ب 1165

او قيم اصغر قليلا:)

جرب ان تعدل Width ب 1165

جربت حتى الى 1155 مع ملف css للسلايدر ولم يحدث شيئ

من الممكن ان تكون المشكلة في أحد margin

شكرا لك على كل حال صديقي

هل هو سلايدر جاهز ، بمعنى Jquery Plugin ؟

اذا كان كذلك ارسل لي اسمه، قد اجد شيئا.

;)

هو برنامج اسمه WOW Slider يقوم بعمل السلايدر كما تقوم انت بضبط اعدادته جربت ان اضبط اعداداته على 1170px عرضا و 592px طولا

وقمت بعمل "نشر" داخل ملف السيرفر الشخصي لمشروعي ونسخت كود html ووضعته في index كل شي ظهر 100% حتى السلايدر مضبوط تماما لكن أزداد عرض الصفحة 10px تقريبا

لا اعلم ما نوع هذا السلايدر (يتطلب التثبيت !)

ماذا عن احجام الDivs الاخرى؟

هل رفعته الى احد مواقعك لنستطيع رؤيته عن قرب؟

هو برنامج تثبته في جهاز وتقوم بفته وتصنع عن طريقة السلايدر الخاص بك وهو يعطيك الملف كاملا يحتوي على ملفات css والصور وملفات الجافا وكود html

تم حل المشكلة عزيزي بإضافة :

overflow-x: hidden;

غالبا ما تسبب حركات "السلايدر" خللا في حساب العرض

سبق وأن واجهت مثل هذه المشكلة عدة مرات ودائما أجد الحل متعلق بالتوجيه right left

الجافاسكربت تحسب الهامش من اليسار دائما ومعروف أن البكسل 0 موجود على يسار الشاشة

لذلك انصحك بالبحث في ملفات السلايدر cssو js عن كلمة left وغيرها الى right لعلك تنجح

كلامي هذا غير مبني على شيء إلا الصورة المرفقة

إن كنت جادا في طلب المساعدة أرفق لنا الكود

أرجو أن تكون إجابتي أفضل من "الجزر"

لازلت لم افهم هاته الجزرة،اجابة افضل منها هه.

حاولت تعديل جميع left الى right في ملف css لكن السلايد لم ظهر بطريقة صحيحة ومع هذا لازالت المشكلة كما هي

بارك الله فيك على المحاولة اخي محمد

إن كنت جاد بطلب المساعدة أرفق لنا الكود

هذا ملف المشروع البرمجي ان اردت مساعدتي اخي بارك الله فيك

تم حل المشكلة بإضافة :

overflow-x: hidden;

داخل body

مشكور على المحاولة اخي محمد

اخي ادخل على اعداد ملف سلايد من خلال css قم تصفير قيم margin,padding او تضعه داخل div وتعطي هذا div قيمه max-width وتحدد له القيمه المناسبه

افضل حل تستخدم firebug وتحل المشكله امام عينك بسرعه وتشاهد ماهو العنصر يجعل صفحه تمدد

اذا استمرت المشكله شوف لك سلايد ثاني يوجد المئات

بدون مثال حي للمشكلة صعب التخمين لكن يمكنك استخدام هذا الكود كحل مؤقت

  body {
    width:1170px;
    overflow-x: hidden;
  }

شكرا لك كثيرا اخي فعلا نجح الكود خاصتك لكن هناك مشكلة الصفحة قامت بالمحاذاة الى اليمين :

لذلك قمت بحذف :

width:1170px;

وتم توسيط الصفحة وظهر كل شي 100%

جزاك الله خيرا تحياتي لك

إذا أردت تحديد عرض محدد مع توسيط المحتوي

body {
width:1170px;
overflow-x: hidden;
margin:0 auto;
}

بالتوفيق وفي الخدمة لأي إستفسار