E-Book Startseite Karteikarten-Programm
0

Grundlagen

Schon mal eins vorab: Dieses "Forum" ist nur ein kleines Forum mit relativ wenigen Funktionen - vor allem, wenn es mit Forensoftware wie phpBB verglichen wird. Der Sinn dieses Projektes, ist es, den Aufbau, die Funktionsweise und das Grundprogrammierprinzip eines Forums zu erklären. Unser Forum umfasst ca. 15 000 Zeichen an Programmierung. Für ein Forum ist dies extrem schlang. Unser Forum umfasst keine Kategorien oder Unterforen, d. h. wir haben nur ein Forum. Die Datei index.php stellt die Themen-Übersicht da. viewtopic.php ist ein Dateiname, denn man auch von anderen Forensoftwares kennt. viewtopic.php zeigt das Thema inklusive aller Beiträge an. Die Datei new.php und answer.php sind dazu gedacht Themen zu erstellen bzw. eine Antwort auf ein Thema zu erstellen. Mithilfe von GET und POST und der Kombination von GET und POST können wir so ein komplettes Forum nur mit 4 Dateien aufbauen. In dem Unterordner style befinden sich die Stylesheets. Im Ordner counter speichern wir TXT-Dateien welche die Anzahl der Beiträge der verschiedenen Themen speichern. Der Ordner dataset enthält ebenfalls TXT-Dateien. In dieser Datei sind die Datensätze der Beiträge gespeichert. Jede Zeile stellt einen neuen Beitrag dar. Da wir jedoch noch zusätzlich Informationen wie Titel, Benutzername und Zeit speichern wollen, nutzen wir eine bestimmte Zeichenkette, mit welcher wir nachher ein Array erstellen können. Des Weiteren haben wir auch noch eine Datei namens titlelist.txt. Dort sind die Titel der verschiedenen Themen gespeichert. Die Datei banner.jpg ist die Datei für das Bild, welches im Forum oben angezeigt wird.

index.php

Als erstes wollen wir die Datei index.php - also die Themen-Übersicht - programmieren. Im Head-Bereich des HTML 5 Dokumentes notieren wir noch einen Link zum Stylesheet und einen Titel. Das Forum wird nachher zentriert vom Bildschirm angezeigt, deshalb benötigen wir im Body-Bereich einen Container, in welchem wir alle untergeordneten Elemente notieren. Der Container mit der ID "top" enthält den Kopfbereich des Forums. Der Kopfbereich besteht aus dem Banner, der Hauptüberschrift und einer untergeordneten Überschrift. Nun benötigen wir noch einen Button, welcher es uns ermöglicht ein neues Thema zu erstellen. Dabei handelt es sich in unserem Beispiel nicht um das Steuerelement Button sondern einen "eigenen Button". Die Tabelle mit der ID "list" enthält die Liste unserer Foren-Beiträge. Hier tritt nun das PHP-Skript in Kraft. Die Datei titlelist.txt wird mit Hilfe von file() eingelesen und wir erstellen ein paar weitere Variablen. Jetzt benötigen wir noch eine foreach-Schleife. Diese Schleife arbeitet nun das Array der mit file() eingelesenen Datei durch. Mit der Funktion sprintf() können wir das Format der "Status-Zahl" formatieren. So ist sichergestellt, dass die Zahl immer 4 stellig ist (%04d). Dies benötigen wir für den Dateinamen. In das vorher definierte leere Array speichern wir nun unsere Tabellenzeile ab. Dieses Array wird nachher umgekehrt und dann mit einer weiteren Schleife ausgegeben. Damit bezwecken wir, dass sich das neuste Thema immer ganz oben befindet. Innerhalb der ersten Schleife müssen wir noch die zum Thema gehörende Counter-Datei öffnen, um die Anzahl der Antworten abzurufen. Wenn keine Themen vorhanden sind, wird die Schleife nicht ausgeführt und dann befindet sich der Wert der Hilfsvariable "titleisnull" weiterhin auf true. In diesem speziellen Fall können wir nun eine spezielle Ausgabe vornehmen. Am unteren Rand des Forums befindet sich noch ein weiterer Container, in welchem sich ein Copyright-Hinweis befindet.

