12.08.2009
Passepartout-Websites
Ihr habt noch nie etwas von "Passepartout-Websites" gehört? Nun, konntet ihr ja eigentlich auch nicht, denn dieser Begriff wurde soeben von Garnet und mir im Rahmen unserer erneuten Coproduktion kreiert. Worum geht es?
Es geht schlicht und einfach um kleine, aber feine Websites, deren Inhalt mit einem stilvollen, grafischen Rahmen umgeben und geziert wird. Somit geeignet für kleine Webpräsenzen, bei denen keine besonders umfangreiche Seiten benötigt werden, oder mit denen man lediglich auf sich oder ein bestimmtes Thema etwas aufmerksam machen möchte.
Eine individuelle Grafik - unser "Passepartout" - sorgt dabei für die stilvolle Umrandung.
Während euch Garnet in ihrer PI-Fundgrube wieder erklärt, wie man mit PhotoImpact X3
Da wir sicher etwas anspruchsvoll sind, soll das verwendete "Passepartout" auf dem Bildschirmfenster horizontal und vertikal zentriert sein. Wir greifen hierzu auf dieses Thema, Variante 2 zurück. Für das "Gerippe" reicht folgender HTML-Quelltext vollkommen aus:
<div id="distance"></div>
<div id="container">
Inhalt
</div><!-- Ende #container -->
Die nachfolgenden CSS-Angaben dienen überwiegend der Zentrierung; auf v.g. Fundstelle sei verwiesen.
Rechnen mit dem CSS-Boxmodell
Bei den Breiten- und Höhenwerten von #container müssen wir etwas rechnen und dabei die Größe der Grafik und den gewünschten Innenabstand berücksichtigen:
Die verwendete Beispielgrafik ist 800px breit und 600px hoch. Würden wir diese Werte ebenso für den #container verwenden, so würde der spätere Inhalt die volle Grafik ausfüllen, sich also auch direkt auf dem "Passepartout-Rahmen" befinden. Das ist jedoch nicht gewollt. Folglich benötigen wir für den Innenabstand zwischen Rahmen und Inhalt einen padding-Wert. Dieser kann entweder mit einem Maßwerkzeug oder durch Experimentieren ermittelt werden. Im Beispiel sind es oben (Bereich bis leicht unter die Unterkante des Notenschlüssels) 235px, unten 40px sowie links und rechts je 60px. Das ergibt hier die Padding-Angabe von padding: 235px 50px 40px 50px; .
Diese Werte müssen von der Grafikgröße abgezogen werden, denn das "CSS-Boxmodell" rechnet sie ja zur Ermittlung der Gesamtbreite oder -höhe von #container ja wieder hinzu.
Damit ergibt sich ein Breitenwert für #container von
800px Grafikbreite - 60px padding-left - 60px padding-right = 680px
Entsprechend beträgt die Höhe dann600px Grafikhöhe - 235px padding-top - 40px padding-bottom = 325px
Schließlich dürfen wir natürlich nicht vergessen, das Passpartout dem #container als Hintergrundgrafik zuzuweisen.
Damit haben wir die CSS-Angaben für unser "Gerippe" bereits komplett:
* {
margin:0;
padding:0;
}
html, body {
width: 100%;
height: 100%;
}
#distance {
width: 10px;
height: 50%;
margin-bottom: -300px;
float: left;
}
#container {
margin: 0 auto;
position: relative;
padding: 235px 60px 40px 60px;
width: 680px;
height: 325px;
clear: left;
background-image: url(rahmengrafik.jpg);
}
In den #container kommt nun der gewünschte Inhalt eurer Website. Der kann bestehen aus Überschrift, Navigation, Text, Grafiken oder weiteren Boxen - eben so wie man es gerne hätte. Achtet lediglich darauf, dass der vorhandene Platz auch für euren Inhalt ausreicht.
Eine Alternative wäre, dem #container noch ein "overflow: auto;" zuzuweisen, damit man bei zu viel Inhalt scrollen kann. Bedenkt jedoch, dass dieser innere Scrollbalken nicht gerade ansprechend aussieht und sich evtl. störend auf das Gesamtlayout auswirkt.
Natürlich gibt es auch zu dieser Anleitung eine kleine Demo mit unserer Neu-Kreation, der "Passepartout-Website".
Wichtige Hinweise:
Zwecks vertikaler Zentrierung gibt es einen unmittelbaren Zusammenhang zwischen der Grafikhöhe (hier 600px) und dem margin-bottom-Wert bei #distance. Dieser muss immer dem negativen, hälftigem Wert der Rahmengrafik entsprechen. Bei 600px Grafikhöhe somit -300px.
Die verwendeten Breiten-, Höhen- und Paddingwerte sind abhängig von der individuell verwendeten Passepartout-Grafik. Passt sie deshalb euren eigenen Bedürfnissen an bzw. stimmt sie auf eure eigene Grafik ab.
Da es bei der Inhaltspositionierung in diesem Fall auf pixelgenaues Arbeiten ankommt (damit z.B. der Text nicht auf der Rahmengrafik steht) sollte unbedingt ein Abstands-Reset vorgenommen und anschließend die Abstände für die Elemente h, p, ul, li usw. explizit mit den eigenen Werten hinterlegt werden. Andernfalls verwenden die Browser ihre spezifischen Werte, wodurch es in verschiedenen Browsern zu unterschiedlichen Darstellungen kommen kann.
Gleiches gilt für Schriftart und Schriftgröße. Diese Individualangaben enthält der obige CSS-Code aus Gründen der Übersichtlichkeit nicht. Ihr könnt euch jedoch am Quelltext der Demodatei orientieren.
Obwohl in der Demo der Inhaltsbereich per Paddingangabe erst unterhalb des Notenschlüssels beginnt, befindet sich die Überschrift "Swinging Passepartouts" oberhalb dieser Zone. Zu diesem Zweck wurde sie an ihren "Standort" absolut positioniert. Wir machen uns dabei zu Nutze, dass #container als übergeordnetes Element relativ positioniert ist. In Bezug darauf können dann Überschriften wie andere Elemente absolut positioniert werden. Auch hier ggf. einen Blick in den Demo-CSS-Code werfen.
Fazit:
Wer seine Website in den richtigen Rahmen setzt, der muss sich nicht wundern, wenn sie (positiv) aus dem Rahmen fällt.