توسيط شريط التنقل في HTML/CSS

لتحقيق مركزية عنصر div في صفحة الويب عند تغيير حجم النافذة، يمكنك استخدام قيمة الهامش الأوتوماتيكي “margin: auto” بشكل صحيح، ولكن يجب أيضًا تغيير بعض الخصائص الأخرى لتحقيق النتيجة المطلوبة.

أولاً وقبل كل شيء، يبدو أن العنصر “.navibar” لديك محدد بوضع مطلق “position: absolute”، وهذا قد يؤدي إلى تثبيته في موضع معين دون احتساب قيمة الهامش الأوتوماتيكي. بالإضافة إلى ذلك، قد تحتاج إلى تعديل بعض القيم الأخرى لتحقيق الوسطية بشكل صحيح.

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

html
html>
<html lang="en">

<head>
    <style>
        body {
            font-family: Trebuchet MS;
            margin: 0; /* إلغاء هامش الجسم الافتراضي */
            padding: 0; /* إلغاء الحشو الافتراضي للجسم */
        }

        .containermain {
            position: relative; /* تحديد وضع نسبي للعنصر الأب */
            text-align: center; /* تحقيق الوسطية الأفقية */
        }

        .bg {
            width: 100%; /* تأكيد تمدد الصورة لتغطية الشاشة */
            height: auto; /* السماح للصورة بالتمدد بنسبة متناسبة */
            display: block; /* تأكيد عرض الصورة كبلوك بدلاً من إنلاين */
        }

        .navibar {
            z-index: 1;
            position: absolute;
            background-color: #000000;
            border-radius: 5px;
            top: 50%; /* وضع الحافة العلوية للنافذة في منتصف الشاشة */
            left: 50%; /* وضع الحافة اليسرى للنافذة في منتصف الشاشة */
            transform: translate(-50%, -50%); /* تحويل العنصر لتوسيطه بالكامل */
            width: 80%; /* تحديد عرض النافذة */
            max-width: 870px; /* تحديد حد أقصى للعرض للحفاظ على التناسب */
        }

        .button {
            color: white; /* لون النص في الأزرار */
            text-decoration: none; /* إزالة تزيين النص */
            margin: 0 10px; /* تحديد الهامش الأفقي بين الأزرار */
        }
    style>
head>

<body>

    <div class="containermain">
        <img class="bg" src="bg.png" alt="background">
        <div class="navibar">
            <a class="button btnhome" href="x.html#home" target="_blank">homea>
            <a class="button" href="x.html#portfolio" target="_blank">portfolioa>
            <a class="button" href="x.html#blog" target="_blank">bloga>
            <a class="button" href="x.html#contact" target="_blank">contacta>
        div>
    div>

body>

html>

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

المزيد من المعلومات

بالطبع، دعونا نكمل المقال لتوضيح المفاهيم وتقديم بعض الإرشادات الإضافية.

توضيح الحلول المستخدمة:

تحديد العناصر الرئيسية: في الكود الجديد، قمنا بتحديد العناصر الرئيسية باستخدام العنصر “.containermain” ووضعناه بوضع نسبي لتحديد نطاق مركزي لتوسيط الصورة والشريط العلوي.
الاستخدام الصحيح للهامش: باستخدام قيمة “margin: auto” فقط للعنصر “.navibar”، سنجعل العنصر متوسط الوسط تلقائيًا بالنسبة إلى عنصر الأصل “.containermain”.
الوسطية الأفقية والرأسية: باستخدام “text-align: center” للعنصر “.containermain” والتلاعب بخصائص الوضع والتحويل للعنصر “.navibar”، نحقق الوسطية الأفقية والرأسية للشريط العلوي.

بعض النصائح الإضافية:

استخدام الوحدات النسبية: يمكن استخدام النسبة في تحديد العرض والارتفاع لضمان توافق العناصر مع أحجام الشاشات المختلفة.
الاختبار والتكيف: يجب اختبار توافق الموقع مع مجموعة متنوعة من الأحجام والأجهزة للتأكد من أنه يعمل بشكل صحيح في جميع الظروف.
تحسين الصور: يمكنك تحسين الصورة الخلفية لضمان وضوح النص والعناصر الأخرى في الصفحة، عبر تحسين السطوع والتباين.
النصوص البديلة: لا تنسى إضافة نصوص بديلة للصور باستخدام خاصية “alt” لتحسين تجربة المستخدم ودعم التوافق مع قواعد الوصول.
التوثيق والتعليقات: يفضل وضع توثيق وتعليقات في الكود لسهولة فهمه للمطورين الآخرين ولتسهيل الصيانة في المستقبل.

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

الوسوم