17

[مشكلة] لماذا تظهر مسافة فارغة في أعلى الصفحة؟

بينما أنا أنشئ صفحة.. حدثت مشكلة منذ يومين.. مشكلة بسيطة إلا أنها أرهقتني..

صممت تصميم عادي جدا يحتوي على :

*أعلى الصفحة

*محتوى الصفحة

*أسفل الصفحة

والصفحة تظهر لي كما أريد.. إلا أنها تترك مسافة بيضاء في بداية الصفحة..

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

http://madarisweb.com/binamjad

وبعد فشل جميع محاولات لجأت إليكم إخوتي المبدعين.. لعلي أجد حلا لمشكلتي هذه التي أرهقتني..

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

التعليقات

15
bml13 أضف ردا

المشكل عندك شيء زائد بع body قم بحذفه

ايضا قم بنقل link و meta الى خارج body و ضعم داخل head مباشرة بعد html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="styles/style1/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">....</div>
</body>
</html>
0
binamjad أضف ردا

أخي ما عندي شيء زائد بعد body

وكذلك meta and link موجودان خارج body و داخل head

هل يمكنك أن تخبرني ما هو هذا الشيء الزائد الذي تقصده.

تحياتي

2
assassinateur أضف ردا

نعم هذا ما لاحظته، هناك شيء زائد لا أعرف ماهو، ولا أستطيع إيجاده في ملف html لكنه يظهر في dev tools اضغط يمين على الصفحة في كروم واختر آخر خيار، ستجد فراغ بين قوسين، اضغط عليه واحذفه، وسترى الفرق

1
binamjad أضف ردا

نعم..

أنا أيضا لاحظته الآن بعد ما قلت..

يظهر عندي هكذا:

" "

ولكن ما هذا الشيء الغريب؟؟

والله أرهقني منذ ثلاث ليال!

2
assassinateur أضف ردا

أنا أبحث عن حل لهذا الأمر، حاليا الطريقة الوحيدة لإصلاحه هي باستخدام خدعة بسيطة

body {margin-top: -15px; }

لكن أنا أبحث عن مصدر المشكلة

1
binamjad أضف ردا

في نفس المكان في كروم الذي أشرت إليه، إذا ترى في الجهة اليمنى (عندي كروم عربي، ولا أدري في الإنجليزي في الجهة اليمنى أيضا أم في اليسرى)

وجدت هذا:

ولكن لا أعرف ما هذا؟

2
assassinateur أضف ردا

تبا أصلحت المشكلة ولكن لا أعرف كيف

لقد عدلت الملف إلى هذا الشكل

<html>
<head>
    <meta charset="UTF-8">
    <link href="styles/style1/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="wrapper">
    <div id="header">رأس الصفحة</div>
    <div id="content">
    الصفحة تظهر مسافة فارغة فوق.. بعد بداية body
    </div>
    <div id="footer">أسفل الصفحة</div>
    </div>
</body>
</html>

كل ما فعلته هو فتح ملف جديد، وضع الوسوم الأساسية باسخدام doc في emmet ونسخة محتوى الصفحة فيه، وانحلت المشكلة، نستطيع أن نجزم أنّ المشكلة تكمن في head أو الوسوم

1
binamjad أضف ردا

هذه المشكلة غريبة جدا..

ياليتني حصلت على سبب المشكلة..ومصدرها

حتى لا أقع فيها من جديد بعد وصولي إلى نصف أو آخر المشروع

أنا الآن في البداية.

2
محمد عودة أضف ردا

يا اخوان المشكلة ﻻ غريبة وﻻحاجة ... اﻻخ حشر اكواد ميتا بداخل جسم الصفحة(body) طبعا المتصحفات عمياء تقرأ كل شئ .. اعطتة مساحة بيضاء باﻻعلي . ..

عندما نقل اﻻخ اكواد ميتا الي قسم الرأس head اﻻمور رجعت لمجاريها ...

0
binamjad أضف ردا

أخي تم حل المشكلة بتمامها في هذا التعليق

من قبل الأخ نذير، وشكرا على تقديم مساعدتك

2
kjalajel أضف ردا

أظن يمكن حذف المسافة بإستخدام الـpaeding و margin

0
binamjad أضف ردا

ما كان ممكنا بأي طريقة من طرق css,html,java

لهذا كنت طرحت النقاش..

2
assassinateur أضف ردا

ألا يقرأ أحد الردود التي قبله؟

1
assassinateur أضف ردا

أظن أني اكتشفت المشكلة، أي محرر تستخدم

2
binamjad أضف ردا

ربما أتأخر في الرد لبضع دقائق.. حانت الصلاة عندي..

1
binamjad أضف ردا

أستخدم نوت باد بلس بلس

2
assassinateur أضف ردا

كحل مبدئي لست متأكدا منه، في الصفحة فوق في encoding اختر

UTF-8 without BOM

15
cenrak أضف ردا

أتوقع هذا الحل الصحيح.

