text: left: Das Element wird möglichst weit links platziert und die Inhalte der nachfolgenden Elemente fließen rechts daran vorbei.
  right: Das Element wird möglichst weit rechts platziert und die Inhalte der nachfolgenden Elemente fließen links daran vorbei.
  In diesem Tutorial möchte ich euch zeigen, wie man mit JavaScript den Eindruck erweckt, dass man sich auf einer "richtigen Website" mit mehreren Unterseiten befindet. Ich gehe hier allerdings nur auf die technische Seite ein, designen müsst ihr euch das selbst.
  Die Änderung der Inhalte wird später mit der JavaScript-Funktion wechselDich durchgeführt. Wichtig ist, dass ihr dort ganz oben eingebt, wie viele Unterseiten ihr überhaupt erstellt, denn sonst kann es zu Fehlern kommen. Wenn die Funktion aufgerufene wird, läuft eine Schleife, in der alle Unterseiten unsichtbar gemacht werden. Direkt nach dieser Schleife wird die ausgewählte Seite dann sichtbar gemacht. Dies geht so schnell, dass man garnicht sieht, dass zwischendurch im Prinzip keine einzige Seite angezeigt wird.
  Das wirkt nun etwas unübersichtlich, weil so wenig in den Kästen drin steht. Wichtig ist, dass ihr die Kästen alle kasten nennt und dann die Nummer dahinter schreibt, der wievielte Kasten das nun ist. Es dürfen keine Nummern doppelt auftreten. Ansonsten beachtet bitte, dass beim ersten Kasten, also dem, der beim Öffnen der Homepage angezeigt werden soll, die style-Eigenschaft display: block; gesetzt sein muss und bei allen anderen Kästen display: none;.
  Das entscheidende an diesem Markup sind die Links (Angefangen mit <a). Das umschließende ul-Element und die li-Elemente sind nur dazu da, die Auflistung auszuzeichnen. Diese Zahl im Abschnitt wechselDich('1') ist dafür zuständig, welcher Kasten (also welcher Kasten mit welcher Nummer) geöffnen werden soll. Den title (erscheint, wenn man länger mit der Maus auf dem Link ist) könnt ihr frei wählen, ebenso die Linkbezeichnung (bei Mir "Seite1" bis "Seite5").
  Hier erzeugen wir einen Header, einen Container fuer ein Vorabbild und unsere Liste mit youtube Videos, die eigentlich nur eine Liste von Bildern ist.
  In unserer Liste mit den You Tube-Bildern, die wir ueber den allgemeingueltigen Pad "http://img.youtube.com/vi/[Video ID]/default.jpg", wobei Video-ID fuer die ID des Videos steht, die ihr im Adressfeld seht:
  Ordnen dem Body neben einer allgemeinen Schriftart und einem Hintergrund und gestalten unseren Text mittig.
  Einen Container, der unsere Inhalte umschliesst, wollen wir zentrieren, dafuer brauchen wir eine entsprechende Breite, die Urspruenglich 600px sein soll. Da wir aber noch mal einen 5px Inennabstand zu den Seiten wollen und einen Rahmen, drum herum, muessen wir von den 600px - ( 2 x [ 5px + 1px ) abziehen, was einer errechneten Breite von 588px fuer unseren Container entspricht. Jetzt noch ein bisschen CSS 3 - abgerundete Ecken und der Container ist fuer's erste fertig.
  Jetzt kuemmern wir uns um die Navigationsleite, in der die Youtube Bilder angezeigt werden, die uns beim Klick das entsprechende Video anzeigen. Da die Liste meist groesser werden wird als unser Viewport dafuer zulaesst ( Viewport meint in diesem Fall, die zu sehenden Bilder innerhalb der 588px ) wollen wir einen overflow, geben dem ganzen, zwecks besserer Optik noch ein bisschen was an Innen- und Aussenabstaenden und ein clear, da wir die Listenelemente noch floaten muessen, damit sie in der Horizontalen angezeigt werden.
  Wir registieren erstmal eine Variable, damit wir nicht immer den vollen Selektor ausschreiben wollen.
  var youtubesrc = $('#miniImg>li>img').attr('src'); < damit sagen wir, dass von allen Bildelementen, die in der Liste mit dem ID-Selektor [miniImg] vorzufinden sind, die Uri haben wollen und das Ganze als Variable youtubesrc ausgezeichnen moechten.
  Wir notieren uns noch mal eine Variable in der wir den ID-Selektor der Bilder haben wollen ( var youtubeID = $(this).attr("id"); ), was noch mal zur Erinnerung, die Youtube-Video-ID ist und gehen weiter in dem wir das Bild, das wir vorab schon dort drin haben, wo wir spaeter die Videos angezeigt bekommen wollen. Jetzt kontrollieren wir noch mal den Container, in dem wir unsere Videos haben wollen und leeren ihn, sollte sich noch etwas darin befinen ($("#show_me").empty();).
  Jetzt wollen wir, nachdem wir uns vergewissert haben, dass in unserem Videocontainer nichts mehr drin ist, das Video einbinden ( $("#show_me").append(" ). Das Video fuegen wir ganz normal ein allerdings muss sich die URI des Videos bei jedem Klick auf die verschiedenen Bilder entsprechend aendern. Wisst ihr, wir haben uns die URI ja schon als Variable youtubeID gespeichert. Demzufolge brauchen wir nur noch folgendes:
  Der Rest des Scripts, rechnet im Prinzip nur die Breite aus, um es wie ein HoverMenue aussehen zu lassen.
  In diesem Tutorial möchte ich meine vorherige Lösung, die ich hier vorgestellt habe, optimieren und euch die bessere und einfacherere Variante vorstellen. Das Grundscript stammt dabei von huendchen, ich habe nur ein kleines Feature ergänzt.
  Kurz für die, die keine Lust haben, sich das alte Tutorial durchzulesen: Es geht hier darum, die Inhalte einer Homepage so aufzuteilen, dass es so aussieht, als würde sie zwischen verschiedenen Seiten wechseln. So spart man Platz und elegant sieht es auch noch aus. Auch hier gehe ich nur auf die technische Seite ein, das Design müsst ihr schon selbst machen. Da hier mit CSS zum designen gezielt eingegriffen werden muss, weil Klassen und IDs beibehalten (oder eben angepasst) werden müssen, ist dieses Script wohl eher etwas für Fortgeschrittene.
  Gut, wir haben eine Seite, die vier virtuelle Unterseiten mit Inhalt besitzen soll. Außerdem haben wir eine Navigation, die die Links zum wechseln zwischen den Seiten enthält:
  Die Struktur dieses Markups ist nicht besonders schwer, daher werde ich da nichts weiter zu sagen. Im Anschluss brauchen wir nur noch das folgende Script und sind eigentlich schon fertig:
  Die Divisionen werden nicht durch den Stylesheet ausgeblendet, sondern durch das jQuery-Script. Daher bekommen Besucher, die JavaScript deaktiviert haben, trotzdem alle Inhalte angezeigt, wenn auch der Seitenwechsel nicht funktioniert. Beim alten Script hätten sie nur die Startseite gesehen, die bei diesem Script übrigens immer automatisch die erste Division ist.
  Die Lösung mit jQuery bietet verschiedene Effekte, wie die Inhalte angezeigt werden sollen (schneller Wechsel, Fade-Effekt usw.).
  Der Link, dessen Seite momentan aktiv ist, bekommt die ID current zugewiesen. Somit ist es möglich, ihn mittels CSS besonders darstellen zu lassen.
  Wenn man möchte, dass der Link zur aktuellen Seite anders dargestellt werden soll, geht das kinderleicht:
  Möchte man, dass die Inhalte nicht einfach plötzlich angezeigt werden, so kann man bspw. einen Fade-In-Effekt anwenden. Dafür wandelt man das Script einfach folgendermaßen ab:
  Bei Fragen und Problemen helfe ich natürlich wie immer gerne in diesem Sammelthread oder per /m im Chat weiter.
  Mit diesem Code wird der Standardstyle festgelegt, der beim Laden der Seite erscheint.<br>Außerdem wird in diesem Code, durch das Script, der Link zum StyleSheet geändert.
  In den Klammern muss die Adresse zu den Links stehen (Beispiel: http://www.euerhoster.de/css/style1.css)
  Erklärungen zu den Codes: Solltest du noch Fragen zu den Codes haben, stelle sie im Sammelthread oder schreibe eine /m an mich.
  Natürlich gibt es noch viele andere Möglichkeiten (z.B. mit Cookies, etc.) dies zu realisieren, aber diese ist m.M.n. die einfachste.
  Dies ist ein Standardinhalt auf jeder Homepage von Knuddels. Er sieht unschön und langweilig aus. In diesem Tutorial von huendchen wird gezeigt, wie man einen eigenen Headerschriftzug einsetzen kann. Ich möchte euch in diesem kleinen Tutorial zeigen, wie ihr dem Bereich auch einen eigenen Hintergrund geben könnt! Auf dem folgenden Screenshot seht ihr, wie euer Header am Ende aussehen könnte.
  Das ganze läuft über CSS. Aufgrund der von mir verwendeten Selektorwahl solltet ihr möglichst davon absehen im Rest eures Codes das center-Element zu verwenden, denn damit könnte es zu Fehlern kommen.
  Das ist erstmal die Grundlage, die wir benötigen. Damit haben wir den gesamten Headerbereich eingenommen. Nun müssen wir definieren, wie Breit der Header sein soll (normalerweise nimmt er die volle Seitenbreite ein). Ich empfehle hier eine Breite von 600px, denn das ist die Breite die auch die HP-Inhalte und der Footer in der Regel haben. Wenn ihr größere Hintergrundbilder verwenden wollt, müsst ihr die Breite natürlich dem Hintergrundbild entsprechend anpassen.
  Nun kommt auch schon das entscheidene: Der Hintergrund. Ihr könnt einfach eine Farbe nehmen, oder auch eine Grafik - ganz wie ihr möchtet. Falls ihr selbst keine Hintergrundgrafiken erstellen könnt, bietet euch beispielsweise diese Seite von sienc Hintergrundbilder zur Nutzung an. Hintergrundafben werden mit Hex-Codes angegeben, die man auf Chatfarben.de en masse finden kann. Die Eigenschaft padding legt hier einen Innenabstand im Bereich fest, der hier von oben und unten 10px beträgt. Rechts und links habe ich keinen Innenabstand eingesetzt, weil die Inhalte ohnehin nicht zum Rand hin ragen, weil sie zentriert sind. Wichtig ist es später bei der height (s.u.) zu beachten, dass das padding (in diesem Fall 20px) eingerechnet werden und man die height somit veringern muss.
  Die mit background beginnende Zeile ist die, die hier wichtig ist. Dabei ist mein Beispiel-URL http://meinedomain/meinbild.jpg durch einen eigenen zu ersetzen. Wenn man möchte, dass das Bild wiederholt wird lässt man dort repeat stehen, wenn es nicht wiederholt werden soll ersetzt man das durch no-repeat. Alle Eigenschaften zu erklären und aufzulisten würde zu weit führen, eine Übersicht findet man aber auf CSS 4 You. Was hier allerdings noch wichtig ist, ist die Eigenschaft height, denn bei einem nicht-wiederholten Hintergrundbild ist oft eine konstate Höhe des Kastens anzugeben.
  Zuerst einmal möchte ich darauf hinweisen, dass das nur in vernünftigen Browsern (aktuelle Versionen von Firefox, Safari und Opera) und nicht im Internet Explorer funktioniert. Letzterer zeigt einfach einen weißen eckigen Kasten an. In den eben beschriebenen vernünftigen Browsern wird das Design angezeigt, das oben auf der Abbildung zu sehen ist. Die verwendeten Eigenschafen aus dem Code kann man bei CSS 4 You nachschlagen oder ergooglen, aber ich nehme an dass die Leute, die diesen fertigen Schnippsel benutzen, ohnehin nicht groß danach fragen, wie sie ihn anpassen können. *g*
  Die Entfernung oder Unkenntlichmachung der Standardinhalte auf den Knuddels-Homepages stellt einen AGB-Verstoß dar. Achtet also darauf, dass sich die Schrift immer deutlich vom Hintergrund abhebt und ihr nicht durch falschen Code etwas aus dem Header entfernt, denn das wird mit einer Sperrung der Homepage enden.