<!Doctype html>
<html>
  <head>
    <title>&Uuml;bersicht - Forum-Projekt</title>
    <meta name="author" content="Benjamin Jung" />
    <link type="text/css" rel="stylesheet" href="style/index.css" />
  </head>
 
  <body>
    <div id="forum">
      <div id="top">
        <img src="banner.jpg" border="0" height="200" width="800" />
        <h1><a href="index.php">Homepage-Webhilfe - Projekt "Forum"</a></h1>
        <h2>Themen-&Uuml;bersicht</h2>
      </div>
      <div id="button"><a href="new.php">Neues Thema</a></div>
      <table id="list">
        <tr>
          <th>Themen-Name</th>
          <th width="100">Antworten</th>
        </tr>
        <?php 
        // Variablen
        $titledata = file("titlelist.txt");
        $titleisnull = true;
        $trtdarray = array();
        $state = 0001;
        // Schleife für Beiträge
        foreach ($titledata AS $titledatasingle) {
            $titleisnull = false;
            $counterdata = fopen("counter/".sprintf("%04d", $state).".txt", "r");
                $trtdarray[$state] = "<tr><td class=\"td1\"><a href=\"viewtopic.php?id=".sprintf("%04d", $state)."\">$titledatasingle</a></td><td class=\"td2\">".(fgets($counterdata, 10) - 1)."</td></tr>";
            $state++;
        }
        // Ausgabe
        $trtdarray = array_reverse($trtdarray);
        foreach ($trtdarray AS $trtdarraytemp) {
            echo $trtdarraytemp;
        }
        // Keine Beiträge? --> besondere Ausgabe!
        if ($titleisnull) {
            echo "<tr><td colspan=\"2\" style=\"padding:5px;text-align:center;\"><i>Es sind keine Beitr&auml;ge vorhanden!</i></td></tr>";
        }
         ?>
      </table>
      <div id="bottom">
        &nbsp;<br />&nbsp;<br />&nbsp;<br />
        &copy; Copyright 2014 by Homepage-Webhilfe, Benjamin Jung
        <br />&nbsp;
      </div>
    </div>
  </body>
</html>

viewtopic.php

Die Datei viewtopic.php bekommt mit einem GET-Variable einen Wert überliefert. Die Variable namens id enthält die Identifikationsnummer des Themas. Im Skript muss als erstes überprüft werden ob die Variable überhaupt gesetzt worden ist und ob sie gültig ist. Andernfalls wird mit der Funktion header() auf die Startseite des Forums umgeleitet. Wenn die Nummer gültig ist, werden die Daten sofort in ein Array eingelesen. Im Titel (title-Element) und in der Unterüberschrift (h2-Element) wird dann sofort der Titel des Themas angezeigt, welcher sich im 1. Datensatz (Array-Nummer 0) an erster Stelle befindet. Wie Sie bereits wissen, werden unsere Daten mit Hilfe einer bestimmten Zeichenkette getrennt. An diesen Zeichen müssen wir die Daten davor natürlich noch auftrennen. Der HTML-Aufbau bleibt so ziemlich gleich, im Vergleich zur index.php: Nur statt der Tabelle verwenden wir ein DIV-Element mit dem Namen postcontainer. Innerhalb des Containers verwenden wir eine Schleife um die einzelnen Posts / Beiträge in einem gemeinsamen Block darzustellen (siehe auch CSS-Stylesheet viewtopic.css).

<?php 
// GET-Daten prüfen und ggf. Daten einlesen
if (isset($_GET["id"]) && is_numeric($_GET['id'])) {
    if (file_exists("dataset/".sprintf("%04d", $_GET['id']).".txt")) {
        $datasetfilearray = file("dataset/".sprintf("%04d", $_GET['id']).".txt"); 
    }
    else { header("Location: index.php"); exit; }
}
else { header("Location: index.php"); exit; }
 ?>
<!Doctype html>
<html>
  <head>
    <title><?php $dataset0 = explode("!!!##+##!!!", $datasetfilearray[0]); echo $dataset0[0]; ?> - Forum-Projekt</title>
    <meta name="author" content="Benjamin Jung" />
    <link type="text/css" rel="stylesheet" href="style/viewtopic.css" />
  </head>
 
  <body>
    <div id="forum">
      <div id="top">
        <img src="banner.jpg" border="0" height="200" width="800" />
        <h1><a href="index.php">Homepage-Webhilfe - Projekt "Forum"</a></h1>
        <h2><?php echo $dataset0[0]; ?></h2>
      </div>
      <div id="postcontainer">
        <?php 
        foreach($datasetfilearray AS $datasetfile) {
            $datapieces = explode("!!!##+##!!!", $datasetfile);
            echo "<div class=\"post\"><div class=\"title\">$datapieces[0]</div><div class=\"info\">von $datapieces[1] vom $datapieces[2]</div><div class=\"content\">$datapieces[3]</div></div>";
        }
         ?>
        <div id="button"><a href="answer.php?id=<?php echo $_GET['id']; ?>">Antworten</a></div>
      </div>
      <div id="bottom">
        &nbsp;<br />
        &copy; Copyright 2014 by Homepage-Webhilfe, Benjamin Jung
        <br />&nbsp;
      </div>
    </div>
  </body>
