Probleme beim Einbinden von drei Logos

Question

Guten Morgen,

ich habe Probleme bei einem Fragebogen drei Logos einzubinden, obwohl ich es schon öfters mit zwei gemacht habe. Zwei habe ich zu einem Bild verbunden, das dritte per Script in das Layout eingebunden. Aber aus irgendeinem Grund hängt es immer neben der Linie. Mir ist allerdings schleierhaft, was ich zu den letzten mal anders gemacht habe (außer die OFB Breite von 900 auf 1100 angehoben, da wir einige breitere Skalen haben).

Deshalb drei Fragen:

1. Wie bekomme ich das Logo auf der linken Seiten auf die hr Linie?
2. Das Logo auf der rechten Seite wirkt unscharf, obwohl das zugehörige Bild eine super Auflösung hat. Was könnte dafür verantwortlich sein?
3. Bei Überschriften über zwei Zeilen fängt die zweite Zeile plötzlich irgendwo anders an, im Vergleich zur ersten Zeile. Woran liegt das und wie kann ich es beheben?

Der Pre-Test Link:
https://ofb.iea-hamburg.de/pisasl/?act=CC90IIBFrRRPq0dPqsHeTuMz

Generell wäre es super, wenn SoSci mittelfristig wenigsten zwei Logos als Standard anbieten würde, damit wir dafür nicht immer in das Layout müssen :)

Viele Grüße

Answer 1

Wie bekomme ich das Logo auf der linken Seiten auf die hr Linie?

Die Developer Tools von Firefox entlarven, dass das Logo einfach zu hoch ist, als dass es über die Linie passt.

Aktuell ist das Logo mittels float: left platziert. Das führt aber dazu, dass auch die Linie <hr> das Logo umfließt. Im einfachten Fall erklärt man dem <hr>, dass es da snicht tun soll:

<hr style="clear: both">

Das Logo auf der rechten Seite wirkt unscharf,

Das liegt daran, dass das JPG-Format harte Kanten nur aufwändig kodieren kann. Dieses Logo wäre aufgrund der geringen Anzahl an Farben (2 plus evtl. ein paar für Anti-Aliasing) als PNG deutlich besser gespeichert.

Bei Überschriften über zwei Zeilen fängt die zweite Zeile plötzlich irgendwo anders an, im Vergleich zur ersten Zeile.

Ich sehe eingerückte Fragetexte, aber auf dieser und den folgenden paar Seiten keine Überschriften?! Senden Sie mir da gerne nochmal einen weiteren Link zur passenden Seite.

Comments

Super, clear:both hat funktioniert- danke!  Es wundert mich nur, warum es sonst immer ohne geklappt hat. Auch die verrutschten Zeilen sind jetzt weg, vielleicht war das auch ein einmaliger Darstellungsfehler.

Nur die Qualität des rechten Logos hat sich nicht verbessert, obwohl ich es als png abgespeichert habe. Ich nehme an, dass das die Größe des Logos schon einmal verändert wurde und es daran liegt.

Noch eine letzte Frage (sonst öffne ich auch gern einen neuen Thread). Chrome erlaubt zu schauen, wie der Ofb auf verschiedenen Endgeräten aussehen würde. Dabei werden bei Apple Geräten die Logos recht schön runterskaliert. Bei Samsung Endgeräten allerdings nicht. Ist das ein bekanntes Problem und gibt es eine Möglichkeit das zu beheben?

---

Vermutlich waren frühere logos auf der linken Seite einfach kleiner.

Wenn ich den Link öffne, wird mir das Logo rechts jetzt gestochen scharf angezeigt. Auf Mobilgeräten und Retina-Dispalys bekommt man es noch besser, wenn man es in doppelter oder 4-facher Auflösung hochlädt und dann im <img>-Befehl auf die gewünschte Größe skaliert.

> Dabei werden bei Apple Geräten die Logos recht schön runterskaliert. Bei Samsung Endgeräten allerdings nicht.

"Schön" im Sinne von "scharf" oder im Sinne von "skaliert überhaupt"?

---

Sorry, da habe ich mich nicht besonders gut ausgedrückt: Bei Aple werden die Logos runterskaliert, was auch gut ist, bei Samsung bleiben die Logos auf der Desktop Größe, was dann recht komisch aussieht.

---

Da hilft es in aller Regel, wenn man eine max-width angibt, z.B.

<img src="..." style="max-width: 20%">

Je nachdem, ob der restliche Seiteninhalt in sinnvoller Größe angezeigt wird, muss man evtl. noch ein wenig mit den viewport-Einstellungen im Layout spielen.

---

Ich habe das Problem gefunden: obwohl ich im Layout style="max-width: 20% hatte, habe ich das Logo beim Upload noch mal runterskaliert, anstatt es auf der Originalgröße zulassen. Das hat irgendwie zu den schwammigen Texturen geführt.
Danke für Ihre Hilfe!