Verzerrung auf anderen Laptops

  • Hi,


    ich erstelle gerade eine Website für meine Ballettschule. Im CSS habe ich alle Angaben in Prozent gemacht (selbst die Schriftgröße ist in "vh"). Das oberte div-Element bekommt die Breite in Abhängigkeit von der Höhe des Bildschirms (var width = screen.height * 1.413;), weil ich halt wollte, dass die Seite schön in der Mitte des Bildschirms liegt und die Seite ausfüllt und nicht so langweilig oben links beginnt oder zu klein oder zu groß ist und man dann scrollen muss (siehe Foto).

    Bild.png

    Ich hab jetzt zwei Probleme damit.


    1. Ich hab das alles so optimiert, dass es auf meinem Laptop gut ausschaut und dachte, dass es bei anderen auch gut ausschauen müsste, weil ja im Endeffekt alles von screen.height abhängt, aber wenn eine Freundin die Seite aufruft, ist die Schrift in dem Bild oben zu klein und geht also über die Holme von der Stange, alle anderen Proportionen passen, nur die Labels wie gesagt nicht. Ich habe Schriftgröße schon mit "px", "%" und "vh" probiert (bei "vh" hängt es dann auch davon ab, ob z.B. eine Lesezeichenliste oben im Browser geöffnet ist).


    2. Auf Handy und Tablet schaut es nur grauenvoll aus (siehe nächste Bilder)

    S.png ... wenn ich die Seite bei senkrechtem Bildschirm lade

    IMG-1807.PNG ... wenn ich die Seite bei waagrechtem Bildschirm lade

    IMG-1806.PNG ... wenn ich dann das Handy senkrecht und wieder waagrecht kippe (wie kann das eigentlich sein?)


    Kann man das irgendwie noch hinkriegen? Oder muss ich doch alles mit festen Pixelwerten machen und "oben links" in die Mitte des Bildschirms legen und dann noch negative Margin-Werte drauf?


    Schon mal herzlichen Dank euch!


    Grüße

    Michael

  • Ich habe mir das jetzt mal angesehen und schlage folgendes Vorgehen vor: Entwerfe zunächst ein Layout auf eine Weise, wie man es i. allg. (und zu Recht) nicht macht: Einen Container außen herum mit genau den Pixelabmessungen des Hintergrundbildes, damit das zunächst mal nicht skaliert wird. Und darin dann das Layout mit der Schrift, so dass es genau hinein passt.

    Wenn das fertig ist, passen wir das nach der contain-Methode in das Browserfenster ein, d. h. entweder seitlich oder oben und unten bleibt Luft wenn das Seitenverhältnis nicht passt. Das machen wir mit transfrom: scale(); und den Faktor berechnen wir mit Javascript.

    Allerdings wird das dann auf dem Handy nicht passen und wir müssen u. U. ein zweites Layout für das Hochformat machen, auch etwas was man i. allg. nicht macht. Aber wir wollen das ja erhalten, dass sich der Text rechts an die Tänzerin anschmiegt.

  • ich erstelle gerade eine Website für meine Ballettschule. Im CSS habe ich alle Angaben in Prozent gemacht (selbst die Schriftgröße ist in "vh").

    Das mit der Schriftgröße ist falsch. Die Schriftgröße darf nicht von der Höhe des Viewports abhängen: bei niedriger Höhe ist sie zu groß, bei kleiner Höhe zu klein - zumindest clamp() müsstest du da verwende, wirklich sinnvoll ist das aber auch nicht, verwende (r)em.

    Zitat

    Das oberte div-Element bekommt die Breite in Abhängigkeit von der Höhe des Bildschirms (var width = screen.height * 1.413;), weil ich halt wollte, dass die Seite schön in der Mitte des Bildschirms liegt und die Seite ausfüllt und nicht so langweilig oben links beginnt oder zu klein oder zu groß ist und man dann scrollen muss (siehe Foto).

    Wie du gemerkt hast, funktioniert das so nicht. Vor allem solltest du das Javascript ersatzlos löschen: das was du da zu berechnen versuchst kann CSS auch direkt.

    Zitat

    Kann man das irgendwie noch hinkriegen?

    Möglicherweise. Allerdings erstmal: du verwechselst Webdesign mit Printdesign. Bei letzterem kann man pixelgenau sagen wo was stehen soll, bei ersterem geht das nicht, dafür sind die Endgeräte auf denen Seiten betrachtet werden können einfach zu unterschiedlich. Deswegen sollten Inhalte Grundsätzlich erstmal in die Elemente gepackt werden die semantisch passend sind - was bei dir überhaupt nicht der Fall ist: du verwendest immer nur <div> statt <header>, <main>, <footer>, <nav> mit <ul>/<li> drin usw.. Auch <label> ist hier falsch sowie sämtliches inline-CSS (das Javascript erwähnte ich ja schon).


    Dein Problem ist erstmal dass deine Konstruktion einfach nicht auf kleine Displays passt (wenn der Text noch lesbar sein soll), du wirst also nicht drumrum kommen verschiedene Layouts je nach vorhandenem Platz zu erstellen, media Querys helfen dir dabei. Wichtig: der Inhalt der Seite muss erst in vernünftiges HTML gepackt werden, erst dann kann es an die Formatierung gehen - und die Breakpoints der media Querys in em, nicht in Pixeln!

    Um den Text dann um das Bild fließen zu lassen brauchst du wirklichen Fließtext, also ohne <br> darin. Ich habe noch nie damit gearbeitet, aber dir sollten die shape-Eigenschaften helfen, damit lassen sich Formen definieren die von Text umflossen werden. Aber wie gesagt: verabschiede dich von der Vorstellung dass es überall exakt so aussieht wie bei dir!

    Ich habe mir das jetzt mal angesehen und schlage folgendes Vorgehen vor: Entwerfe zunächst ein Layout auf eine Weise, wie man es i. allg. (und zu Recht) nicht macht: Einen Container außen herum mit genau den Pixelabmessungen des Hintergrundbildes, damit das zunächst mal nicht skaliert wird. Und darin dann das Layout mit der Schrift, so dass es genau hinein passt.

    Vergiss es. Du kannst im Webbereich keine Texte so formatieren dass sie immer exakt gleich aussehen - da brauch nur jemand mit einer anderen Schriftart kommen, dann sieht es schon wieder (minimal) anders aus. Es hat schon seinen Grund warum Layouts nicht mehr festzementiert werden - das funktioniert einfach nicht mehr seit das Internet auch auf mobilen Geräten verfügbar ist (und auch vorher hat es schon nicht wirklich funktioniert).

  • Ich habe meinen Vorschlag mal umgesetzt. Da verschiebt sich nichts. Getestet in Opera, FF, Chrome und Edge. Auf Safari habe ich leider keinen Zugriff.

  • Ich habe meinen Vorschlag mal umgesetzt. Da verschiebt sich nichts. Getestet in Opera, FF, Chrome und Edge. Auf Safari habe ich leider keinen Zugriff.

    Ein gutes Beispiel wie man es nicht machen soll, die "Lösung" hat einige Probleme/Nachteile:

    1. Wenn ich in Vivaldi (Blink-Engine) eine Mindestschriftgröße setzte, zerreißt es das Layout (Firefox ignoriert eine Mindestschriftgröße was auch nicht für die Seite spricht)
    2. In Firefox zerreißt es aufgrund der verwendeten Schriftart das Layout da die eingerückten Zeilen nicht mehr in ihre Zeilen passen und jeweils die letzten Worte in eine neue Zeile rutschen:
      pasted-from-clipboard.png
      selbst wenn man eine Schriftgröße vorgibt kann man sich nicht sicher sein dass die auch überall verwendet wird: nicht jedes Gerät hat jede Schriftgröße
    3. das Skalieren der Seite funktioniert weder in Vivaldi noch in Firefox - ein No-Go
    4. Screenreader (zumindest Orca, bei anderen wird das wohl genauso sein) machen nach jeder der eingerückten Zeilen eine Pause als wäre da ein Satz zu Ende
    5. Die Abstände zwischen Tänzerin und Text sind in Vivaldi und Firefox unterschiedlich und (durch den falsch umbrochenen Text in Firefox) in beiden nicht ideal
    6. Ohne Javascript wandert der Text nach rechts aus dem sichtbaren Bereich raus - ohne dass man scrollen kann
    7. (die Schriftgröße hängt von der Breite des Fensters ab und wird bei schmalen Fenstern sehr klein. Dass aber für sehr kleine Fenster eine andere Lösung erforderlich ist, schriebst du ja oben schon - das wird ohnehin immer so sein, das Layout lässt sich auf kleinen Displays einfach nicht vernünftig umsetzen)

    Lange Rede, kurzer Sinn: Michael, verwende das nicht: die Variante ist eine nette Spielerei, taugt für die Praxis aber nichts und sollte gleich wieder fachgerecht entsorgt werden.

  • Habe jetzt auch die Menüs und eine Handyversion gemacht :-) :

  • Habe jetzt auch die Menüs und eine Handyversion gemacht :-) :

    Herzlichen Glückwunsch, damit hast du den letzten Punkt behoben, die restlichen Problem bestehen (bei teilweise leicht verändertem Verhalten) weiterhin.

    Wie ich in #6 schon schrieb: als erstes muss das HTML in Ordnung gebracht werden: div#wrapper ist überflüssig, ein Element in dem alles steht gibt es bereits: body; die div#text* gehören in *ein* p damit der Text frei fließen kann, die beiden Absätze darüber ebenfalls je in ein p. Wenn das dann in Ordnung gebracht ist, kann man anfangen das vernünftig zu machen - aber mit den shape-Eigenschaften, nicht mit scale()! Wobei ich nur für große Displays mit shape arbeiten würde, kleine Displays sind zu klein als das das gut aussieht.


    PS: Pixel ist als Einheit für die Schriftgröße (und sonst auch fast immer) immer noch falsch.