Comment centrer la recherche dans l'en-tête

Salut tout le monde !

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

J’ai écrit ces codes, quand je les ajoute au champ CSS, cela ressemble à ce que je veux, mais cela ne ressemble pas à ça chez les autres.
Pouvez-vous m’aider s’il vous plaît ?
https://pvpfarm.com

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

Salut les amis utiles.
Comment puis-je centrer ceci ?
Cela semble différent lorsqu’on est connecté. Cela semble différent après s’être connecté.
Je veux qu’il reste toujours au milieu et à la même position.

https://pvpfarm.com

Merci. :pray:

1 « J'aime »

Je suppose, mais le décalage semble être dû à la différence de largeur entre les boutons de connexion, le bouton du menu de recherche et l’avatar.

2 « J'aime »

Oui Lilly, c’est exactement le problème. Pouvons-nous trouver une solution à cela ?

Est-ce le même problème que vous aviez dans ce sujet
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

2 « J'aime »

pourquoi affichez-vous la barre de recherche pour les utilisateurs anonymes ? Laissez tomber. J’y suis maintenant. Je pensais que cliquer sur la barre de recherche ferait apparaître la fenêtre modale de connexion, mais elle me permet de rechercher… J’y jette un coup d’œil rapide.

Je trouve que tout est très buggé dans Chrome sur mon Macbook. Les boutons d’en-tête ouvrent les mauvais menus et essayer de fermer le tiroir de discussion ouvre le menu hamburger, etc.

Je n’ai pas de réponse quant à la raison - je suppose qu’il y a des SCSS conflictuels. Toi et ton forum progressez bien cependant :slight_smile: - ne te décourage pas ; comparé à tes débuts ici, ton site a beaucoup meilleure allure. Le CSS est délicat si tu n’as pas d’expérience et beaucoup de choses peuvent vite devenir désordonnées si tu ne fais pas attention. Prends ton temps et lis quelques sujets de la base de connaissances Documentation ici. Je pense que si tu simplifies et rationalises une partie de ton CSS, tu résoudras les problèmes.

3 « J'aime »

Je suis très surpris en ce moment :hushed:, je n’ai pas non plus un tel problème. Peut-être que ce problème survient parce que vous avez traduit la langue du site ? La langue principale du site est le turc.

Je vais bientôt vérifier cela sur mon macbook.

J’aimerais vraiment minimiser les codes mais c’était très compliqué.

Je peux vous donner l’autorité d’administrateur. Vous pourrez constater à quel point c’est compliqué. :sweat_smile:

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

Ce code a résolu mon problème au passage. Mais ça n’a pas l’air très beau.

3 « J'aime »

Le contenu de l’en-tête et le contenu de la page sont centrés indépendamment l’un de l’autre, donc si, par exemple, l’en-tête a plus de contenu à gauche ou à droite, le centre de l’en-tête sera différent.

Voici quelques illustrations de cela, ici le « centre » de l’en-tête change en fonction de la quantité de contenu à droite :



Il n’y a pas de moyen simple de s’assurer que le centre de l’en-tête et du contenu de la page sont toujours les mêmes, surtout compte tenu de la largeur du contenu de l’en-tête qui peut changer (en raison des traductions, du nombre de boutons, etc.).

Cela fonctionne car le contenu à gauche (logo) a maintenant la même largeur que le contenu à droite (conteneur de boutons). Vous aurez besoin d’un morceau de CSS séparé pour cibler .anon (déconnecté) car différents boutons sont affichés à droite. Les traductions, comme vous l’avez remarqué, rendront également les boutons de tailles différentes, ce qui aura un impact sur l’alignement.

4 « J'aime »

Merci @awesomerobot merci d’avoir expliqué avec des captures d’écran. C’était très compréhensible pour moi. :hugs:

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

J’essaie aussi de cette façon, mais c’est comme le jeu du serpent dans Tetris. Les deux se poursuivent à l’écran. :sweat_smile:

Solution


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

Vous pouvez ajuster les pixels selon vos besoins.

1 « J'aime »