logo rechtsbündig und unscharf

Question

Hallo zusammen!
Meine Uni gibt mir vor, ihr Logo oben rechts oben auf der Seite des Fragebogens anzuzeigen.

Wie kann ich einstellen, dass das Logo rechts- und nicht in der Mitte angezeigt wird?

Schärfe:
Die Originaldatei hat circa 10 Mal mehr Pixel als bei Sosci empfohlen (2000x900 oder so). Wie kann ich die Größe, so anpassen, dass das Logo nicht zu groß und dennoch scharf ist?

Answer 1

Wie kann ich einstellen, dass das Logo rechts- und nicht in der Mitte angezeigt wird?

Das kommt auf das verwendete Layout an. Welches verwenden Sie denn?

Wie kann ich die Größe, so anpassen, dass das Logo nicht zu groß und dennoch scharf ist?

Option 1: Skalieren Sie das Bild in einer Bildbearbeitung (z.B. GIMP) auf die gewünschte Größe, und verwenden Sie ggf. die Filter zum unscharf maskieren, um die beim Skalieren entstehende Unschärfe auszugleichen.

Option 2: Skalieren Sie das Bild auf die doppelte der empfohlenen Breite und Höge (also z.B. auf 800x400 wenn Sie es am Ende 400x200 verwenden möchten) und stellen Sie per CSS im Layout die gewünschte Größe ein. Dadurch bleibt das Logo auch auf hochauflösenden Displays (Retina et al.) schön scharf.

Comments

Das hat jetzt alles bei mir geklappt. Das einzige ist, dass das Logo weiterhin links- statt rechtsbündig ist.
Bisher habe ich das Fragebogenlayout (neutral) kopiert und den HTMP Code auf unterschiedliche Weise zu bearbeiten. Je nachdem was genau ich am Code ändere, verschwindet das Logo komplett oder bleibt linksbündig. Zur Veranschaulichung habe ich hier angesetzt und verschiedene Dinge ausprobiert:
Originalbefehl:
 div#s2t-logo { margin-top: 18 px }
img.s2-logo { max-width: 100%; vertical-align: top }

Ich habe zb probiert, die Position auf 'absolute' zz setzen oder right = 0 px und weitere ähnliche Kombinationen.
Aber vielleicht ist das der falsche Ansatz? Ich bin nicht HTML affin, daher freue ich mich über  jeden Tipp :)

---

Der Trick ist, dass Sie nicht das Logo selbst formatieren, sondern das Element, welches das Logo enthält. Das müsste div#s2t-logo sein.

Also z.B.

div#s2t-logo {
    margin-top: 18 px;
    text-align: right;
}

---

Ich habe mich jetzt doch für das Squares design entschieden, da es doch weitaus besser lesbar ist.

Wie funktioniert es da?
 Ich hab versucht die beiden Befehle entsprechend zu bearbeiten:   div.s2t-logo img:first-child { padding: 0 0 10px 0; text-align: right}

..jedoch funktioniert es hier wohl anders bzw. bedarf es anderer Bearbeitung?

---

Im Squares Layout ist es div.s2t-logo (Punkt statt Raute), also

div.s2t-logo {
    text-align: right;
}

---

Danke! Jetzt gerne nochmal für das Smartphone Layout :)

---

Löschen Sie das Smartphone-Layout am besten :D

Wir haben es mittlerweile auch aus der Liste genommen, weil es in 95% der Fälle nicht so eingesetzt wurde, wie es ausgelegt war, nämlich für Fragebögen die ausschließlich auf Smartphones angezeigt werden. Im Normalfall verwenden Sie eines er anderen Layouts, und das funktioniert dann auch auf dem Smartphone einfach weiter.

Und tatsächlich ist das Smartphone-Layout auch nicht ganz auf dem Stand der Technik, sodass ein CSS-Befehl nicht ausreicht. Tatsächlich müssten Sie zusätzlich die Zeile

<div style="width: 50%">%logo%</div>

ändern wie folgt:

<div style="width: 50%" id="s2t-logo">%logo%</div>

Anschließend funktioniert wieder der Code von oben:

div#s2t-logo {
    text-align: right;
}

---

Okay, gut zu wissen!
Ich hab es jetzt gelöscht und hatte für die Leserlichkeit auf dem großen Bildschirm 15px als Standard Schriftgröße eingestellt. Auf dem Handy überlappen sich somit unten die Auswahlfelder "Befragung unterbrechen" und "Weiter". Könnten Sie mir sagen, wie ich die Größe dieser Felder aber nicht die des Textes kleines mache (oder am besten nur "Befragung unterbrechen" auf 13px einstelle? Muss ich den Teil des Layouts bearbeiten: background-color: %color.4%; color: white; font-weight: bold; border: 0px none; padding: 3px 9px 4px 9px; margin-top: 0 oder manuell den HTML Code ändern?