قمت باستخدام wget لجلب الملف و هذا ما كان في بداية الملف: 

<feff><feff><feff><feff><feff><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

و feff هذه للـ BOM :

15
assassinateur أضف ردا

نعم عند التأكد جيدا في كود الصفحة وجدت أربع نقاط حمراء في dom ومكتوب فيها \ufeff وهو حرف خفي (بدون عرض) يسبب هذا الأمر

نقاش مشابه

2
راشد المري أضف ردا

ماشاء الله عليك يا نذير، بالمناسبة اجد فضول في نفسي يريد رؤية اعمالك، لو كان هناك مجال اطلعنا عليها في موضوع مستقل او اذا كان لديك موقع شخصي.

14
assassinateur أضف ردا

للأسف لا أعمال فعلية لي تستحق النشر، كلها تجارب، أو مشاريع وقوالب غير منتهية، هذه مشكلة واجهتني مع أول عميل لكنه تفهمها ووثق بي

وموقع شخصي، قريب سأفتتح موقعا ومن ضمنه مدونة لأضع ما في بالي من مقالات

أعمالي قد تكون بعض الخدع التي أقوم بها بواسطة pseudo في css، السبب قد يكون لأني مازلت مبتدئا في المجال ولا لم يمضي لي الكثير من أن دخلت في هذا المجال (8 شهور)

14
راشد المري أضف ردا

اتمنى لك التوفيق يارب. في علمك وعملك. واتوقع كثيراً مثلي يترقبون ظهور اعمالك بالقريب ان شاء الله

1
binamjad أضف ردا

شكرا أخي العزيز.. لا أجد عبارةً أشكرك بها..

زادك الله علما ونفع بك..

لقد أزحت عني حجرا ثقيلا..

تم الحل!

1
Anasjber أضف ردا
0
mo'ez hmouma أضف ردا

غير في css 

#header{ height:auto;}
2
binamjad أضف ردا

شكرا أخي..

تم الحل

وأبقيت الصفحة غير محلولة.. لبعض المدة لكي يستطيع الإخوة الذين يشاهدون النقاش فهم المشكلة التي كنت أعانيها.

تحياتي..

وأكرر شكري للإخوة الذين ساعدوني بالرأي والمصدر.

0
php4u أضف ردا

<!DOCTYPE html>

<div id='wrapper'><div id='header'>رأس الصفحة</div><div id='content'><b>الصفحة تظهر مسافة فارغة فوق.. بعد بداية body</b> </div><div id='footer'>أسفل الصفحة</div></div>
</body></html>
0
binamjad أضف ردا

كيف يكتب الكود ذي عدة أسطر معا في مجتمع أرابيا؟

0
louy أضف ردا 
#header {height: 50px; }

هذه هي مشكلتك

1
binamjad أضف ردا

لا.. بل المشكلة التي كتبتها من قبل ثم عدلت :)

0
louy أضف ردا

تقصد BOM?

0
binamjad أضف ردا

أجل

1
louy أضف ردا

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

على أية حال استخدم دائماً Notepad++ و قم بالحفظ بترميز UTF-8 without BOM (طبعاً لا تنسى وضع < meta charset > في كل صفحة)

و لا تستخدم نوتباد فهو سيء.

0
binamjad أضف ردا

شكرا.. وسأتبع نصائحك.. وأنا أستخدم Notepad++ دائما

1
binamjad أضف ردا
0
husseinquzmar أضف ردا

أخي اعمل هذا في css

body {

margin: 0px auto;

}

0
mo3llem أضف ردا

الحل يكمن في الــ css

ربما أن سبب المشكلة هو كلمة رأس الصفحة إذ أنها ربما توك إما h1 أو p وهذه الوسوم تأخذ سطرا قبلها وسطرا بعدها , ويمكنك الـتأكد من ذلك بنفسك

1
mo3llem أضف ردا

أخطأت / ربما تكون

0
A-Rahmn Atif أضف ردا

افتح ملف CSS جديد وضيف فيه الكود ده بدون أي ترتيب أو غيره واحفظه في المجلد الخاص بملفات الـ CSS >>

/* reset5 © 2011 opensource.736cs.com MIT */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}

بعد ما تحفظه ضيفه لصفحة الـ HTML بس قبل ملف الـ Style وان شاء الله تزبط معاك ..

بالتوفيق =)

14
assassinateur أضف ردا

هناك العديد من النقاشات والمقالات الطويلة والجميلة التي تشرح الفرق بين reset و normalize والكفة تميل دوما ل normalize فلا أنصح باستخدام reset أبدا

أنا دوما أستخدمه وهو ممتاز جدا

الملف

للعلم الملف مستخدم في بوتسراب و html5 boilerplate

1
A-Rahmn Atif أضف ردا

جربته زبط معايا وأدّى نفس الغرض ..

يعطيك العافية D=

0
محمد كرم أضف ردا

ربما هذه التدوينة ستساعدك