</html>

new.php

Die Datei new.php ist dazu fähig ein neues Thema zu erstellen. In dieser und der Datei answer.php kommen nun die eigentlichen größeren PHP-Skripte zum Einsatz. Als erstes deklarieren wir ein paar Variablen und weisen diesen Werte zu. Wenn die Methode der Anfrage POST ist, dann werden die Angaben auf Fehler überprüft. Sollten Fehler auftreten, dann werden diese im Formular angezeigt. Andernfalls werden HTML-Zeichen, Zeilenumbrüche, BB-Codes und Maskierungszeichen umgewandelt. Danach zählen wir die Einträge der Themenliste, sodass wir die ID des neuen Themas ermitteln können. Nun wird der Themen-Name in die Liste mit aufgenommen. Dann erstellen wir die Datensatz-Datei und den Beitrags-Zähler. Letztendlich leiten wir zum neu erstellten Thema weiter.

<?php 
// Textfelder und Variablen
$eingabefehler = "";
$title = isset($_POST["title"]) ? $_POST["title"] : "";
$username = isset($_POST["username"]) ? $_POST["username"] : "";
$text = isset($_POST["text"]) ? $_POST["text"] : "";
 
// Formular
$formular = "      <table id=\"form\">
        <form action=\"new.php\" method=\"post\">
          <tr>
            <td colspan=\"2\" style=\"color: #FF0000;\"><!-- ERRORS ARE SHOWN HERE --></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Titel:</b></td>
            <td class=\"td2\"><input type=\"text\" name=\"title\" size=\"80\" value=\"$title\" /></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Username:</b></td>
            <td class=\"td2\"><input type=\"text\" name=\"username\" size=\"40\" value=\"$username\" /></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Text:</b></td>
            <td class=\"td2\"><textarea name=\"text\" rows=\"10\" cols=\"62\" style=\"resize:none;\">$text</textarea></td>
          </tr>
          <tr>
            <td colspan=\"2\" align=\"center\" class=\"td2\"><input type=\"submit\" value=\"Thema erstellen\" /></td>
          </tr>
        </form>
      </table>";
 
// Zustand
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    // Fehler-Prüfung
    if (strlen($title) > 80) { $eingabefehler .= "<br />&bull; Der Titel ist zu lang (10 - 80 Zeichen)."; }
    if (strlen($username) > 30) { $eingabefehler .= "<br />&bull; Der Benutzername ist zu lang (5 - 30 Zeichen)."; }
    if (strlen($title) < 10) { $eingabefehler .= "<br />&bull; Der Titel ist zu kurz (10 - 80 Zeichen)."; }
    if (strlen($username) < 5) { $eingabefehler .= "<br />&bull; Der Benutzername ist zu kurz (5 - 30 Zeichen)."; }
    if (strlen($text) < 25) { $eingabefehler .= "<br />&bull; Der Text ist zu kurz (min. 25 Zeichen)."; }
 
    if ($eingabefehler == "") {
        // Text-Bearbeitung
        $text = htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, "ISO-8859-1");
        $text = str_replace("!!!##+##!!!", "!!!## + ##!!!", $text);
        $text = str_replace("\r\n", "<br />", $text);
        $text = preg_replace("/\[b\](.*)\[\/b\]/Usi", "<b>\\1</b>", $text);
        $text = preg_replace("/\[i\](.*)\[\/i\]/Usi", "<i>\\1</i>", $text);
        $text = preg_replace("/\[s\](.*)\[\/s\]/Usi", "<s>\\1</s>", $text);
        $text = preg_replace("/\[url\](.*)\[\/url\]/Usi", "<a href=\"\\1\">\\1</a>", $text);
        $text = preg_replace("/\[mail\](.*)\[\/mail\]/Usi", "<a href=\"mailto:\\1\">\\1</a>", $text);
        $text = str_replace('\&#039;', '&#039;', $text);
        $text = str_replace('\&#034;', '&#034;', $text);        
        // Titel zählen
        $titlecount = count(file("titlelist.txt"));
        // Titel in Titelliste aufnehmen
        $titlelisthandler = fopen("titlelist.txt", "a+");
        fwrite($titlelisthandler, $title."\r\n");
        fclose($titlelisthandler);
        // Datensatz erstellen
        $datasethandler = fopen("dataset/".sprintf("%04d", $titlecount + 1).".txt", "a+");
        fwrite($datasethandler, $title."!!!##+##!!!".$username."!!!##+##!!!".date("d.m.Y H:i")."!!!##+##!!!".$text);
        fclose($datasethandler);
        // Beitrags-Zähler erstellen
        $counterhandler = fopen("counter/".sprintf("%04d", $titlecount + 1).".txt", "a+");
        fwrite($counterhandler, "1");
        fclose($counterhandler);
        // Weiterleitung
        header("Location: viewtopic.php?id=".sprintf("%04d", $titlecount + 1));
        exit;
    }
    else {
        $formular = str_replace("<!-- ERRORS ARE SHOWN HERE -->", "<span style=\"padding:10px 0;\"><b>Folgende Fehler sind aufgetreten:</b>".$eingabefehler."</span>", $formular);
    }
}
 ?>
