margin-top anders bei safari, viewport unklar

[molily]

Hallo,

ernstmal sehe ich keinen Unterschied zwischen Firefox und Safari (beide auf MacOS) hinsichtlich der Menü-Positionierung. Sieht nahezu identisch und ganz in Ordnung aus.

Was die Anpassungsfähigkeit an Mobilgeräte angeht: Hier ist die absolute Positionierung mit festen Prozent-Abständen eher hinderlich. Mobilgeräte verfügen über kleine Viewports, da sind die Relationen anders als auf Desktop-Monitoren. Hier würde ich, wie Matthias vorschlägt, erst einmal mit Floats arbeiten (dem normalen Elementfluss). Selbst bei absoluter Positionierung wäre es z.B. sinnvoller, die Navigation mit top und right zu positionieren, anstatt mit margin-top und margin-left. Dann sind die Inhalte zumindest noch lesbar, wenn der Viewport schmaler wird.

Layouts mit Float oder absoluter Positionierung können recht anpassungsfähig sein. Bei der Unterstützung von Mobilgeräten helfen Media Queries ebenfalls weiter. Damit lässt sich je nach Viewportgröße das Layout so ändern, dass z.B. Mehrspaltigkeit erzeugt oder aufgelöst wird.

Grüße
Mathias