Als Beispiel dient hier ein ganz einfaches Loginformular. Dafür benötigen wir je ein Eingabefeld für Benutzername und Passwort, sowie einen Submit-Button. Der Einfachheit halber habe ich unwichtige Quellcode-Teile weg gelassen.

Tabellen-Layout (falsch)

Wenn man das angesprochene Formular mit Tabellen entwerfen würde, sieht das Ganze so aus:

<table>
   <tr>
      <td><label for="user">Benutzername:<label></td>
      <td><input id="user" name="user" type="text" /></td>
   </tr>
   <tr>
      <td><label for="pass">Passwort:</label></td>
      <td><input id="pass" name="pass" type="password" /></td>
   </tr>
   <tr>
      <td></td>
      <td style="float:right"><input type="submit" value="anmelden" /></td>
   </tr>
</table>

Formular nur mit CSS (richtig)

Nun zeige ich euch, wie man Formulare richtig gestaltet. Zunächst einmal benötigen wir natürlich unser Formular:

<form action="login.php" method="post">
   <label for="user">Benutzername:</label>
   <input id="user" name="user" type="text" />
   <label for="pass">Passwort:</label>
   <input id="pass" name="pass" type="password" />
   <input type="submit" value="anmelden" />
</form>

Zudem müssen folgende Zeilen in dein Stylesheet:

form {
   width: 300px;
}

label {
   clear: both;
   float: left;
}

input {
   float: right;
}

input[type="submit"] {
   clear: both;
   float: right;
}

Natürlich musst du das Stylesheet an deine Gegebenheiten anpassen und mit geeigneten CSS-Selektoren ausstatten, damit nicht deine ganze Seite verunstaltet wird. Ebenso fehlen zum Beispiel noch mehrzeilige Eingabefelder und Auswahlmenüs in diesem Beispiel.

Fazit

Neben einem besseren Stil verbessert die Lösung mit CSS die Lesbarkeit des Quelltextes enorm. Dass die Realisierung mit CSS ganz einfach ist, sollte hiermit hoffentlich deutlich geworden sein

Generator	Beschreibung
Color Scheme Designer	Auf dieser Seite könnt ihr euch Farbschemas für eure Webseiten erzeugen. Hat allerdings nur indirekt was mit CSS zu tun
CSS Layout Generator	Mit diesem Generator könnt ihr euch eure Layouts erzeugen lassen
Ultimate CSS Gradient Generator	Mit dem CSS3 Gradient Generator könnt ihr euch CSS-basierte Farbverläufe erzeugen lassen
CSS Border Radius	Wenn ihr Elemente mit runden Ecken versehen wollt, findet ihr hier den richtigen Generator dazu
Box Shadow Generator	Mit diesem Generator könnt ihr Block-Elemente mit Schatten ausstatten
Text Shadow Generator	Wenn ihr bestimmte Texte mit Schlagschatten versehen wollt, findet ihr hier den passenden Stylesheet-Generator
CSS3 Generator	So und wenn ihr keine Lust habt, euch diverse Links abzulegen, nehmt ihr den CSS3 Generator. Da findet ihr fast alles unter einer Oberfläche

Falls ihr noch weitere hilfreiche Generatoren kennt, hinterlasst mir bitte einen Kommentar. Die Generatoren dürfen auch gerne anderen Code als CSS generieren

Profil-ID herausfinden

Zunächst musst du die ID deines Facebook-Accounts herausfinden. Dazu öffnest du einfach deine Facebook-Seite und schaust dir die URL an. In meinem Fall lautet die URL so:

http://www.facebook.com/pages/Techspread/144164052271461

Die Nummer am Ende ist hierbei meine Profil-ID. Eventuell versteckt sich die ID auch an etwas anderer Stelle in der URL, je nachdem von welchem Typ dein Profil ist und welche Seite du geöffnet hast.

Facebook Like Box einbinden

Um die Facebook Like Box einzubinden, musst du zunächst an der Stelle, wo die Like Box erscheinen soll, ein Element mit der ID fblikebox platzieren. In meinem Fall steckt die Facebook Like Box beispielsweise in einem Listenelement:

<li id="fblikebox"></li>

Danach musst du folgenden Codeschnipsel an das Ende deiner Seite also direkt vor </body> setzen:

<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
   /* <![CDATA[ */
   document.getElementById('fblikebox').innerHTML = '<fb:fan profile_id="<profile_id>" height="<height>" width="<width>" connections="<connections>" stream="<stream>" header="<header>" css="<css_url>?<css_ver>"></fb:fan>';
   FB.init({xfbml : true});
   /* ]]> */
</script>

Dieser Block bindet zunächst das Facebook JavaScript SDK ein. Danach wird dem Element mit der ID fblikebox sein Inhalt zugewiesen. Diese Methode hat den Vorteil, dass XHTML-Validatoren den Quellcode als valide ansehen, da das fb:fan-Tag nicht standardkonform ist. Bei dem Codeschnipsel müsst ihr noch die folgenden Parameter anpassen:

Facebook Like Box anpassen

Jetzt ist deine Facebook Like Box bereits funktionstüchtig. Nun musst du nurnoch eine CSS-Datei zum designen der Facebook Like Box erstellen. Um die benötigten Elemente herauszufinden, empfehle ich Firebug. In meinem Fall war nicht viel zu machen, ich wollte lediglich den Hintergrund transparent machen und den blauen Rahmen entfernen. Das CSS-Markup dafür sieht so aus:

.fan_box .full_widget {
 background: transparent;
 border: none;    
}

Weiterführendes

Wer mehr mit dem Facebook JavaScript SDK machen möchte, sollte sich die Dokumentation zum Facebook JavaScript SDK anschauen.