Homepage (TEST-Phase) wird auf Smartphone nicht zentriert angezeigt

[AudioBibel]

Guten Abend miteinander,

ich bin neu hier und absolut nicht der HTML-Checker. Ein Freund, der sich da deutlich besser auskennt, hat mir diese (http://www.audiobibelneü.de/test/) Test-Homepage in HTML und CSS erstellt. Ich habe etwas Fleißarbeiten gemacht, aber im Prinzip nur kopiert und leicht umgewandelt. Meine HTML-Kenntnisse sind rudimentär. 😏

Der Grund für die neue Seite: Die derzeit im Netz befindliche Original-Seite (http://www.audiobibelneü.de/) wurde von mir vor Jahren ohne CSS und grafisch, also mit einem WYSIWYG-Editor, erstellt. Ohne CSS macht das Ändern einer Homepage, welche über 180 Seiten umfaßt, keinen Spaß! Zudem zeigen mir meine Besuchsstatistiken schon seit ein bis zwei Jahren, dass ein beträchtlicher Anteil der Besucher per Smartphone bzw. per Tablett auf die Seite kommt. Erstellt wurde sie aber ausschließlich für Laptop- bzw. PC-Nutzer.

Für die nun neue (noch TEST-)Seite haben wir derzeit nur die index.htm als Startseite, eine in der Navigation folgende Seite, nämlich die auswahl_at.htm, sowie zwei darunter befindliche Seiten, die 1__mose_info.htm, sowie die 1__mose.htm, erstellt. Erst wenn diese Seiten wirklich fehlerlos sind, kann ich die noch ausstehenden Seiten (ca. 140) "kopieren" und leicht anpassen; die Struktur bleibt eigentlich immer gleich, nur die Inhalte müssen angepaßt werden.

Nun kommen wir aber nicht mehr weiter. Zwei Probleme, welche wir als erstes lösen möchten:

Die obigen fünf Seiten sollen auf einem senkrecht gehaltenen Smartphone mit einer Breite von 320px (20em) und einer Bildschirmhöhe von 533px in der Breite komplett dargestellt werden.*) Es soll also kein Verkleinern oder ähnliches notwendig sein. Soweit waren wir eigentlich schon; jetzt aber nicht mehr. Auf breiteren Smartphone-Displays soll sich die Seite dementsprechend ausdehnen.

Negativbeispiel an meinem Smartphone GT-S7710: file:///home/holger/Bilder/Screenshot_2017-05-15-22-34-43-1.png

*) Den Viewport zu meinem Smartphone-Display habe ich über die Seite mydevice.io herausgefunden. Da steht auch noch mehr drin; falls die Daten hilfreich sind, hier ein Bilder: file:///home/holger/Bilder/Screenshots/Screenshot_2017-05-22-22-06-03.png file:///home/holger/Bilder/Screenshots/Screenshot_2017-05-22-22-16-42.png

Wenn eine Seite (egal welche der oben beschriebenen fünf Seiten) in einem Smartphone mit einer Breite von weniger als 424px betrachtet wird, ist leicht nach rechts aus dem Zentrum verschoben**). Ist der Bildschirm des Smartphones breiter oder wird das Smartphone waagrecht gehalten, so sind die Seiten sauber zentriert.

**) Das habe ich auf verschiedenen Smartphones getestet; es läßt sich aber auch im Firefox mit der Tastenkombination Strg+Umsch+M nachstellen.

