Wie man die Header-Suche zentriert

Hallo zusammen!

.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;
}

Ich habe diesen Code geschrieben. Wenn ich ihn in das CSS-Feld einfüge, sieht er so aus, wie ich es möchte, aber bei anderen sieht er nicht so aus.
Können Sie mir bitte helfen?
https://pvpfarm.com

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

Hallo liebe Freunde.
Wie kann ich das zentrieren?
Es sieht anders aus, wenn ich eingeloggt bin. Es sieht anders aus, nachdem ich mich eingeloggt habe.
Ich möchte, dass es immer genau in der Mitte und an der gleichen Position bleibt.

https://pvpfarm.com

Danke. :pray:

1 „Gefällt mir“

Ich rate mal, aber der Versatz scheint auf den Breitenunterschied der Login-Schaltflächen zum Suchmenü-Button und Avatar zurückzuführen zu sein.

2 „Gefällt mir“

Ja Lilly, das ist genau das Problem. Können wir dafür eine Lösung finden?

Haben Sie dasselbe Problem wie in diesem Thema?
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

2 „Gefällt mir“

Warum zeigen Sie die Suchleiste für anonyme Benutzer an? Schon gut. Ich bin jetzt dort. Ich dachte, das Klicken auf die Suchleiste würde das Anmeldefenster öffnen, aber es lässt mich tatsächlich suchen… Ich schaue kurz nach.

Ich finde alles sehr fehlerhaft in Chrome auf meinem Macbook. Header-Schaltflächen öffnen die falschen Menüs und beim Versuch, die Chat-Schublade zu schließen, öffnet sich das Hamburger-Menü usw.

Ich habe keine Antwort darauf, warum – meine Vermutung ist, dass es widersprüchliche SCSS gibt. Du und dein Forum machen Fortschritte :slight_smile: – lass dich nicht entmutigen; im Vergleich zu deinem Anfang hier sieht deine Seite viel besser aus. CSS ist knifflig, wenn man keine Erfahrung hat, und vieles kann schnell unübersichtlich werden, wenn man nicht aufpasst. Nimm dir einfach Zeit und lies einige der Documentation Wissensdatenbank-Themen hier. Ich denke, wenn du dein CSS vereinfachst und optimierst, wirst du die Probleme lösen.

3 „Gefällt mir“

Ich bin gerade sehr überrascht :hushed:, ich habe auch kein solches Problem. Vielleicht tritt dieses Problem auf, weil Sie die Sprache der Website übersetzt haben? Die Hauptsprache der Website ist Türkisch.

Ich werde das bald auf meinem Macbook überprüfen

Ich würde den Code wirklich gerne minimieren, aber es war sehr kompliziert.

Ich kann Ihnen Admin-Berechtigungen geben. Sie können miterleben, wie kompliziert es ist. :sweat_smile:

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

Dieser Code hat übrigens mein Problem gelöst. Sieht aber nicht gut aus.

3 „Gefällt mir“

Der Header-Inhalt und der Seiteninhalt werden unabhängig voneinander zentriert, sodass sich der Mittelpunkt des Headers unterscheidet, wenn der Header beispielsweise mehr Inhalt links oder rechts hat.

Hier sind einige Illustrationen dazu. Hier ändert sich die Mitte des Headers je nach Menge des Inhalts auf der rechten Seite:



Es gibt keine einfache Möglichkeit, sicherzustellen, dass die Mitte des Headers und des Seiteninhalts immer gleich ist, insbesondere wenn man bedenkt, dass sich die Breite des Header-Inhalts ändern kann (aufgrund von Übersetzungen, Anzahl der Schaltflächen usw.).

Dies funktioniert, weil der Inhalt auf der linken Seite (Logo) nun die gleiche Breite hat wie der Inhalt auf der rechten Seite (Schaltflächencontainer). Sie benötigen ein separates CSS-Fragment, um .anon (ausgeloggt) anzusprechen, da auf der rechten Seite unterschiedliche Schaltflächen angezeigt werden. Übersetzungen, wie Sie bemerkt haben, führen ebenfalls zu unterschiedlichen Schaltflächengrößen, was die Ausrichtung beeinträchtigt.

4 „Gefällt mir“

Vielen Dank @awesomerobot, danke für die Erklärung mit Screenshots. Es war für mich sehr verständlich. :hugs:

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

Ich versuche es auch auf diese Weise, aber es ist wie das Schlangenspiel in Tetris. Die beiden jagen sich auf dem Bildschirm. :sweat_smile:

Lösung


/* 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 */

Sie können die Pixel nach Ihren Bedürfnissen anpassen.

1 „Gefällt mir“