<!Doctype html>
<html>
  <head>
    <title>Neues Thema erstellen - Forum-Projekt</title>
    <meta name="author" content="Benjamin Jung" />
    <link type="text/css" rel="stylesheet" href="style/form.css" />
  </head>
 
  <body>
    <div id="forum">
      <div id="top">
        <img src="banner.jpg" border="0" height="200" width="800" />
        <h1><a href="index.php">Homepage-Webhilfe - Projekt "Forum"</a></h1>
        <h2>Neues Thema erstellen</h2>
      </div>
      <?php 
      echo $formular;
       ?>
      <div id="bottom">
        &nbsp;<br />
        &copy; Copyright 2014 by Homepage-Webhilfe, Benjamin Jung
        <br />&nbsp;
      </div>
    </div>
  </body>
</html>

answer.php

Bei der Datei answer.php handelt es sich um das Skript um Antworten zu erstellen. answer.php und new.php sind sich sehr ähnlich. Einige Stellen müssen ein wenig angepasst werden. Wenn die Aufrufmethode GET ist, dann muss der GET-Wert - also der id-Wert des Themas - abgerufen werden und gespeichert werden. Dieser muss dann in ein verstecktes input-Feld (hidden) übertragen werden, sodass der Wert beim Formular-Posting nicht verloren geht.

<?php
// Textfelder und Variablen
$eingabefehler = "";
$id = isset($_POST["id"]) ? $_POST["id"] : "";
$title = isset($_POST["title"]) ? $_POST["title"] : "";
$username = isset($_POST["username"]) ? $_POST["username"] : "";
$text = isset($_POST["text"]) ? $_POST["text"] : "";
 
// GET-Prüfung
if ($_SERVER['REQUEST_METHOD'] != "POST") {
    if (isset($_GET['id']) && is_numeric($_GET['id'])) {
        if (file_exists("dataset/".sprintf("%04d", $_GET['id']).".txt")) {
            $id = $_GET['id'];
        }
        else { header("Location: index.php"); exit; }
    }
    else { header("Location: index.php"); exit; }
}
 
// Formular
$formular = "      <table id=\"form\">
        <form action=\"answer.php\" method=\"post\">
          <tr>
            <td colspan=\"2\" style=\"color: #FF0000;\"><!-- ERRORS ARE SHOWN HERE --></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Titel:</b></td>
            <td class=\"td2\"><input type=\"text\" name=\"title\" size=\"80\" value=\"$title\" /></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Username:</b></td>
            <td class=\"td2\"><input type=\"text\" name=\"username\" size=\"40\" value=\"$username\" /></td>
          </tr>
          <tr>
            <td class=\"td1\"><b>Text:</b></td>
            <td class=\"td2\"><textarea name=\"text\" rows=\"10\" cols=\"62\" style=\"resize:none;\">$text</textarea></td>
          </tr>
          <tr>
            <td colspan=\"2\" align=\"center\" class=\"td2\"><input type=\"hidden\" name=\"id\" value=\"$id\" /><input type=\"submit\" value=\"Antwort erstellen\" /></td>
          </tr>
        </form>
      </table>";
 