Die Testseite kann im Internet betrachtet werden (http://audiobibelneü.de/test/) Gerne würde ich auch die CSS-Datei und die fünf htm-Dateien hochladen, finde aber keine Möglichkeit dazu.

Im Voraus sage ich schon mal danke! 😀

Holger

[marctrix]

Hej Holger,

du hast folgende Angaben in Deinem CSS:

.body {
    min-width: 360px;
    max-width: 960px;
    margin-left: 2em;
    margin-right: 2em;
    width: auto;
}

Das führt dazu, dass Deine Seite mindesten 360px breit ist und außerdem noch 2em (entspricht meist weiteren 32px) weit vom linken Rand entfernt wird - also nach rechts verschoben 😉

Tipp: Ich halte angesichts Eurer rein akustischen Inhalte ein kleines Script für sinnvoll, dass die Verzeichnisstruktur ausliest und diese als miteiander verlinkte Seiten abbildet (die es gar nicht gibt - du bräuchtest nur den Rahmen vorgeben)…

Marc

[AudioBibel]

Guten Abend Marc,

vielen Dank! 😀 Habe in der standard.css mal alle Werte mit 360px gegen 240px getauscht und die 2em Rand gegen "auto" getauscht. Und siehe da: Auf meinen beiden Smartphones (320px und 360px Displaybreite) wird jede Seite komplett und zentriert dargestellt. Der Rand fehlt, aber den wollten wir eigentlich eh rauslassen, um auf den Smartphones die optimale Ausnutzung zu erhalten (hat mein Freund wohl vergessen, es gegen "auto" zu ersetzen).

Dein Tip mit dem Script bespreche ich mal mit meinem Freund. Kann mir ein wenig darunter vorstellen; aber keines erstellen. Das ist aber in der jetzigen Phase noch nicht so wichtig.

Also erst mal DANKE! Weitere Fragen werden sicherlich folgen ... 😉

Holger

[wowogiengen]

Hallo Marc, direkt darauf dann mal meine Frage. Wenn man die 2 em Rand weglässt, wird die Seite richtig zentriert. Was müsste ich aber machen, wenn ich die Seite mit Rand zentriert haben will? Den Body ganz normal mit margin: auto zentrieren? Und dann darin ein div, welches die 2 em Rand enthält?

Viele Grüße Wolfgang

[marctrix]

Hej wowogiengen,

direkt darauf dann mal meine Frage. Wenn man die 2 em Rand weglässt, wird die Seite richtig zentriert. Was müsste ich aber machen, wenn ich die Seite mit Rand zentriert haben will? Den Body ganz normal mit margin: auto zentrieren? Und dann darin ein div, welches die 2 em Rand enthält?

Wenn Du einen Abstand haben möchtest, musst du den angeben. Auf der vorliegenden Webseite kann man zwei Abstände in dem betreffednen Element nutzen: den Innenabstand und den Außenabstand. Man kann außerdem die Abständer der umliegenden Elemente (body und html) nutzen um den gewünschten Effekt zu erreichen.

Wenn man Abstände nur bei einer bestimmten Viewportgröße möchte, kann man gezielt festlegen, für welche Medien mit welchen Dimensionen man Abstände möchte. Dazu dient @media (Artikel zu Media-Queries gibt es im Wiki). Beispiel:

body {
  margin: 0 auto;
}
@media screen and (min-width: 30em) {
  body {
    padding: 2em;
  }
}

Du kannst aber auch Abstände "responsiv" angeben, also abhängig von der Bildschirmbreite, so dass auf schmalen Bildschirmen schmale Abstände verwendet werden. Die Einheit vw bezieht sich auf die Breite des browserfensters (genauer gesagt des Viewportes). 1vw entspricht einem hundertstel der Viewportbreite.

Vielleicht reicht dir also auch so etwas, dann kannst du dir die Media-Query sparen:

body {
  margin: 0 auto;
}
body {
  padding: 2em 5vw;
}

Zu guter letzt kann man beides auch miteinander kombinieren (ich glaube calc darf nicht in der Kurzschreibweise verwendet werden, habe ich jetzt nciht nachgeschaut):

body {
  margin: 0 auto;
}
body {
  padding: 2em;
  padding-right: calc(1em + 2.5vw);
  padding-left: calc(1em + 2.5vw);
}

Am besten du spielst mit den verschiedenen Möglichkeiten und Werten ein wenig herum, bis du das für Deinen Fall ideale Ergebnis hast.

Marc

[Gunnar Bittersmann]

@@AudioBibel

ich bin neu hier

Dann sei dir verziehen, dass du deine Seite nicht verlinkt hast. Ich hab das mal für dich nachgeholt.

Die obigen fünf Seiten sollen auf einem senkrecht gehaltenen Smartphone mit einer Breite von 320px (20em) und einer Bildschirmhöhe von 533px in der Breite komplett dargestellt werden.*)

