كيفية توسيط بحث العنوان

مرحباً بالجميع!

.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
    width: 600px;
    left: 150px;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
    left: 150px;
}

لقد كتبت هذه الأكواد، وعندما أضيفها إلى حقل CSS، تبدو كما أريد، لكنها لا تبدو كذلك لدى الآخرين.
هل يمكنك مساعدتي من فضلك؟
https://pvpfarm.com

Ekran görüntüsü 2024-03-31 132713

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

https://pvpfarm.com

شكراً لكم. :pray:

إعجاب واحد (1)

مجرد تخمين هنا ولكن الإزاحة تبدو وكأنها بسبب اختلاف عرض أزرار تسجيل الدخول عن زر قائمة البحث والصورة الرمزية.

إعجابَين (2)

نعم ليلي، هذه هي المشكلة بالضبط. هل يمكننا إيجاد حل لهذا؟

هل هذه نفس المشكلة التي واجهتها في هذا الموضوع
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

إعجابَين (2)

لماذا تعرض شريط البحث للمستخدمين المجهولين؟ لا تهتم. لقد وصلت الآن. اعتقدت أن النقر على شريط البحث سيؤدي إلى ظهور نافذة تسجيل الدخول ولكنه يسمح لي بالبحث بالفعل… ألقي نظرة سريعة.

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

ليس لدي إجابة عن السبب - تخميني هو أن هناك بعض تعارضات SCSS. أنت ومنتدى الخاص بك يتقدمون على أي حال :slight_smile: - لا تيأس؛ مقارنة بالوقت الذي بدأت فيه هنا لأول مرة، يبدو موقعك أفضل بكثير. CSS صعب إذا لم تكن لديك خبرة ويمكن أن تصبح الأمور فوضوية بسرعة إذا لم تكن حذرًا. فقط خذ وقتك واقرأ بعض مواضيع قاعدة المعرفة Documentation هنا. أعتقد أنه إذا قمت بتبسيط وتبسيط بعض أكواد CSS الخاصة بك، فستكتشف المشكلات.

3 إعجابات

أنا متفاجئ جدًا الآن :hushed:، لا توجد لدي مشكلة كهذه أيضًا. ربما تحدث هذه المشكلة لأنك قمت بترجمة لغة الموقع؟ اللغة الرئيسية للموقع هي التركية.

سأتحقق من هذا على جهاز ماك بوك الخاص بي قريبًا.

أود حقًا تقليل الأكواد ولكن كان الأمر معقدًا للغاية.

يمكنني أن أمنحك صلاحيات المسؤول. يمكنك أن تشهد مدى تعقيد الأمر. :sweat_smile:

@media screen and (min-width:640px){
 .d-header .home-logo-wrapper-outlet,
 .d-header .panel{
        width:240px;
 }
}

هذا الكود حل مشكلتي بالمناسبة. لكنه لا يبدو جيدًا.

3 إعجابات

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

فيما يلي بعض التوضيحات لهذا، هنا يتغير “مركز” الرأس بناءً على كمية المحتوى على اليمين:



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

يعمل هذا لأن المحتوى الموجود على اليسار (الشعار) له الآن نفس عرض المحتوى الموجود على اليمين (حاوية الأزرار). ستحتاج إلى جزء منفصل من CSS لاستهداف .anon (تسجيل الخروج) لأن أزرارًا مختلفة تظهر على اليمين. الترجمات، كما لاحظت، ستجعل الأزرار ذات حجم مختلف أيضًا، وهذا سيؤثر على المحاذاة.

4 إعجابات

شكراً @awesomerobot شكراً لشرحك بالصور. لقد كان مفهوماً جداً بالنسبة لي. :hugs:

@media screen and (min-width:640px){
 .d-header .panel{
  margin-left:-66px;
 }
}

أنا أجرب هذه الطريقة أيضاً، ولكن الأمر أشبه بلعبة الثعبان في تترس. الاثنان يطاردان بعضهما البعض على الشاشة. :sweat_smile:

الحل


/* arama search bar ortalama */
@media screen and (min-width:640px){
 html:not(.anon) .d-header .panel {
   margin-left: 95px;
    }
} 

.floating-search-input-wrapper {
    margin-right: -35px;
}
/* arama search bar ortalama */

يمكنك تعديل وحدات البكسل حسب احتياجاتك.

إعجاب واحد (1)