Info: Dieser Blog wurde 2014 eingestellt. Dies hat viele Gründe, die an dieser Stelle jedoch nicht relevant sind. Die meisten der hier veröffentlichten Tutorials sind inzwischen nicht mehr aktuell, verlasst euch also nicht auf das hier geschriebene.
Zusammen mit dem Blog sind auch unsere E-Mail, unser ask.fm und unser facebook eingestellt.

Notizzettel-Übersicht [#1]

Hallo, ihr da. Ihr kennt es vielleicht von dem ein oder anderen Blog, dass man die verschiedenen Rezepte, Tutorials, DIYs, rezensierten Bücher {...} auf einer eigenen Überischtsseite aufrufen kann. So etwas habe ich auf meinem Blog auch, um meine Kurzgeschichten sortiert zu haben. Natürlich ist es auch noch ganz besonders schön, wenn diese Übersicht irgendwie besonders aussieht. Dafür habe ich mir vor Kurzem eine eigene Übersicht erstellt, auf der viele "Notizzettel" sind, die dann zu den unterschiedlichen Geschichten führen. Da es einigen anscheinend gefallen hat und jemand es sogar angefragt hat, kommt jetzt ein Tutorial dazu, wie ihr euch so etwas selbst erstellen könnt.
Man muss Folgendes hinbekommen, damit es so wie bei mir aussieht:
  • Wir müssen die Notizzettelchen so "strukturiert" nebeneinander hinbekommen, sodass links und rechts & oben und unten immer der selbe Abstand ist.
  • Die Scrollleiste muss erscheinen, wenn zu viel Text angegeben wird. Dadurch verhindern wir, dass der Text weiter geht, als die Höhe des Notizzettels erlauben würde.
  • Die Notizzettel müssen hergestellt werden.
  • Der Post muss verlinkt werden

Let's get started!

Um eine Struktur zwischen den Notizzetteln herzustellen (die erst später hinzugefügt werden), brauchen wir eine Tabelle. Eine Tabelle hilft uns das Ganze in Zeilen und Spalten zu gliedern und dadurch sieht das alles ein bisschen ordentlicher aus. 
Eine Tabelle in HTML ist - außer man definiert es anders - unsichtbar. Das heißt, die Rahmen um die einzelnen Kästchen sind nicht zu sehen. Sie besteht aus den Elementen <table> ... </table> [öffnet bzw. schließt die Tabelle], <tr> ... </tr> [öffnet bzw. schließt eine neue Zeile], <td>...</td> [öffnet bzw. schließt eine neue Spalte].
Für unsere Notizzettel-Übersicht fügen also zuerst Folgendes ein: 
<table><tr>
<td>...</td>
<td>.,.</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>.,.</td>
<td>...</td>
</tr></table>

Dadurch wird es zwei "Reihen" mit Notizzetteln geben (2x tr vorhanden) mit drei Notizzetteln pro Reihe (3x td in jeweils einem tr vorhanden).
Soweit verstanden? - Wenn nicht immer nachfragen.

Jetzt erweitern wir unser Script so:


<table>
<tr>
<td><div id="alles"><div id="text">Hier kommt der Inhalt rein!</div></div></td>
<td><div id="alles"><div id="text">Hier kommt der Inhalt rein!</div></div></td>
<td><div id="alles"><div id="text">Hier kommt der Inhalt rein!</div></div></td>
</tr>
<tr>
<td><div id="alles"><div id="text">Hier kommt der Inhalt rein!</div></div></td>
<td><div id="alles"><div id="text">Hier kommt der Inhalt rein!</div></div></td>
<td><div id="alles"><div id="text">Hier mal ein längerer Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div></div></td>
</tr>
</table>


Damit hätten wir die Tabelle an sich. Das Fettgedruckte ist übrigens der Text, der dann später in den Notizzetteln stehen soll. Ich will euch jetzt noch einmal kurz erklären, was ich da gemacht habe.

  1. Zuerst habe ich in den einzelnen <td>...</td>'s zwei verschachtelte div Container geöffnet. ALLES bezeichnet in diesem Fall jeden einzelnen Notizzettel und später können wir damit einstellen, dass dieser Scrollbalken entsteht und damit können wir auch den Hintergrund hinzufügen. Mit Hilfe von TEXT können wir später die Einstellungen für die Schrift einfügen, schließlich soll in den Notizzettel ja auch etwas stehen. 
  2. Zwischen diese beiden div Container habe ich dann noch einen Beispielinhalt hinzugefügt. Ihr könnt da zum Beispiel die Postüberschrift und ein paar Zitate aus dem Post hinzufügen.
Bis jetzt sieht das alles noch nicht wirklich sehr hübsch aus. Deswegen müssen wir ein bisschen mit CSS herumexperimentieren. Dafür fügt ihr einfach Folgendes nach dem Code oben ein: 
<style>
#alles {
  background: url(http://i46.tinypic.com/2nu6cuq.png);
  width: 190px;
  height: 250px;
  padding: 20px;
  background-repeat:no-repeat;
  overflow: auto;
  padding-right: -10px;
}
#text h2{
  font-size: 90%;
  text-align: center;
  padding: 0px;
  margin: 0px;
  margin-bottom: 10px;
}
#text {
  width: 190px;
  height: 250px;
  overflow: auto;
}
table {
  width: 100%;
}
</style>

In #alles {...} haben wir den Hintergrund (background) angegeben. Achtet darauf, dass ihr hier auch das background-repeat: no repeat; angibt, sonst könnten Fehler auftauchen! Die Höhe und Breite sollten so übernommen werden, wie sie da stehen, falls ihr dieses Notizzettel Bild als Hintergrund benutzen wollt. Falls ihr euch ein eigenes Hintergrundbild erstellen wollt, dann müsst ihr die width & height Werte dementsprechend ändern.
Das padding habe ich genommen, damit die Schrift etwas entfernt vom Rand war und das meiner Meinung nach schöner aussieht. Mit dem overflow: auto; kriegen wir es hin, dass bei zu viel Text dieser Scrollbalken erscheint.

In #text {...} und #text h2 {...} habe ich die CSS Definitionen für den Text, der dann in den Notizzetteln stehen soll, und außerdem die h2-Überschrift angegeben. Die Eigenschaften, die ich dort angegeben habe, könnt ihr natürlich ändern, wenn ihr wollt. Mit <h2>...</h2> habe ich übrigens für den Posttitel genutzt.

So, jetzt sollte die Notizzettel-Übersicht eigentlich ganz gut aussehen. Das nächste Mal werde ich euch zeigen, wie ihr so einen Notizzettel selbst mit GIMP erstellen könnt. :) 

Bis zum nächsten Mal,
Dornröschen


Kommentare:

  1. Wooow, hab mich schon sososo auf das Tutorial gefreut, danke! Ich probiers demnächst mal aus! ♥

    AntwortenLöschen
  2. toll!!
    jetzt hab ich zwar grad keine Zeit, aber ich werd darauf zurückkommen, wunderbaren Tutorial!
    Ella

    AntwortenLöschen
  3. Wunderbar! Sehr schön erklärt! Hats du mal versucht, das nicht mit einer Tabelle zu machen? Die sind imme so anfällig!

    LG
    Anke

    AntwortenLöschen

Wie schon an anderer Stelle dieser Seite bemerkt, ist der Blog eingestellt. Das bedeutet leider auch, dass wir als Blogautoren auf deinen Kommentar nicht eingehen werden.