Lexi Help
Partner
www.forumieren.com

Mobile Version - Navigation

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt Mobile Version - Navigation

Beitrag von Traiceheart am Sa 27 Sep 2014 - 9:46

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


Zuletzt von Traiceheart am Mo 29 Sep 2014 - 18:13 bearbeitet, insgesamt 1 mal bearbeitet

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von F. Walter am Sa 27 Sep 2014 - 10:51

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

F. Walter
Lehrling
Lehrling

Männlich Beiträge : 107
Anmeldedatum : 29.02.12

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von Traiceheart am Sa 27 Sep 2014 - 11:10

Hallo schnatterchen Smile

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


Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von F. Walter am Sa 27 Sep 2014 - 11:18

Jetzt sehe auch ich die Navi mittig. Smile

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

F. Walter
Lehrling
Lehrling

Männlich Beiträge : 107
Anmeldedatum : 29.02.12

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von #Frank am Sa 27 Sep 2014 - 11:42

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.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von Traiceheart am So 28 Sep 2014 - 16:21

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

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von Günther am So 28 Sep 2014 - 19:23

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. Wink

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:
http://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? Smile

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von Traiceheart am Mo 29 Sep 2014 - 18:12

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

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

Lg

Traiceheart
Stammgast
Stammgast

Weiblich Beiträge : 338
Anmeldedatum : 30.04.12
Chrome

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: Mobile Version - Navigation

Beitrag von #Frank am Mo 29 Sep 2014 - 19:15

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

closed



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten