Mobile Version - Navigation

[Traiceheart]

Hallo :3

Ich habe für meine beste Freundin ein Forum erstellt. Es ist dieses hier: http://tsukiko.forumieren.com

Gestern habe ich ihr an meinem Computer über Chrome die Navibar mittig gesetzt, so das sie auf der selben Höhe wie das Forums ist.
Jedoch habe ich über meinem Handy gesehen dass die Navibar zu sehr nach rechts verschoben ist.
Auf meinem MacBook Air und meinem Tablet ist das auch verschoben.

Das liegt bestimmt an meinem CSS Code. Ich habe sie ja darüber positioniert. Wie kann ich sie dennoch mittig positionieren ohne das sie unterschiedlich angezeigt wird.

Lg,
Traice

[F. Walter]

Hallo Traiceheart,

die Navigation in dem genannten Forum, sehe ich rechts versetzt (Laptop/Firefox).



Nach meinem Wissensstand brauchst du die Navi nicht im CSS mittig setzen, weil es eine Funktion im AB ist.



Grüße, Schnatterchen

[Traiceheart]

Hallo schnatterchen

Wenn ich jetzt die CSS Einstellung ändere wird das auf meinem MacBook Air richtig angezeigt. Jedoch auf Tablet wir es nun nach links verschoben.

Lg

[F. Walter]

Jetzt sehe auch ich die Navi mittig.

Wenn es jetzt noch anderswo versetzt ist, könntest du ja mal testweise alle (Navi)Positionierungen im CSS herausnehmen. Dadurch müßte die Navi eigentlich gezwungen sein, mittig zu sein, wenn du im AB mittig eingestellt hast.

Grüße, Schnatterchen

[#Frank]

Kannst du bitte mal den CSS Abschnitt für deine Navigationsausrichtung hier Posten?
Ich gehe davon aus, das du diese Rechts oder Links ausgerichtet hast.
Hast du die Einstellung im AB so wie oben gezeigt vorgenommen?
Das wird allerdings bei verschiedenen Auflösungen immer zu Problemen führen.

[Traiceheart]

@Frank, davor hatte ich eine Ausrichtigung nach links gemacht. diese habe ich rausgenommen un nun ist es leider auf den Tablet immernoch verschoben. Diesmal nur in die andere Richtung.
Hier mein jetziger Code:

Code:

#navifix{
    height: 25px;
    position: fixed;
    top: 0;
    width: 997px;
    z-index: 100;
  background-color: #221421;
  opacity: 0.9;
}

[Günther]

Hallo,

das Problem entsteht daraus, dass bei position: absolute/fixed normalerweise eine Position von top/bottom und eine von left/right angegeben werden sollte (also auf der x- und y-Achse).
Du hast nur die y-Achse definiert (top). Normalerweise kommen Browser damit trotzdem zurecht und sollten das Element auf der x-Achse 1:1 nach oben setzen, d.h. weiterhin zentriert. Aber manche Browser, z.B. auf mobilen Geräten, sind dazu nicht in der Lage und zeigen das Element dann verschoben an.

Probiere es deshalb mal bitte damit:

#navifix {
background-color: #221421;
height: 25px;
left: 50%;
margin-left: -498.5px;
opacity: 0.9;
position: fixed;
top: 0;
width: 997px;
z-index: 100;
}

Genau das habe ich umgesetzt:
https://hilfe.forumieren.com/t34315-tutorial-bild-direkt-auf-dem-banner-einsetzen#224563
Weil deine Navi genau zentriert sein soll, habe ich also left: 50% angegeben und dann die Hälfte der Breite (997px : 2 = 498.5px) als negatives Margin nach links angegeben: margin-left: -498.5px;

Verstehst du das? Und vor allem: Ist die Anzeige jetzt auf all deinen Geräten korrekt?

[Traiceheart]

AH danke Günther das wusste ich noch nicht
Ich hatte das auch erstmal einfach aus meinem Forum kopiert. Von daher habe ich den Rest nicht mit bedacht.
Aber was neues dazu gelernt

Vielen Vielen Dank Günther. Jetzt funktioniert alles einwandfrei.
Und auch danke an Frank und schnatterchen für eure Hilfe

Lg

[#Frank]

Nun weißt du zumindest, wie du bei solchen Sachen etwas genau mittig ausrichten kannst.