Schriftgröße sowie Position unterschiedlich

[Auge]

Hallo

Kann mir bitte einer helfen und mir erklären wie es zu den unterschieldichen Darstellungen kommt?

Die Einheit vh bezieht sich auf die Höhe des Viewports. Deine 7vh entsprechen 7% der Viewporthöhe des Browsers. Die Schriftgröße verändert sich also abhängig von der Höhe des Viewports, was bei unterschiedlichen Displays, unterschiedlichen Browsern und unterschiedlichen Browserfenstergrößen zu unterschiedlichen Schriftgrößen führt.

Für Schriftgrößen ist vh als Einheit in den allermeisten Fällen nicht die beste Wahl. Mit em bzw. rem machst du deine Schriftgröße von den (meist unveränderten) Schriftgrößeneinstellungen des Browsers des Nutzers abhängig. Damit verändert sich die Schriftgröße eventuell je Browser, sie ist aber in des Nutzers einem Browser unabhängig von der Viewportgröße immer gleich.

Noch ein paar allgemeine Kritikpunkte.

• Die Schriftfamilie kannst du auch ohne das vorsintflutliche MSIE-Element font festlegen. Du kannst es z.B. an das Elternelement (#benjaminwillgruber) oder direkt an die einzelnen divs (#benjamin, #willgruber) vergeben. Damit fiele font weg.
• Zudem gehört diese Angabe, wie alle anderen Angaben, in das Stylesheet und nicht als Attribut in das Element.
• Da nicht jeder die Schriftart installiert hat oder das Herunterladen von Schriften erlaubt, gib bitte noch alternative Schriftarten und eine generische Familie (hier sans-serif) an.
• Die Anführungszeichen um den Schriftartnamen brauchst du nur, wenn der Name Leerzeichen enthält.
• Du kannst übrigens gleiche Vorgaben für mehrere Elemente zusammenfassen.

#benjaminwillgruber {
        /* die anderen Angaben */
        font-family: avril, 'andere Schriftart' sans-serif;
}

#benjamin, #willgruber {
	font-size: 7vh;
        color: #ffffff;
}

Tschö, Auge