Bei einer Mindestbreite von 360px und Außenabstand links und rechts von jeweils 2em wird das unmöglich passen.

falls die Daten hilfreich sind, hier ein Bilder: file:///home/holger/Bilder/Screenshots/Screenshot_2017-05-22-22-06-03.png file:///home/holger/Bilder/Screenshots/Screenshot_2017-05-22-22-16-42.png

Um das sehen zu können, wäre Zugriff auf deine Festplatte nötig.

Wenn eine Seite (egal welche der oben beschriebenen fünf Seiten) in einem Smartphone mit einer Breite von weniger als 424px betrachtet wird, ist leicht nach rechts aus dem Zentrum verschoben**).

Was nicht passt, wird nicht zentriert. Wenn du weißt, dass auf deinem System 1em 16px entspricht, weißt du auch, wo die 424px herkommen.

Warum gibst du Längen gemischt mal in px, mal in em an? Vergiss, dass es px gibt; verwende em bzw. rem, wenn nicht %, vh, vw etc.

Übrigens:

<!doctype html>
<html lang="de">
<head>
    <title>Audio-Bibel NeÜ, Hörbibel der NeÜ bibel.heute </title>
    <meta name="Beschreibung" content="Audio-Bibel NeÜ - Deutschsprachige MP3-Dateien der Neuen evangelistischen Übersetzung (NeÜ bibel.heute) zum kostenlosen Download. Sprecher: Holger Hönle. Übersetzer: Karl-Heinz Vanheiden">
    ⋮ [viele weitere unsinnige Meta-Angaben ]
    <meta charset="utf-8">

Fehler: Die Angabe der Zeichencodierung muss sich in den ersten 1024 Bytes des Quelltextes befinden; also am besten als erstes im head.

Die ganzen Meta-Angaben kannst du aber auch rausschmeißen, die werden nirgends ausgewertet.

LLAP 🖖

[AudioBibel]

Guten Abend Gunnar,

auch Dir vielen Dank! Danke auch für die Nachsicht für mich als Neuling! 😂 Das mit dem Link auf die Homepage hatte ich gesehen, aber dann wohl doch nicht eingetragen. Sorry.

Das mit der Darstellung auf kleinen Smartphone-Displays und der verschobenen Zentrierung hat sich bereits erledigt; Marc war schneller. 😉