// Zustand
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    // Fehler-Prüfung
    if (strlen($title) > 80) { $eingabefehler .= "<br />&bull; Der Titel ist zu lang (max. 80 Zeichen)."; }
    if (strlen($username) > 30) { $eingabefehler .= "<br />&bull; Der Benutzername ist zu lang (5 - 30 Zeichen)."; }
    if (strlen($username) < 5) { $eingabefehler .= "<br />&bull; Der Benutzername ist zu kurz (5 - 30 Zeichen)."; }
    if (strlen($text) < 25) { $eingabefehler .= "<br />&bull; Der Text ist zu kurz (min. 25 Zeichen)."; }
 
    if ($eingabefehler == "") {
        if ($title == "") {
            $titlehandler = file("titlelist.txt");
            $title = "Re: ".substr($titlehandler[$id - 1], 0, -2);
        }
        // Text-Bearbeitung
        $text = htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, "ISO-8859-1");
        $text = str_replace("!!!##+##!!!", "!!!## + ##!!!", $text);
        $text = str_replace("\r\n", "<br />", $text);
        $text = preg_replace("/\[b\](.*)\[\/b\]/Usi", "<b>\\1</b>", $text);
        $text = preg_replace("/\[i\](.*)\[\/i\]/Usi", "<i>\\1</i>", $text);
        $text = preg_replace("/\[s\](.*)\[\/s\]/Usi", "<s>\\1</s>", $text);
        $text = preg_replace("/\[url\](.*)\[\/url\]/Usi", "<a href=\"\\1\">\\1</a>", $text);
        $text = preg_replace("/\[mail\](.*)\[\/mail\]/Usi", "<a href=\"mailto:\\1\">\\1</a>", $text);
        $text = str_replace('\&#039;', '&#039;', $text);
        $text = str_replace('\&#034;', '&#034;', $text);
        // Datensatz hinzufügen
        $datasethandler = fopen("dataset/".sprintf("%04d", $id).".txt", "a+");
        fwrite($datasethandler, "\r\n".$title."!!!##+##!!!".$username."!!!##+##!!!".date("d.m.Y H:i")."!!!##+##!!!".$text);
        fclose($datasethandler);
        // Beitrags-Zähler erhöhen
        $counterhandler = fopen("counter/".sprintf("%04d", $id).".txt", "a+");
        $counterdata = fgets($counterhandler, 10);
        rewind($counterhandler);
        fwrite($counterhandler, $counterdata++);
        fclose($counterhandler);
        // Weiterleitung
        header("Location: viewtopic.php?id=".sprintf("%04d", $id));
        exit;
    }
    else {
        $formular = str_replace("<!-- ERRORS ARE SHOWN HERE -->", "<span style=\"padding:10px 0;\"><b>Folgende Fehler sind aufgetreten:</b>".$eingabefehler."</span>", $formular);
    }
}
 ?>
<!Doctype html>
<html>
  <head>
    <title>Antwort erstellen - Forum-Projekt</title>
    <meta name="author" content="Benjamin Jung" />
    <link type="text/css" rel="stylesheet" href="style/form.css" />
  </head>
 
  <body>
    <div id="forum">
      <div id="top">
        <img src="banner.jpg" border="0" height="200" width="800" />
        <h1><a href="index.php">Homepage-Webhilfe - Projekt "Forum"</a></h1>
        <h2>Antwort erstellen</h2>
      </div>
      <?php 
      echo $formular;
       ?>
      <div id="bottom">
        &nbsp;<br />
        &copy; Copyright 2014 by Homepage-Webhilfe, Benjamin Jung
        <br />&nbsp;
      </div>
    </div>
  </body>
</html>

Stylesheets

