Beispiel 2 : CSS in der Praxis - Positionierung

Bilder und Logos eignen sich gut, um die eigene Marke zu stärken und einer Website im wahrsten Sinne des Wortes ein markantes Gesicht zu geben. So lässt sich das Logo auch in Größe und Position verändern, so dass es optimal an die Seitenstruktur angepasst werden kann und nicht zu sehr im Blickfeld steht neben dem eigentlichen Content einer Seite. CSS hilft generell immer dabei, am Design einer Website zu feilen und unabhängig vom Inhalt zu gestalten.
So ist es möglich, der eigenen Seite ein einheitliches Layout zu verpassen und somit die Besucher langfristig trotz inhaltlicher Veränderungen mit dem gleichen Symbol zu begrüßen.

Beim Beispiel der Website sportwettensystem.com wurde der Name als Logo genommen und als Grafik hinterlegt. Dieses Bild musste nun per CSS so eingebaut werden, dass es später mit dem Text hochscrollt. Also entweder hat man als Programmierer die feststehende Variante zur Auswahl oder eben das Gegenteil. Mit der Definition „position: fixed“ hätte man einen fixierten Punkt, an dem zum Beispiel ein Button an immer der gleichen Stelle – egal wie das Scrollverhalten ist – vorzufinden ist. Das Logo oben links könnte man per Definition „position:absolute“ mit dem Text mitscrollen lassen oder es über andere Möglichkeiten lösen.
Will man von solch einem Objekt die Breite verändern bzw. festlegen, geschieht das über „width“ – der Wert darin bestimmt dann die Ausmaße nach links und rechts. Bei der Höhe wird mit dem Befehl „height“ gearbeitet, aber bei beiden Befehlszuordnungen muss beachtet werden, dass die Inhalte in das Element passen müssen – sonst verschiebt sich alles und die Maße kollidieren mit dem Rest der Seite. Bei sportwettensystem.com bleibt zum Beispiel die Größe immer gleich, auch weil die Grafik keinen dynamischen Charakter hat und nicht für weitere Zwecke benötigt wird. Unter dem Logo im png-Format, welches mit einer Größe von 100 x 500 definiert ist, geht es direkt los mit CSS und dem Inhalt der Seite für Sportwetten und Quoten. Bei einer per CSS zu definierenden Grafik können verschiedene Maßeinheiten verwendet werden, so kann der Webmaster zum Beispiel zwischen Zentimetern, Pixeln, Punkten oder Millimetern unterscheiden. Das hängt nicht immer vom Ursprungsformat ab, sondern auch welche Elemente auf der Website noch verarbeitet werden. Im Falle der Beispielseite bietet sich an, schon alleine aus optischen Gründen von einer fest definierten Größe für das Objekt auszugehen. Wer viel mit Fotos, Bildern und Grafiken arbeitet, sollte seine Website lebendig halten und mit diversen Formaten arbeiten. Solange auch hier bei den Maßen und Formaten eine Linie erkennbar ist und das Design der Website nicht überladen wirkt, ist alles im Rahmen des Machbaren.

Eigentlich sind alle Methoden, die HTML-Seiten von der Performance und vom Code verbessern, nur zu begrüßen und vielen Fällen ist es nicht nur für den Programmierer eine Erleichterung, sondern auch für den User der auf die Website mit CSS surft. Es gibt zahlreiche Möglichkeiten, kurze und direkte Attribute zuzuordnen sowie Formatierungen für Objekte zu definieren. Das gilt auch für das untenstehende Beispiel, bei dem in erster Linie alles in CSS geschrieben und die Seite gut zu navigieren ist. Übersichtlich im Thema Sportwetten und ein Schema mit den passenden Systemen dazu – so stellt man sich eine sauber programmierte Website vor. Die neutrale Erklärung von Wettsystemen wird oft verbunden mit positiven oder negativen Erfahrungen von Benutzern, die das in entsprechenden Foren bei Nachfragen wertend beantworten und im Laufe der Zeit eine gegenteilige Antwort erhalten. Darum kann eine Seite wie sportwettensystem.com eine gute Alternative zur Abwägung sein, wenn man auf der Suche ist nach dem richtigen Wettsystem oder ob es vielleicht doch sogar sinnvoller sein kann, Einzelwetten zu bevorzugen mit all seinen Vor- und Nachteilen. Dafür ist diese Seite auf jeden Fall sehr gut geeignet und aufgrund der Übersichtlichkeit lässt sich schnell zur entscheidenden Wette finden. Hier werden dann die Unterschiede mit Beispielen und Wetteinsätzen veranschaulicht.

Vor allem die Beispiele auf sportwettensystem.com mit den Mannschaften sowie Quoten und Einsätzen vermitteln sofort einen fachlichen Eindruck, weil die Teams natürlich bekannt aus der Bundesliga sind und nicht nur Insidern ein Begriff sind. So entsteht ein leichter Einstieg, der sich erst in der Besprechung der einzelnen Wettsysteme vertieft. Dabei hat das Logo oben links immer einen Wiedererkennungswert und gilt zugleich als Markenzeichen für die Seite, im Begriff SPORT wird der Vokal durch einen Fußball ersetzt. Damit wird im Symbol für die Website schon eine Gewichtung gesetzt, ohne sich aber nur auf die Bundesliga oder andere Fußball-Ligen zu konzentrieren. Denn die auf sportwettensystem.com vorgestellten Wettarten lassen sich auch auf Eishockey, Handball, Basketball oder andere Mannschaftssportarten anwenden.
Die Einzelwetten sind genauso davon losgelöst wie jedes Wettsystem, das auch Einsätze auf Tennisspieler oder Formel-1 erlaubt. Dennoch dürfte das erreichte Klientel eher bei Fußball-Fans liegen und darum ist das Logo mithilfe von CSS oben links richtig gewählt. Der Schriftzug des Logos ist eine fertige Grafik, die wie bei vielen Websites an dieser Position am ehesten ins Auge fällt – die mit einem Schatten als Hintergrund leicht versetzte Schrift „mit dem richtigen System erfolgreich Wetten und Gewinnen...“ noch ergänzt wird. Beides wurde über CSS positioniert und gelöst.