Domfolio
Auf domfolio.de werden zahlreiche wertvolle Domains zum Kauf angeboten – darunter viele Top Domains, die generische Begriffe beinhalten, oder auch die neuen zweistelligen .de-Domains.
Das Seitenlayout ist mit Ausnahme eines Teilbereichs einspaltig gehalten und besitzt eine feste Breite, um die zahlreichen grafischen Gestaltungselemente in immer gleicher Form und ohne ungewollte Verschiebungen oder Leerräume anzeigen zu können.
Einspaltiges Layout mit fester Breite
Der äußere Div-Container mit der ID „tpcontainer“ bekommt im Template selbst mit der Style-Anweisung „width: 960px“ seine Breite zugewiesen. Die übrigen Angaben, die in Abhängigkeit der Breite des Browserfensters für die Zentrierung sorgen, sind in eine externe CSS-Datei ausgelagert. Die Eigenschaftskombination „margin: 0 auto“ stellt eine sehr beliebte Möglichkeit dar, ein Element mit einer festen Breite innerhalb eines Elternelements mit einer variablen Breite zentriert darzustellen, denn mit absoluten Positionsangaben erreicht man diesen Effekt nicht. Der Außenabstand oben und unten beträgt 0 Pixel, der rechte und linke Außenabstand wird aufgrund des Angabe „auto“ automatisch berechnet.
Ein weiterer Div-Container der Klasse „tpcontainer-inner“ mit der Eigenschaft „padding:10px 20px“ sorgt für einen festen Abstand aller Inhalte innerhalb von „tpcontainer“ zum Rand des Containers.
Ein- und mehrspaltige Bereiche
Innerhalb der großen Spalte, die „tpcontainer“ bildet, gibt es vier große Sektionen, die untereinander angeordnet sind. Eine besondere CSS-Formatierung ist dafür nicht notwendig.
Jeder dieser vier Container ist nun durch weitere Verschachtelung potenziell mehrspaltig – „tpcontainercontent“ besitzt zwei Spalten. Die beiden Div-Container der Klassen „tpcontainerleft“ und „tpcontainermain“ sind mit der Eigenschaft „float:left“ ausgestattet, für „tpcontainerleft“ ist außerdem eine feste Breite von 200 Pixeln definiert. Dadurch ordnet sich „tpcontainermain“ automatisch rechts von „tpcontainerleft“ an. „tpcontainermain“ ist in der Breite grundsätzlich variabel und passt sich dem umgebenden Div-Container an.
Weitere floatende Elemente könnten hier eingefügt werden. Dafür wären zusätzliche Breitenangaben notwendig, die aber die Gesamtbreite des Elternelements nicht überschreiten sollten. Aus diesem Grund ist für dieses Element auch eine feste Breite so wichtig. Ansonsten würden nämlich trotz float-Eigenschaft nicht mehr passende Elemente unterhalb der anderen Elemente angezeigt.