Für unser Forum benötigen wir natürlich auch noch etwas Style. Dafür haben wir 3 CSS-Dateien: index.css für index.php (Themen-Übersicht), viewtopic.css für viewtopic.php (Themen-Anzeige) und form.css für new.php (Neues Thema erstellen) und answer.php (Antwort erstellen). Unsere Seite wird zentriert im Bildschirm angezeigt, dafür muss das margin-Attribut des Hauptcontainers den Wert 0 und auto besitzen. Der Hauptcontainer (#form) enthält mehrere Untergeordnete Element. Der Container für den Headbereich (#top) und der Container für den Fußbereich (#bottom) befindet sich auf jeder Seite. Bei der Themen-Übersicht gibt es zusätzlich noch den Container #list, welcher die Themen-Übersicht als Tabelle darstellt. Für die Themen-Anzeige gibt es den "postcontainer" (Container für alle Postings) und die Klassifizierungen post, title, info und content, welche die einzelnen Posts darstellen. Für das Formular legen wir ebenfalls einen Container mit manchen Eigenschaften an. Auf der index.php- und der viewtopic.php-Seite benötigen wir zusätzlich noch einen Button. Hier die CSS-Stylesheets der folgenden Reihe nach: index.css, viewtopic.css und form.css

body {
    text-align: center;
    background-color: #E1E1E1;
}
 
#forum {
    margin: 0 auto;
    width: 810px;
    text-align: left;
    background-color: #FFFFFF;
}
a:link, a:visited, a:focus, a:hover, a:active {
    color: #FF0000;
    text-decoration: none;
}
 
#top {
    float: left;
    margin: 5px;
}
#top h1 {
    font-family: sans-serif;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
}
#top h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0000FF;
    text-align: center;
}
 
#button {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    border: dotted #0000FF 2px;
    padding: 5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}
 
#list {
    margin: 5px;
    width: 800px;
    float: left;
}
#list th {
    padding: 10px;
    background-color: #0000FF;
    color: #FFFFFF;
    text-align: center;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
}
#list td {
    background-color: #E1E1E1;
    color: #FF0000;
    font-family: sans-serif;
    font-size: 15px;
}
#list .td1 {
    padding: 5px 15px;
    text-align: left;
}
#list .td1 a:hover {
    padding-left: 10px;
}
#list .td2 {
    padding: 5px;
    text-align: center;
}
 
#bottom {
    margin: 5px;
    color: #FF0000;
    padding: 3px;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    font-style: italic;
}
body {
    text-align: center;
    background-color: #E1E1E1;
}
 
#forum {
    margin: 0 auto;
    width: 810px;
    text-align: left;
    background-color: #FFFFFF;
}
a:link, a:visited, a:focus, a:hover, a:active {
    color: #FF0000;
    text-decoration: none;
}
 
#top {
    float: left;
    margin: 5px;
}
#top h1 {
    font-family: sans-serif;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
}
#top h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0000FF;
    text-align: center;
}
 
#postcontainer {
    float: left;
    margin: 5px;
    width: 800px;
}
#postcontainer .post {
    margin: 15px;
    background-color: #E1E1E1;
    font-family: sans-serif;
}
#postcontainer .post .title {
    font-size: 16px;
    font-weight: bold;
    padding: 5px;
    padding-bottom: 0;
    color: #0000FF;
}
#postcontainer .post .info {
    font-size: 12px;
    font-style: italic;
    padding-left: 15px;
    padding-top: 0;
    color: #FFFF00;
}
#postcontainer .post .content {
    margin: 5px;
    padding: 10px;
    border: solid #0000FF 2px;
    font-size: 14px;
}
#postcontainer #button {
    float: right;
    margin-right: 25px;
    width: 100px;
    border: dotted #0000FF 2px;
    padding: 5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}
 
#bottom {
    margin: 5px;
    color: #FF0000;
    padding: 3px;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    font-style: italic;
}
body {
    text-align: center;
    background-color: #E1E1E1;
}
 
#forum {
    margin: 0 auto;
    width: 810px;
    text-align: left;
    background-color: #FFFFFF;
}
a:link, a:visited, a:focus, a:hover, a:active {
    color: #FF0000;
    text-decoration: none;
}
 
#top {
    float: left;
    margin: 5px;
}
#top h1 {
    font-family: sans-serif;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
}
#top h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #0000FF;
    text-align: center;
}
 
#form {
    margin: 15px;
    width: 780px;
    float: left;
    font-family: sans-serif;
    font-size: 15px;
}
#form .td1 {
    background-color: #E1E1E1;
    width: 150px;
    padding: 5px 15px;
    text-align: right;
    color: #0000FF;
}
#form .td2 {
    background-color: #E1E1E1;
    padding: 5px 15px;
}
 
#bottom {
    margin: 5px;
    color: #FF0000;
    padding: 3px;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    font-style: italic;
}
Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de