Daß meine hier geposteten Links nicht funktionieren, hätte mir auch klar sein können, habe ich aber am späten Abend nicht mehr gemerkt. Bilder können hier also nur veröffentlich werden, wenn man einen Zugang zu einem öffentlichen Ordner freigibt? Das finde ich etwas umständlich (hatte hier irgendwo gelesen, daß Bilder der Verständlichkeit dienen sollen und für alle, auch noch nach Jahren, eingesehen werden. Das würde aber nur gehen, wenn ich die Bilder auf einen Server von selfhtml.org laden könnte. Oder habe ich etwas nicht verstanden?

Warum die Größenangaben "gemischt" in der css und den htm-Dokumenten stehen kann ich nicht sagen. Wie gesagt: Ich weiß vom Code schreiben nur sehr wenig. Ich werde das mit meinem Freund besprechen und wenn noch Fragen auftauchen, melden wir uns in einem neuen Thread dazu.

Bezüglich der Meta-Angaben: Die hatte ich größtenteils von meiner (noch) online befindlichen Seite, dich ich ja mit einem WYSIWYG-Editor erstellt hatte, übernommen. Daß die Daten gar nicht mehr ausgelesen werden, ist mir neu; hatte dazu erst vor einigen Wochen recherchiert. Dachte, die Meta-Angaben würden nur überbewertet … Die Angabe zur Zeichencodierung setze ich wieder ganz an den Anfang im "head". Die Metas werden ich also vermutlich wieder löschen. Oder hat da jemand eine entgegengesetzte Meinung?

Damit wäre mir mit diesen beiden Problemen (war eigentlich ja nur eines) schon mal wunderbar geholfen; DANKE!

Holger

[wowogiengen]

Hallo, hier ist der, welcher sich etwas besser mit HTML auskennt, als Holger… Wieso ich mal Pixel und mal em genommen habe, kann ich nicht sagen. Eigentlich wären em als Einheit geeigneter gewesen, aber das die Bildschirme alle in Pixel gemessen wurden, hab ich das mal so und mal so gemacht.

Manche Dinge, wie das mit der Zeichencodierung in den ersten 1024 Bytes wusste ich auch noch nicht - macht aber irgendwo Sinn 😉

Eine geskriptete Seite hatte ich vor "langer" Zeit auch schon mal angefangen gehabt - Holger, erinnerst du dich an die Geschichte mit dem PHP? Da hätten wir dann auch nur ein paar Seitengerüste gehabt, die ihre Daten dann aus "Content"-Dateien auf der Serverfestplatte geholt haben. Aber da bin ich dann irgendwo versackt, weil das mit der HTML-Ausgabe über PHP dann teilweise doch schwieriger als gedacht war.

Aber ich denke, wir können jetzt die neuen Seiten soweit verbessern, dass es von der Darstellung her passt - auch wenn es dann weder PHP noch state of the art der Webseitenerstellung ist, aber für das was die Seite können soll, sollte es reichen.

Viele Grüße Wolfgang PS. Gibt es hier irgendwo einen Thread zum Vorstellen, oder brauchts das nicht?

[Camping_RIDER]

Aloha ;)

PS. Gibt es hier irgendwo einen Thread zum Vorstellen, oder brauchts das nicht?

Gibt es nicht, meist lernt man die Menschen früher oder später nebenbei kennen - und spätestens vielleicht bei einem Kaltgetränk an einem Selftreffen 😉

Aber wenn wir schon mal dabei sind: Doch nicht etwa Giengen an der Brenz?

Ich hab bis Sommer letzten Jahres in Herbrechtingen gewohnt und vor drei Jahren mein Praxissemester am MSG absolviert - inzwischen wohne ich allerdings in Wasseralfingen.

Grüße,

RIDER

[wowogiengen]

Ja, ich komme aus Giengen an der Brenz. Arbeiten tu ich in Oberkochen. War auch am MSG, aber schon in den 80er Jahren des letzten Jahrhunderts...

Viele Grüße Wolfgang

[Camping_RIDER]

Aloha ;)

