06.11.2009
Notizzettel mit Pinnwandeffekt
Ein Notizzettel auf der Website erweckt die Aufmerksamkeit und das Interesse des Besuchers. Die Einsatzmöglichkeiten sind dabei recht vielfältig: Kleine Notizen, Newsankündigungen, Themenanreisser mit Weiterleitung zum Inhalt, Kochrezepte, Inserate und vieles mehr sind nur einige Anwendungsbeispiele. Man kann sie einzeln platzieren oder gleich eine komplette Pinnwand mit zudekorieren.
Gerne hat sich Garnet wieder bereit erklärt, uns in ihrer PI-Fundgrube die Anfertigung solcher Grafiken zu erklären. Wie immer kommt dabei das Grafikprogramm Ulead Photo Impact X3
Hier sollen zwei verschiedene Methoden zur Gestaltung der Notizzettel erläutert werden.
A. Notizzettel für variablen Inhalt
Zunächst wollen wir einen Notizzettel für variablen Inhalt in die Website einbinden. Sein Vorteil: Er verlängert sich automatisch mit zunehmendem Text. Erforderlich ist hierzu eine Grafik, die lediglich den "Notizzettel-Kopf" darstellt. Wie man eine solche Grafik anfertigt, erklärt Garnet in Kapitel A.
Verwenden wir also für unseren anpassungsfähigen Notizzettel diese Grafik als "Zettel-Kopf":
Damit wir den Notizzettel gleich mehrfach auf einer Seite einsetzen können, definieren wir für seine Darstellung am besten eine CSS-Klasse.
Der HTML-Code sieht dann folgendermaßen aus:
<div class="zettel">
<h4>Der Notizzettel</h4>
<p>
Der Notizztettel ist ein sehr nützliches Utensil. Er erinnert an vieles, was man sonst vergisst.<br>
Vorausgesetzt, man kann sich merken wo der Notizzettel hängt. Deshalb pinnen wir ihn am besten auf unserer Website an.
</p>
</div>
Die "Kopf-Grafik" wird als Hintergrundgrafik eingebunden. Eine Kachelung (Wiederholung) unterbinden wir mit repeat: no-repeat;.
Wenn wir nun noch eine Hintergrundfarbe hinterlegen, die der des "Zettelkopfs" von unserer Grafik entspricht, so ist gewährleistet, dass unser Notizzettel mit seinem Inhalt mitwächst.
Als Breite nehmen wir jedoch nicht die komplette Grafikbreite, sondern berücksichtigen einen "Abschlag" für unseren Innenabstand, damit der Inhalt nicht zu sehr am Rand klebt. Bei einer Grafikbreite von 230px sowie links und rechts je 10px padding verwenden wir also entsprechend dem CSS-Boxmodell einen width-Wert von lediglich 210px. Der obere Innenabstand hängt von der Grafikhöhe ab. Im Beispiel wurden 35px verwendet.
Je nach Bedarf können auch noch Schriftformatierungen, Float- und Margin-Angaben o.ä. hinterlegt werden.
Hieraus ergeben sich folgende
CSS-Angaben:
.zettel {
background: #efd551 url(zettelkopf.gif) no-repeat;
width: 210px;
padding: 35px 10px 10px 10px;
}
Fügen wir unseren HTML- und CSS-Code zusammen, so sieht unser Demo-Notizzettel wie folgt aus:
Der Notizzettel
Der Notizztettel ist ein sehr nützliches Utensil. Er erinnert an vieles, was man sonst vergisst.
Vorausgesetzt, man kann sich merken wo der Notizzettel hängt. Deshalb pinnen wir ihn am besten auf unserer Website an.
Sollen mehrere Zettel unter- oder nebeneinander angeordnet werden, so bietet sich eine <ul>-Liste an. Hier weisen wir die definierten CSS-Klassen den Listenelementen li zu. Um Listenpunkte zu unterbinden und eine einheitliche Browserdarstellung zu gewährleisten definieren wir noch als CSS-Angaben:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
<ul>
<li class="zettelpink">
<h4>Pinkzettel</h4>
</li>
<li class="zettelgruen">
<h4>Grünzettel</h4></li>
</ul>
Um unsere "Zettelwirtschaft" horizontal anzuordnen, können wir den gleichen Listenquelltext verwenden, müssen jedoch lediglich die Zettelklasse um eine float- und margin-Angabe ergänzen. Ebenso könnt ihr für verschieden farbige Zettel unterschiedliche CSS-Klassen definieren wie zum Beispiel:
.zettelpink {
background: #ff00ff url(kopfpink.gif) no-repeat;
width: 210px;
padding: 10px;
float: left;
margin-right: 15px;
}
In unserer Demo sind die mitwachsenden Zettel in Listenform dargestellt.
B. Notizzettel mit fester Größe
Für einen Notizzettel mit fester Größe binden wir eine komplette "Zettelgrafik" als Hintergrund ein.
Auch dazu gibt es auf der PI-Fundgrube unter Kapitel B die entsprechende Anleitung mit folgendem Ergebnis:
Der HTML-Code entspricht unserem obigen Beispiel, wobei ihr nun jedoch darauf achten müsst, dass der Textinhalt nicht zu lang wird, da er sonst über den Notizzettel hinaus ragt.
<div class="zettelpink">
<h4>Merke:</h4>
<p>
Notizen
</p>
</div>
Erinnern wir uns an das "CSS-Boxmodell", so dürfen wir als Breite nicht die komplette Grafikbreite verwenden, sondern berücksichtigen einen "Abschlag" für unseren Innenabstand, damit der Inhalt nicht zu sehr am Rand klebt.
Gleiches gilt für die Höhe: Sie ergibt sich durch Subtraktion der oberen und unteren Paddingwerte von der Grafikhöhe.
Die Innenabstände sowie die Breiten- und Höhenwerte hängen von eurer individuellen Grafik ab. Testet es also am besten aus und orientiert euch an folgender Formel:
Div-Breite = Grafikbreite - padding-left - padding-right
Div-Höhe = Grafikhöhe - padding-top - padding-bottom
.zettelpink {
background: url(zettelpink.gif) no-repeat;
width: 174px;
height: 204px;
padding: 10px 40px 25px 20px;
}
Dringend!
Wochenende:
Segeltörn mit dem
Cornish Crabber "Garnele"
Auch diese Zettel könnt ihr wieder mehrfach in Form einer ul-Liste neben- oder untereinander anordnen.
Selbstverständlich könnt ihr bei der Gestaltung der Notizzettel eurer Kreativität freien Lauf lassen. Ob mit Schatten, ausgefransten Seiten, Kaffeefleck oder mit Pin-Nadeln - auch dazu hat Garnet mit Ulead Photo Impact X3
Bleibt mir zum Schluss, euch viel Erfolg bei eurer "Zettelwirtschaft" zu wünschen. Passt aber schön auf, dass ihr euch dabei nicht "verzettelt"!