لماذا تستمر المساحات الصغيرة في الظهور في صفحات الويب الخاصة بي؟

Question

قد يكون هذا سؤالًا غبيًا، لكن إذا كانت هناك طريقة أفضل أو مناسبة للقيام بذلك، فأنا أرغب في تعلمها.

لقد واجهت هذا عدة مرات، بما في ذلك مؤخرًا، حيث تظهر مساحات صغيرة في النسخة المقدمة من صفحة HTML الخاصة بي.أعتقد بشكل حدسي أن هذه العناصر لا ينبغي أن تكون موجودة لأنه خارج النص أو الكيانات، لا ينبغي أن يكون تنسيق HTML الخاص بالصفحة مهمًا ولكن من الواضح أنه مهم.

ما أشير إليه هو هذا - لدي بعض ملفات Photoshop من العميل حول الشكل الذي يريد أن يبدو عليه موقعه.إنهم يريدون أن يبدو بشكل أساسي مثاليًا للصورة الموجودة في هذا الملف.

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

لذلك أضعها بشكل غريزي على هذا النحو (هناك المزيد ولكن هذا هو الجوهر)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

وهكذا دواليك.

المشكلة هي أن الصور تحتوي على هذه المساحة الصغيرة بينها وهو أمر غير مقبول نظرًا لأن العميل يريد هذا الشيء مثاليًا للبكسل (وهو يبدو سيئًا فقط).

إحدى الطرق لعرضه بشكل صحيح هي إزالة أحرف الإرجاع بين الصور

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

مما يجعل الصور تتعارض مع بعضها البعض (التأثير المطلوب) ولكنه يجعل الخط طويلًا بشكل لا يصدق ويجعل الحفاظ على الكود أكثر صعوبة (يتم لفه هنا في SO وهذه نسخة مبسطة - النسخة الحقيقية تحتوي على أسماء ملفات وجافا سكريبت أطول رشها للقيام بالتحليق).

يبدو لي أن هذا لا ينبغي أن يحدث ولكن يبدو أن حرف الإرجاع في HTML يتم عرضه كمساحة فارغة صغيرة.وهذا يحدث في جميع المتصفحات، يبدو.

هل أنا على صواب أم على خطأ في اعتقادي أن المقتطفين أعلاه يجب أن يعرضا نفس الشيء؟وهل هناك شيء أفعله خطأ؟ربما حفظ الملف بترميز خاطئ؟هل يجب أن أجعل كل رابط من هذه الروابط عنصر CSS ذو موقع مثالي بدلاً من ذلك؟

Answer 1

عادةً ما يتم عرض المسافة البيضاء (بما في ذلك حرف الإرجاع) كمسافة في كافة المتصفحات.

تحتاج إلى وضع العناصر واحدًا تلو الآخر، لكن يمكنك استخدام الحيلة التالية:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

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

Answer 2

لا أعرف إذا كان هذا عامًا بما يكفي لصفحتك، ولكن يمكنك تصنيف هذه الأمور بشكل خاص أ العلامات وتعويمها جميعًا على اليسار، ثم سيتم تجميعها معًا بغض النظر عن كيفية تنسيق HTML الخاص بك.

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Answer 3

وهذا جزء من مواصفات HTML - المسافات موجودة في الترميز لذا فهي تعتبر جزءًا من المستند.

الخيارات الأخرى الوحيدة المتاحة لك، نظرًا لأنك لا تحب التنسيق، هي كسر علامات html:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

وهو أمر غير مرغوب فيه في رأيي، أو إنشاء HTML ديناميكيًا - إما عبر JavaScript أو باستخدام نظام القوالب وHTML الديناميكي.

Answer 4

السبب بسيط:في لغة HTML، تكون المساحة البيضاء مهمة، ولكن مرة واحدة فقط.يتم تجاهل المسافة البيضاء المتكررة، ويتم عرض المسافة الأولى فقط.

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

عندما يكون التخطيط القائم على الجدول أقل مما هو عليه حاليًا، يمكنك استخدام جدول بدون حدود أو حشوة لمحاذاة العناصر الخاصة بك أثناء وجودها في أسطر منفصلة في الكود المصدري.

Answer 5

الطريقة التي أتعامل بها مع هذا هي استخدام قائمة غير مرتبة، وجعل كل صورة/رابط عنصرًا.ثم استخدم CSS لعرض كل عنصر في السطر وتحريكه إلى اليسار.

سيمنحك هذا قدرًا أكبر من المرونة ويجعل العلامات سهلة القراءة.

Answer 6

السلوك الذي أوضحته أعلاه صحيح لأن المتصفح يعامل إرجاع السطر كمسافة.لإصلاحها، يمكنك تصميمها كما يلي:

a { display: block; float: left; }

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

#nav a { display: block; float: left; }

Answer 7

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

هذا يحتوي على الكثير من علامات التبويب CSS+Javascript/AJAX.أو انظر هذه المجموعة من أمثلة CSS البسيطة (بعض الطراز).وأخيرا، تحقق من هذا في الواقع رائع جدا مولد علامات التبويب.