Daß meine hier geposteten Links nicht funktionieren, hätte mir auch klar sein können, habe ich aber am späten Abend nicht mehr gemerkt. Bilder können hier also nur veröffentlich werden, wenn man einen Zugang zu einem öffentlichen Ordner freigibt? Das finde ich etwas umständlich (hatte hier irgendwo gelesen, daß Bilder der Verständlichkeit dienen sollen und für alle, auch noch nach Jahren, eingesehen werden. Das würde aber nur gehen, wenn ich die Bilder auf einen Server von selfhtml.org laden könnte. Oder habe ich etwas nicht verstanden?

Unter dem Eingabefenster gibt es so eine grau unterlegte Schaltfläche „Bilder hierher ziehen oder klicken, um sie hochzuladen“ 😉

Aber stimmt schon, ist etwas verwirrend - wenn man oben in der Leiste das Bild-Icon gefunden hat sucht man nicht mehr weiter nach dem Bildupload. Vielleicht gibts an der Stelle UX-Nachbesserungsbedarf.

Grüße,

RIDER

[AudioBibel]

Hallo RIDER,

dann werde ich die Bilder hier mal nachreichen:

Viewport bei falsch eingestellter CSS mit 360px (23em) Displaybreite

Ausgabe über mydevice.io

Teil 2

Mein Fehler gestern Nacht war, die Bilder von meinem Dateimanager hier in den Beitrag zu ziehen (daher der Verweis auf meine Festplatte und da dort niemand Zugang hat, war das für die Katz. Jetzt - mit dem Hochladen funktioniert es (wenn ich auch nicht kapier, warum beim zweiten und dritten Bild die Beschreibung unter dem Bild und nicht über dem Bild steht …

Danke RIDER und ein Guts Nächtle (sleep well)

Holger

[Auge]

Hallo

Ich habe die Formatierung deines Beitrags mal korrigiert. Mit jeweils zwei Zeilenumbrüchen zuwischen Text und Bildercode klappt's auch mit dem Nachbarelement.

2. Ausgabe über mydevice.io

Ich möchte an dieser Stelle, also nach Betrachtung deiner Screenshots, anmerken, dass die von dem Dienst ermittelten Werte nur bedingt aussagekräftig sind. Der Screen (bzw. genauer der Viewport des Browsers) mag zwar 320px breit sein, aber die daraus errechneten 20em passen nicht auf alle Geräte, auch nicht auf alle Geräte des gleichen Typs. Die Größe eines em bezieht sich auf die Einstellung im konkreten Browser oder Betriebssystem. Stellt sich jemand die Schriftgröße abweichend von den systemseitig typischerweise vorgegebenen 16px Basisgröße ein, ist das Verhältnis zwischen den 320px Screenbreite und der Schriftgröße ein anderes, womit sich ein anderer Wert für die Breite in em ergibt.

Deshalb ist es sinnvoll, die Basiswerte für die Dimensionierung der Hauptelemente einer Seite in em oder einer anderen relativen Maßeinheit anzugeben. Das passt sich flexibler auf die Vielzahl von Anzeigegrößen und -formaten von Displays und Browserfenstern an, auch wenn sich dadurch die Anzeigen in Details unterscheiden. Das darf so.

Jetzt - mit dem Hochladen funktioniert es (wenn ich auch nicht kapier, warum beim zweiten und dritten Bild die Beschreibung unter dem Bild und nicht über dem Bild steht …

Siehe ganz oben.

Tschö, Auge

[AudioBibel]

Guten Morgen Auge,

vielen Dank für Deine Formatierungsarbeiten! So sieht das Ganze korrekt aus. 😀

Deshalb ist es sinnvoll, die Basiswerte für die Dimensionierung der Hauptelemente einer Seite in em oder einer anderen relativen Maßeinheit anzugeben.

Wolfgang, mein tüchtiger Programmierer, und ich sind heute Nachmittag (unter anderem) eh dabei, an dieser Schraube zu drehen. Wir wollen alle px-Werte durch em-Werte ersetzen. Und ich verstehe es richtig: Dann ist der Viewport auf unterschiedlichen Geräten o.k., auch wenn die Schriftgröße von der Standardeinstellung des Browsers abweicht? Denn im Gegensatz zu px, welche auf PC und Laptop vor dem Aufkommen der Smartphones und der hochauflösenden Bildschirme ja wohl der Standard war, passen sich em, rem, % etc. da besser an ... (?)

Holger

[marctrix]

Hej AudioBibel,

vielen Dank für Deine Formatierungsarbeiten! So sieht das Ganze korrekt aus. 😀

Deshalb ist es sinnvoll, die Basiswerte für die Dimensionierung der Hauptelemente einer Seite in em oder einer anderen relativen Maßeinheit anzugeben.

Wolfgang, mein tüchtiger Programmierer, und ich sind heute Nachmittag (unter anderem) eh dabei, an dieser Schraube zu drehen. Wir wollen alle px-Werte durch em-Werte ersetzen.

Das kann dann in manchen Fällen dazu führen, dass nicht alles in allen Browsern so aussieht wie jetzt - nämlich genau dann, wenn 16px nicht ein em sind.

Hin und wieder wirst du rechnen müssen, da em sich auf die Schriftgröße des Elternelementes bezieht.

Das kannst du umgehen, indem du deine Angaben in rem notierst - das ist die Schriftgröße des Root-Elementes und die ändert sich nur, wenn jemand das bewusst einstellt (größer wegen schlechter Augen, kleiner wegen Tunnelblick oder so).

Und ich verstehe es richtig: Dann ist der Viewport auf unterschiedlichen Geräten o.k., auch wenn die Schriftgröße von der Standardeinstellung des Browsers abweicht?

Der Viewport (und seine Briete9 haben mit em nichts zu tun. Der Viewport ist immer der Bereich des Browsers, in dem die Webseite dargestellt ist. und ja, das ist auf jedem Gerät ok so 😉

Denn im Gegensatz zu px, welche auf PC und Laptop vor dem Aufkommen der Smartphones und der hochauflösenden Bildschirme ja wohl der Standard war, passen sich em, rem, % etc. da besser an ... (?)

…die Nutzervorlieben an!

Marc

[AudioBibel]

Guten Abend Marc,

die px-Werte (sofern sie den Viewport betrafen) sind nun alle auf rem umgestellt. Es funktioniert (die Seite ist online - http://www.xn--audiobibelne-olb.de/test/).

Also erst mal wieder DANKE!

Mal eine generelle Frage: Da wir sicherlich noch öfters Fragen zu speziell dieser Homepage, aber zu neu auftretenden Problemen stellen werden, erschien es Wolfgang sinnvoll, diesen Thread umzubenennen. So könnte dann eine Frage nach der anderen abgearbeitet werden und es wäre alles - auch zeitlich sortiert - auf einmal aufzufinden. Geht das?

Nun folgt nämlich gleich das nächste ungelöste Problem (Darstellung unter Android ohne Farben). Bevor ich das ausführlicher schildere, sollte ich erst wissen, ob ich einen neuen Thread öffne, oder wir diesen hier (bspw) auf "Audio-Bibel NeÜ under Construction" umbenennen.

Danke bis hierher

Holger

[Auge]

Hallo

Da wir sicherlich noch öfters Fragen zu speziell dieser Homepage, aber zu neu auftretenden Problemen stellen werden, erschien es Wolfgang sinnvoll, diesen Thread umzubenennen. So könnte dann eine Frage nach der anderen abgearbeitet werden und es wäre alles - auch zeitlich sortiert - auf einmal aufzufinden. Geht das?

Könnte man machen, bei hinreichend verschiedenen Aufgabenstellungen sind mehrere Threads, die sich jeweils mit einem Thema beschäftigen aber besser. Bedenke bitte, dass diese Threads später im Archiv für Jedermann zugänglich sind. Und Jedermann sucht eher nach der Lösung für ein konkretes Problem und nicht nach der allumfassenden Diskussion über eine Seite.

Nun folgt nämlich gleich das nächste ungelöste Problem (Darstellung unter Android ohne Farben).

Öffne dazu bitte einen neuen Thread. Du kannst dort ja einen Link zum Eröffnungsposting dieses Threads hinterlegen, um sie miteinander zu verbinden.

Tschö, Auge

[Gunnar Bittersmann]

@@AudioBibel

Bezüglich der Meta-Angaben: […] Daß die Daten gar nicht mehr ausgelesen werden, ist mir neu

Nun ja, einige Schlüsselwörter für name werden eventuell ausgewertet. Diese sind dann aber auf englisch; also bspw. description, nicht Beschreibung. Dann zeigen Suchmaschinen diesen Text in SERPs an.

LLAP 🖖