Du bist nicht angemeldet. [Anmelden]
Dieses Thema ist vormoderiert, das bedeutet, neue Beiträge müssen erst von einem Moderator dieses Forums freigeschaltet werden, bevor sie für alle sichtbar werden.
Optionen
Thema bewerten
Sammelthread für Tutoriale und Codehilfen **** - #1685101 - 30.01.2009, 15:55:59
Scnappi
Nicht registriert


Tutoriale und Codehilfen

Herzlich Willkommen im neuen Sammelthread für Tutoriale und Codehilfen! In diesem Thread kann jeder, der ein bestimmtes Wissen über die Homepage-Erstellung hat, eine Anleitung (bzw. ein Tutorial) schreiben, in der er dieses Wissen weitergibt. Dabei geht es nicht darum, hier möglichst viele verschiede Codes zusammeln, sondern darum, diese Codes zu erklären und Verständnis zu schaffen. Der Leser soll die Codes nicht kopieren und leicht für sich abändern, sondern er soll sie verstehen.



Hinweise zur Form der Tutoriale:
  • Erklärt Eure Codes möglichst ausführlich mit verschiedenen Beispielen.
  • Verwendet wenn Ihr Codes schreibt vielleicht verschiedene Farben, um die Bedeutung hervorzuheben.
  • Auch weiterführende externe Links zu eurem Tutorial sind gerne gesehen, damit man seine Kenntnisse, die man durch Euer Tutorial errungen hat noch vertiefen kann.
  • Erklärt Ihr Dinge, für die Programme (z.B. Bildbearbeitung) benötigt werden, schreibt bitte auch kurz, wo das Programm erhältlich ist und ob es beispielsweise als Testversion gedownloaded werden kann.
  • Wenn Screens das Verständnis eurer Beiträge erleichtern können, stellt bitte auch Screens dazu hier rein. Das kann vor allem nützlich sein, um das Resultat von Codes auf einer Homepage zu verdeutlichen.


Regeln für Tutoriale
  • Es dürfen nur Anleitungen und Codes hier veröffentlicht werden, die nicht gegen die Allgemeinen Geschäftsbedigungen (AGB) und besonderes nicht gegen die Homepage-AGB verstoßen.
  • Ihr dürft nicht einfach Tutoriale von anderen Hilfeseiten kopieren. Dazu haben wir einen Sammelthread mit behiflichen Links für die Homepagegestaltung, in den Ihr die Seite eintragen könnt.
  • Die vorgestellten Codes sollten natürlich funktionieren und eine gewisse Qualität und Ausführlichkeit besitzen. Ein-Zeilen-Codes mit kurzer Erläuterung sind nicht im Sinne dieses Threads.

Wir Moderatoren werden die Tutoriale auf die oben genannten Punkte prüfen und behalten uns vor Tutoriale, die gegen diese Regeln verstoßen aus dem Thread zu löschen.


Fragen zu den Tutorialen finden in diesem Sammelthread Platz! :-)

Euer Moderatorenteam[img]http://www.realhomepage.de/members/Sebiii14/modsign.gif[/img]


Bearbeitet von fresh-squeezed (17.10.2011, 19:44:36)

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: ] - #1685187 - 30.01.2009, 17:25:30
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
(Bild entfernt, da Bild zwischenzeitlich ausgetauscht wurde)

Hier möchte ich euch nun erläutern, wie ihr euch mit recht wenigen Kenntnissen ein eigenes kleines Layout für eure Knuddelshomepage basteln könnt. Alles, was ihr dafür braucht, ist ein Bild, welches später euer Header sein soll und ein bisschen Zeit und Verständnis für dieses Tutorial.


Schritt 1: Ihr sucht euch eine geeignete Headergrafik, zum Beispiel ein hübsches Foto. Ich habe mir dieses Bild hier ausgesucht. Das einzige, worauf ihr achten müsst, ist, dass es nicht zu breit wird. Ein querformatiges Bild mit den Maßen 500x300 Pixeln ist perfekt.

-----

2. Schritt: Habt ihr euer Bild nun gefunden, geht es auch schon ans Coden. Ich habe eine leicht verständliche Art des Layouts gewählt, damit man a) leicht nachvollziehen kann, was ich tue, und b) das Layout in den meisten Browsern gleich dargestellt wird.

Im Grunde besteht unter Layout zuerst einmal aus einer Tabelle. Diese Tabelle beinhaltet eine Spalte und zwei Zeilen, sieht also so aus:

(Bild entfernt, da Bild zwischenzeitlich ausgetauscht wurde)

Der Grundcode für die vorliegende Tabelle lautet:

Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;">
	<tr>
		<td>KOPFBEREICH</td>
	</tr>
	<tr>
		<td>TEXTBEREICH</td>
	</tr>
</table>

Zur Erklärung: <table> und </table> umschließen die Tabelle. Das <tr>-Tag sowie das korrespondiernde Schließtag leiten eine Zeile ein, <td> eröffnet eine neue Zelle. (Wer mehr zum Thema erfahrn möchte, kann sich gern die Links am Ende dieses Tutorials ansehen.) Mit dieser Tabelle, der ich eine Breite von 500 Pixeln mitgegeben habe (siehe style-Bereich der <table>), coden wir nun unser Layout. Wieso gerade 500 Pixel? Ganz einfach: unser Headerbild ist 500px breit, darum bekommt auch die Tabelle 500 Pixel zugewiesen.

-----

Schritt 3: Ihr setzt nun das Headerbild mithilfe des <img>-Tags, mit dem man Bilder einbindet, in den dafür vorgesehenen Bereich. Das sollte nun so aussehen:

Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;">
	<tr>
		<td><img src="http://i41.tinypic.com/289ct29.jpg"></td>
	</tr>
	<tr>
		<td>TEXTBEREICH</td>
	</tr>
</table>

-----

Schritt 4: Kommen wir nun zum unteren Bereich, dem Textbereich. In diesem Teil des Layouts soll sich später der Text befinden. Allerdings soll diese Zelle nicht unendlich lange werden, sondern nach einer bestimmten Länge zu einem scrollbaren "Kasten" werden. Dies realisieren wir mit einem scrollbaren Div-Layer. Also fügen wir den Grundcode eines Div-Layers in unsere Tabelle in die untere Zeile ein und weisen diesem mithilfe von CSS eine feste Größe zu:

Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;">
	<tr>
		<td><img src="http://i41.tinypic.com/289ct29.jpg"></td>
	</tr>
	<tr>
		<td>
		<div style="width:100%; height:250px;"></div>
		</td>
	</tr>
</table>

-----

Schritt 5: Unser Div hat nun eine Breite von 100% (also 500px) und eine Höhe von 250px. Browsertechnisch bedingt müssen wir nun zu einem Div in diesem Div greifen. Um zu erklären, wieso das nötig ist, müsste ich zu weit abschweifen - darum nehmt es bitte als gott.. ähm, katgegeben hin, ja? Diesem Div weisen wir jetzt einen Padding-Wert zu, damit unser Text später nicht am Rand kleben bleibt. 10 Pixel Abstand zum Rand hin dürften genügen.
Wie aber sagen wir dem Div-Layer nun, dass er scrollbar sein soll, wenn der Text länger als 250px ist? Ganz einfach, wir benutzen das Attribut overflow. Mit overflow:auto; sagen wir dem Div, dass er einen Scrollbalken erhalten soll, sobald sein Inhalt überlang ist.

Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;">
	<tr>
		<td><img src="http://i41.tinypic.com/289ct29.jpg"></td>
	</tr>
	<tr>
		<td>
		<div style="width:500px; height:250px; overflow:auto;">
		<div style="padding:10px;"></div>
		</div>
		</td>
	</tr>
</table>

-----

Schritt 6: Was nun folgt sind an sich nur noch Verschönerungen - euer Layout steht nun so schon!
Formatierung des Textes: Textformatierungen kommen in den Div mit den Höhen- und Breitenangaben. Diese können zum Beispiel wie im folgenden Code aussehen. Ich habe dort die Schriftart Verdana bei einer Größe von 10pt benutzt, eine Blockausrichtung des Textes sowie einen Zeilenabstand von 1.5em veranlasst. Diese Werte lassen sich natürlich nach Lust und Laune veriieren. Mehr dazu in den Links unten.
Text einfügen: Wohin nun aber mit dem Text? Ganz einfach: Text schreibt man hier zwischen das zweite <div> bzw. </div>. Ich habe diese Stelle mit dem Wörtchen "Text" versehen.

Warnung! Spoiler! (Langer HTML-Code)
Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px;">
	<tr>
		<td><img src="http://i41.tinypic.com/289ct29.jpg"></td>
	</tr>
	<tr>
		<td>
		<div style="width:500px; height:250px; overflow:auto; text-align:justify; font:10pt Verdana; line-height:1.5em;">
		<div style="padding:10px;">Text.</div>
		</div>
		</td>
	</tr>
</table>

Rahmen: Stimmt, das Layout sieht so noch etwas "fassungslos" aus. Das ändern wir nun. Zuerst verpassen wir der Tabelle einen 1px breiten, schwarzen Rahmen. Wer möchte, bekommt hier noch erklärt, wie er eine Trennlinie zwischen Headerbild und Text einfügt. Nun aber zum Rahmen der Tabelle, also um das gesamte Layout. Dazu ergänzt man folgenden Teil in den style-Teil des <table>-Tags (ich habe hier nur einen Auschnitt des Gesamtcodes).

Html:
<table border="0" cellpadding="0" cellspacing="0" style="width:500px; border:10px soild #000000;">
[...]
</table>

Mehr zum Thema Rahmengestaltung findet sich - wie immer - unten in den Links. Möchte man nun noch eine Trennung zwischen Header und Text, so darf man nur (!) der unteren Kante des Bildes einen Rahmen zuweisen. Ich tue das hier mal:

Html:
<img src="http://i41.tinypic.com/289ct29.jpg" style="border-bottom:10px solid #000000;">

(Zellen-)Hintergrund: Um dem Text einen farblich passenden Hintergrund zu verpassen, benötigen wir erstmal ein Hilfsmittel: einen Colorpicker. Diesen findet ihr zum Beispiel hier. Habt ihr euch für eine Farbe, zum Beispiel aus eurem Headerbild entschieden, so könnt ihr dem äußeren Div diese Farbe mithilfe von background-color als Hintergrundfarbe zuweisen. Der Div sollte dann in etwa so aussehen:

Warnung! Spoiler! (Langer HTML-Code)
Html:
<div style="width:500px; height:250px; overflow:auto; text-align:justify; font:10pt Verdana; line-height:1.5em; background-color:#ffffff;"></div>

Somit habt ihr nun ein kleines aber feines Layout für eure eigene Homepage kreiert! Was wollt ihr mehr? Viel Spaß wünsche ich euch nun noch beim Abwandeln des Tutorials für eure eigenen Zwecke und beim Kreativsein, was eure eigenen Layouts angeht!

-----

Weiterführende Links zum Thema:


Bearbeitet von lutz39 (14.05.2012, 17:14:18)
Bearbeitungsgrund: siehe blaues Edit

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: KnuddelWelli] - #1685271 - 30.01.2009, 19:12:41
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
[img]http://i39.tinypic.com/15ogn4j.jpg[/img]

In diesem Tutorial möchte ich euch anhand einer Beispielgrafik erklären, was Imagemaps sind und wie sie zu gebrauchen sind.

Foto entfernt, da zwischenzeitlich wohl ausgetauscht(Freehoster) -> zweifelhaftes Foto

Ich möchte die hier vorliegenden drei Buttons, die aus einer einzigen Grafik bestehen, verlinken. Wie ich das machen kann, ohne die Grafik dreiteilen zu müssen? Imagemap heißt das Stichwort.

So sieht das Markup einer Imagemap in meinem Falle aus:

Warnung! Spoiler! (Langer Code)
Html:
<map name="buttons">
	<area href="#" shape="rect" coords="28, 11, 74, 28" alt="A">
	<area href="#" shape="rect" coords="102, 11, 148, 28" alt="B">
	<area href="#" shape="rect" coords="176, 11, 222, 28" alt="C">
</map>

<img src="http://i43.tinypic.com/k4grk9.jpg" usemap="#buttons" width="250" height="40" border="0">

Das src-Attribut (src ~> source) des Bildes gibt den Dateipfad zum Bild "http://i43.tinypic.com/k4grk9.jpg" an. Das usemap-Attribut sagt dem Browser, auf welches map-Element er sich zu beziehen hat. border="0" bedeutet lediglich, dass der übliche blauen Rahmen unterdrückt wird.

Die area-Elemente definieren die Bereiche im Bild und binden sie an bestimmte Internetadressen (hier der Einfachheit halber mit # angedeutet). Dabei gibt das shape-Attribut in drei Auführungen, welche die geometrische Form des Bereiches angeben; das coords-Attribut gibt die Pixelkoordinaten entsprechend der gewählten Form an.

  • rect: linksoben-x, linksoben-y, rechtsunten-x, rechtsunten-y
  • circle: Zentrum-x, Zentrum-y, Radius
  • poly: x1,y1, x2,y2, ... xn,yn

Der Ursprung liegt dabei immer im linken, oberen Pixel des Bildes mit x=0 und y=0, wobei x dann nach rechts und y nach unten immer größer werden. Die meisten Bildbearbeitungsprogramme können die Pixel-Koordinaten von jedem beliebigen Bildpunkt angeben.

Ach ja, wichtig: Das alt-Attribut im area-Element stattet den Link mit einer Textkennzeichnung aus. Ohne diese Kennzeichnung bliebe die Imagemap unzugänglich für alle, die das Bild nicht sehen können. Von daher ist das alt-Attribut hier Pflicht!


Viel Spaß bei eurem nächsten Projekt - vielleicht beinhaltet es ja sogar eine Imagemap, jetzt, wo ihr einiges darüber gehört habt.


Bearbeitet von lutz39 (07.03.2012, 00:18:24)
Bearbeitungsgrund: siehe blaues Edit

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: ] - #1685715 - 31.01.2009, 14:54:29
chrixix

Registriert: 25.10.2005
Beiträge: 12.620
Dieses Tutorial stammt von [b]huendchen[/b]. Ich poste hier an seiner Stelle, da er das Tutorial in HTML verfasst hat.

HR-Elemente formschoen auszeichen

Hier zeig ich euch, wie ihr die horizontale Linie am unteren Rand eurer Seite formschoen gestalten koennt.

Das brauchen wir dazu:
    [*]euren Lieblingsbrowser (*). [*]einen Texteditor (*). ( fuer unsere Zwecke tut es Notepad ) [*]ein simples Malprogramm (*). ( hier reicht eigentlich Paint ) [*]kuenstlerisches Talent - mehr oder weniger. [*]last but not least, das kleine bisschen Motivation & Mut um euch auszuprobieren. [/LIST]

Erste Schritte:

  • Browserkompatibilitaet:Browserkompatibilitaet
  • Schwierigkeitsgrad:Schwierigkeitsgrad: leicht
  • [/LIST]

    Als erstes kuemmern wir uns um die einfache - nicht grafische - gestaltung. Ich werde immer erst den Code posten, im Anschluss die Ausgabe und danach die dazugehoerige Erklaerung. Ist eigentlich recht simpel. Viel Spass also:

    <style type="text/css" media="screen">
        hr {
           border: none;   /* Rahmen aus */
           color: #f00;    /* Farbe: rot */
           width: 50%;     /* Breite     */ 
        }
    </style>

    So sieht das dann aus:


    Erklaerung:

    Mit der ersten Definition border: none;, sagen wir dem Browser, dass wir keinen Rahmen haben, den den setzten manche Browser und dann sieht es wirklich nicht gut aus. In der zweiten Definition color: #f00;, legen wir fuer unser hr-Element eine rote Farbe fest. Hier koennten wir anstatt des Hex-Wertes auch red schreiben. In der dritten Definition width: 50%;, bestimmen wir eine prozentuale Breite. Hier bitte aufpassen, denn dieser Wert bezieht sich immer auf ein Element, dass vorher eine Breite zugewiesen bekommen hat. Haben wir z.B. ein Element das wie auf unseren HPs das 600px gross ist, wird das hr-Element 50% dieser Breite beziehen, was laut Adam Riess 300px sind. Diese Art der Breitennotation kann sehr kompliziert werden, weshalb man lieber bei der Breitenangabe mit Pixel (px) bleiben sollte. Hier hab ich das nur mal angewand um auf die Problematik anzusprechen.

    Hier gibt es dann natuerlich auch noch andere Moeglichkeiten, die nur in eurer Phantasie eine Begrengunf finden koennten. Hier noch ein - nicht grafisches - Beispiel, mit dazugehoerigem Quellcode:

    <style type="text/css" media="screen">
        hr {
           border: 3px dotted #0f0; /* Rahmen: 3px breit, gepunktet & gruen */
           height: 25px;            /* Hoehe                                */
           background: #ff0;        /* Hingergrundfarbe: gelb               */
        }
    </style>

    So sieht das dann aus:


    Erklaerung:

    Hier ist es im Prinzip genau das gleiche wie oben ausser, dass wir hier eine 3px breiten Rahmen haben, der gruen #0f0 und gepunktet dotted ist. Wir weissen dem hr-Element noch eine Groesse von 25px zu und setzen den Hintergrund auf gelb #ff0. Rot und Gruen zusammengemischt, ergibt doch Gelb ;). Ansonsten koennt ihr hier mit den verschiedenen Bordereinstellungen spielen um zu probieren, was hier noch alles moeglich ist.


    Ende Sektion eins

    Grafische <hr />-Tags:

    • Browserkompatibilitaet:Browserkompatibilitaet
    • Schwierigkeitsgrad:Schwierigkeitsgrad: mittel
    • [/LIST]

      Als Erstes, solltet ihr in euer Malprogramm gehen und euch dort irgendetwas gestalten, dass huebsch ist und euch gefaellt. Ich wollt mir jetzt nicht allzu viel Muehe machen und hab mir einfach mal eines der grafischen Beispiele vom Smashing Magazine(*) hergenommen um euch anhand dieses Beispiels zu zeigen, dass auch ganz andere Moeglichkeiten gegeben sind als nur die Linie (ob jetzt gepunktet, gestrichelt oder durchgezogen) an sich zu gestalten.

      <style type="text/css" media="screen">
          hr {
             background: url('http://i42.tinypic.com/2pyazaf.png') no-repeat;
             border: none;            /* Rahmen: keinen    */
             height: 79px;            /* Hoehe der Grafik  */
             width: 600px;            /* Breite der Grafik */
          }
      </style>

      So sieht das dann aus:

      Wie gesagt 'for the sake of time', wie es so schoen im Englischen heisst, verwende ich diese Grafik hier: Es gibt auch ein ganzes Paket vom Smashingmagazine mit solchen Grafiken, die man zu Testzwecken auch benutzen darf. Den Link findet ihr im Anhang. hr-Example

      Erklaerung:

      Hier setzten wir erstmal unser Bild mittels background und geben diesem ein no-repeat mit, damit es sich nicht wiederholt. Es waere zwar nicht unbedingt notwendig, weil wir im naechsten Schritt ein width: 600px; und height: 79px; mitgeben, dass eine exakte Breite und Hoehe angibt, sodass es sich unsere Hintergrundgrafik nicht mehr wiederholen kann aber sicher ist sicher. Hier muessen wir den Rahmen ganz entfernen, denn der Opera und Firefox wuerden einen zumeist schwarzen Rahmen um das hr-Tag generieren, was wir aber in unserem Fall gar nicht wollen, deshalb schmeissen wir es ueber border: none; ganz graus. Bei der Breite und Hoehe, muesst ihr noch genau auf die Abmessungen eurer Grafik achten, denn ansonsten kann es entweder zu klein oder zu gross werden, was nicht immer gewollt ist.

      So und jetzt noch ein letztes, besonderes Beispiel.

      • Browserkompatibilitaet:Ohne IE-Unterstuetzung
      • Schwierigkeitsgrad:Schwierigkeitsgrad: schwer
      • [/LIST]
        <style type="text/css" media="screen">
            hr {
               background: url('http://i41.tinypic.com/28ldiqw.jpg') no-repeat center;        
               border: none;            /* keinen Rahmen    */
               height: 103px;            /* Hoehe der Grafik */
            }
        
            hr:before {
               content: ''; /* automatische generierung von Inhalt */
               background: url('http://i41.tinypic.com/28cmw0h.jpg') repeat-x bottom;        
               display: block;
               height: 100%;           /* prozentuale Hoehe */
               width: 100%;          /* prozentuale Breite */
            }
        </style>

        So sieht das dann aus:

        Das ist eine Grafik ueber einer Grafik, die eine wiederholt sich, die andere ist zentriert und statisch, wiederholt sich also nicht.


        Erklaerung:

        Als erstes, gestalten wir - wie nun schon gewohnt - unser eigentliches hr-Element, indem wir ihm wieder einen Hintergrund mittels background geben. Die zwei, zusaetzlichen Werte sind zum einen: das no-repeat, was der Hintergrundgrafik sagt, dass es sich nicht wiederholen soll und zum anderen: das center - das bewirkt eine zentrierte Darstellung, sowohl in der Horizontalen als auch in der Vertikalen. Als naechstes vergeben wir eine Hoehe, diese muss genau so gross sein wie unsere vorgefertigte Grafik. Was wir hier aber nicht machen werden ist eine Breite zu vergeben, denn das hr hat den Ausgangswert von 100%, weshalb das fuer uns jetzt auch keine Rolle spielt. Der naechste Abschnitt ist interessant und auch dafuer verantwortlich, dass der Internet Explorer hier kapituliert. Er beherrscht unser Pseudoelement :before nicht. Diese 'falshe'Element sorgt dafuer, dass das Gras sich ueber die ganze Breite wiederholt. Mit content:''; erzeugen wir Inhalt - auch wenn es in diesem Fall gar kein Inhalt ist -bzw. leerer Inhalt, so ist es doch Inhalt, ich weiss isn bissel kompliziert aber nehmt es einfach mal so hin. Der Hintergrund wird mittels background erzeugt, erhaelt hier allerdings ueber repeat-x den Befehl sich ueber die x-Achse also die Horizontale zu wiederholen. Der Hintergrund wiederholt sich so lange, bis er an seine berechneten 100% kommt. Auch muss darauf geachtet werden, dass wir unsere Pseudoelement immer als Blockelement display: block; auszeichnen, ansonsten seht ihr nix. So das war es dann vorerst einmal. Bis zum naechsten Tutorial.


        Legende
          [*]
          Browserkompatibilitaet:
          alle Browser werden Unterstuetzt:alle Browser
          ohne Explorer-Unterstuetzung:Ohne IE-Unterstuetzung
          ohne FireFox-Unterstuetzung:Ohne FF-Unterstuetzung
          ohne Opera-Unterstuetzung:Ohne Opera-Unterstuetzung
          ohne Safari-Unterstuetzung:Ohne Safari-Unterstuetzung
          [*]
          Referenzen:
          Zeichenprogramme:The Gimp, Adobe, IncScape, Paint.NET
          Editoren:Notepad2 PSPad, jEdit, textMate, e
          Ref-Seiten:SmashingMagazine, CSS4You, LANtastic
          TutSeiten:W3C, A List Apart, The Styleworks
          Downloads:hr-Grafiken
          [/LIST]
            [*]
            Anmerkungen:
            Sollte etwas mal nicht so funktionieren wie hier beschrieben, dann bitte eine /m an mich. Mit einer genauen Beschreibung dessen, was nicht funktioniert und unter welchen Bedingen ( Browser, Betriebssystem, Testcase usw. ) Meine Grafiken ( Ueberschrift, letztes Beispiel & Browsergrafiken plus Schwierigkeitsgrade ) duerfen frei verwendet werden. Wie es bei den Grafiken vom Smashing Magazine bezueglich Veraenderungen u.Ae. steht weiss ich nicht, darum muesst ihr euch selber kuemmern.
            [*]
            Schwierigkeitsgrade:
            leicht:Schwierigkeitsgrad: leicht
            mittel:Schwierigkeitsgrad: mittel
            schwer:Schwierigkeitsgrad: schwer
            [/LIST]

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: chrixix] - #1687367 - 02.02.2009, 19:14:33
chrixix

Registriert: 25.10.2005
Beiträge: 12.620
Und erneut ein ausführliches Tutorial von huendchen - Viel Spaß.

bedeutungsvolle Menues

Heute mit und ueber Listenmenues.

Das brauchen wir dazu:
  • euren Lieblingsbrowser (*).
  • einen Texteditor (*). ( fuer unsere Zwecke tut es Notepad )
  • ein bisschen Motivation & Mut um euch auszuprobieren.

vertikale Menues

  • Browserkompatibilitaet:Browserkompatibilitaet
  • Schwierigkeitsgrad:Schwierigkeitsgrad: leicht

Beginnen wir ersteinmal mit einer Definition und kleineren Ueberlegungen zu Menues. Ich werde erst anfangen vertikale Menues vorzustellen und auf kleinere Eigenarten eingehen, danach die beliebten horizontalen Menues und zu guter Letzt, werde ich auf grafische Menues eingehen. Ich werde immer erst den Code posten, im Anschluss die Ausgabe und danach die dazugehoerige Erklaerung. Ich versuch es moeglichst einfach und simpel zu halten, sollte es mir nicht gelingen, dann lesst bitte noch einmal, denn irgendwann werdet ihr es schon verstehen:

Allgemeine Ueberlegungen:

Man sieht vielerorts einfache Anchor-Tags, die frei im Quellcode rumflattern und an sich auch sonst sehr unvorteilhaft ausgezeichnet sind. Dabei sind Menues nichts weiter als Aufzaehlungen -bzw. eine Auflistung von Ueberschriften unserer Unterseiten. Wieso sollte man sie dann nicht auch als solche behandeln? Ich denke mir meist, weil viele einfach Angst davor haben, sich mit dem bisschen CSS auseinander zu setzten, der dann dafuer notwendig ist. Hier will ich euch ein bisschen die Angst nehmen und euch zumindest die Grundlagen erklaeren, warum Listen die richtige Wahl sein sollten.

Quellcode:

HTML-Quellcode:
<ul>
   <li><a href="#" title="">Link 1</a></li>
   <li><a href="#" title="">Link 2</a></li>
   <li><a href="#" title="">Link 3</a></li>
</ul>
         

So sieht das dann aus:

Erklaerung:

Wir fangen an, indem wir den ganzen Inhalt in ein ul umspannen und dieser Liste auch gleich einen Namen #nav, ueber die id, geben. Das sagt unserem Browser, dass es sich hier um eine Ungeordnete Liste handelt. Mit li fuehren wir die Listenpunkte an. Innerhalb dieser Listenpunkte, kommt auch alles andere hinein, was mit unseren Links zu tun hat, demzufolge schreiben wir innerhalb von <li></li> unsere anchor-tags.

Solange ich keinen anderen HTML-Quellcode notiere, dem sog. Markup, beziehen sich nachfolgende CSS-Notierungen immer auf das obige Beispiel.

Jetzt sieht das ganze wenig anschaulich aus und ich kann mir auch schon denken, dass den Ein oder Anderen diese runden Listenaufzaehlungszeichen stoeren. Vllt. koennte man auch gleich die Farbe der anchor-tags gleich mal aendern. Gut also machen wir uns frisch ans Werk und schreiben uns unsere dafuer benoetigten Regeln mittels CSS.

Quellcode:

CSS-Code            
<style type="text/css" media="screen"> 
   ul#nav {
      list-style-item: none;
      width: 12em;
   }

   ul#nav a {
      color: #090;
      text-decoration: none;
   }
</style>
         

Sieht nun so aus:

Erklaerung:

Ueber unseren ersten Deklarationsblock (so bezeichnet man den Teil, der in den geschweiften Klammern {} ist) definieren wir fuer unsere Liste, die wir #nav genannt haben, dass wir keine Listenaufzaehlungszeichen list-style-item: none; haben wollen und vergeben auch gleich eine Breite width: 12em. Eine Hoehe ist nicht notwenig, denn diese wird 'automatisch' generiert. Im zweiten Deklarationsblock kuemmern wir uns um die anchor-tags, innerhalb der Liste ul#nav a, indem wir eine gruene Textfarbe color: #09e; notieren und die Unterstreichung mittels text-decoration: none; aufheben. Weiter tun wir hier eigentlich nichts mehr. Trotzdem haben wir eine saubere Liste, die als Menue fungiert.


horizontale Menues

  • Browserkompatibilitaet:Browserkompatibilitaet
  • Schwierigkeitsgrad:Schwierigkeitsgrad: mittel

Jetzt wollen wir aber lieber ein horizontales Menue anstatt des vertikalen. Was mache wir denn nur?! Na, kein Problem, schliesslich sind wir auf dem Weg Profis in Sachen CSS zu werden. Es gibt zwei Wege dies zu erreichen. Die erste Variante verwende ich selber eigentlich relativ selten, da sie mir als sehr unflexiebel und doof erscheint - das soll erstmal als Erklaerung reichen. Die zweite, hier vorgestellte Moeglichkeit, sieht man mich schon wesentlich haeufiger verwenden - ich steh einfach drauf. Schauen wir uns erstmal den Quellcode dazu an.

Quellcode:

CSS-Code            
<style type="text/css" media="screen">
   ul#nav li {
      display: inline;
   }
</style>
         
CSS-Code            
<style type="text/css" media="screen">
   ul#nav li {
      float: left;
      width: 4em;;
   }

   ul#nav a {
      display: block;
      text-align: center;
      padding: .2em;
   }
</style>
         

Das sieht dann so aus:

Erklaerung:

Sprechen wir erst uebers obere Beispiel danach wiedmen wir uns dem Untreren -wenns recht ist. Eine einzige Codezeile - das die so viel bewirken kann... Ja so ist das eben mit den Block - bzw.. den Inlineelementen in HTML. Blockelemente werden in der Regel untereiander angezeigt - erzeugen demzufolge also automatisch einen Zeilenumbruch. Bei Inlineelementen hat man dies nicht, die werden einfach in einer Zeile angezeigt, egal wie viele Inlineelemente man nebeneinander Notiert. Genau diese Eigenschaft machen wir uns mit dieser, einen Codezeile zu nutze, indem wir unsere Listenelemente li vom Block zum Inlineelementen ueber display: inline; machen. Natuerlich kann man dieses Verfahren grundsaetzlich auch in die andere Richtung anwenden aber hier in diesem Beispiel waere es bloedsinnig. Diese Methode ist aber u.U. nicht ganz so flexiebel wie die Zweite.

Im zweiten Beispiel arbeiten wir ueber float. Das ist auch immer so ein Thema womit viele ein Problem zu haben scheine, weil sie einerseits nicht wissen wie sie richtig floatet und anderer seits vergessen die Meisten, dass man ein float auch wieder aufgeben muss ( das nennt man clearen. ) aber das ist alles gar nicht so schwer. Im ersten Deklarationsblock floaten wir die Listenpunkte nach rechts weg float: left;, und weisen dem auch gleich mal eine Breite width: 4em; zu. Unser zweiter Deklarationsblock behandelt die Links. Wir verwandeln die anchor tags erstmal in Blockelemente mit hilfe von display: block;. Dies tun wir weil es zu Problemen in gewissen anderen Browsern kommen kann. Richten sie danach mittig aus text-align: center; und geben ihnen noch einen kleinen Innenabstand von 0.2em. Ich hab das jetzt mal in der Kurzschreibweise notiert, denn bei allen em-Werten die Dezimalstellen haben und mit Null beginnen, kann man einfach die Null weg lassen und gleich mit dem Punkt beginnen - Demzufolge wird aus 0.2em ein .2em. Schon haben wir das Gleiche erreicht wie mit dem display: inline. War doch eigentlich gar nicht so schwer .. oder?! Gut, gehen wir weiter im Text.


grafische Menues

  • Browserkompatibilitaet:Browserkompatibilitaet
  • Schwierigkeitsgrad:Schwierigkeitsgrad: schwierig

Diese Sorte von Menues ist eigentlich nicht sonderlich Anspruchsvoll, wenn man es kann aber bis man erstmal durchgestiegen ist und sich die Strunkstruktur behalten hat, koennen unter Umstaenden schon Tage, wenn nicht sogar Wochen vergehen. Ihr wisst ja: Uebung macht den kleinen Designer von Morgen. Ich werde in diesem Beispiel eines meiner eigenen Menues zeigen und anhand von Bildern und Quellcode versuchen zu erklaeren wie es prinzipiell Funktioniert. Fuer eine vertikale Darstellung, muesst ihr es selber anpassen, das ist aber auch bei weitem nicht so schwer wie die horizontale Methode. Fangen wir erst einmal einfach an, indem wir unser simples Markup schreiben.

Quellcode:

HTML-Code
<ul id="nav">
   <li id="hom"><a href="#" title="home">Home<span></span></a></li>
   <li id="abo"><a href="#" title="about">About<span></span></a></li>
   <li id="gal"><a href="#" title="galerie">Galerie<span></span></a></li>
   <li id="pro"><a href="#" title="projekte">Projekte<span></span></a></li>
   <li id="ads"><a href="#" title="werbung">Werbung<span></span></a></li>
</ul>     
         

Das sieht dann so aus:

Erklaerung:

Wirkt nicht sonderlich spektakulaer oder?! Das ist auch kein Wunder, denn Markup alleine sollte im sog. Autorenmodus ( Im Uebrigen befindet ihr euch gerade im Benutzermodus, wenn ihr hier die Farben und Bilder sehen koennt, das ist der Standartmodus. ) immer so aussehen und nur in Ausnahmefaellen, sollten Bilder oder Farben zu erkennen sein. Das jetzt aber nur als kleine Randinformation.

Ich denke hier gibt es nicht viel zu erzaehlen. Eine einfache, ungeordnete Liste, die selber einen Namen erhaelt und zusaetzlich auch alle Listenaufzaehlungszeichen einen Namen zugewiesen bekommen. Das title-Attribut ist noetig, lasst euch bitte hier auch nicht von anderen Klugscheissern was anderes einreden und verwendet es in Links immer mit. In den Links selber, platzieren wir noch ein eher bedeutungsloses <span></span>. Chris sagt hier immer: "That the point where the magic happens!". Aber kuemmern wir uns jetzt doch erstmal um unsere 'Grundformatierung'

Quellcode:

CSS-Code
<style type="text/css" media="screen">         
   #nav li {
      float: left;
      list-style: none;
   }

   #nav #hom { width: 96px;  }
   #nav #abo { width: 83px;  }
   #nav #gal { width: 101px; }
   #nav #pro { width: 116px; }
   #nav #ads { width: 124px; }

   #nav a { 
      display: block;
      height: 52px;
      width: 100%;
      position: relative;
      overflow: hidden;
      text-indent: -999px;
   }
</style>
         

Damit wuerde unser Menue folgendermassen aussehen:

Erklaerung:

Bitte nicht in Panik verfallen. Mit eurem Browser ist alles okay und ihr seht nichts weil... ach lest doch einfach weiter: In den Zeilen von 02-05 floaten wir unsere Listenpunkte, wie schon oben beschrieben und heben hier mittels der Kurznotation list-style: none; die Listenaufzaehlungszeichen verschwinden lassen. Lang geschrieben wuerde es list-style-type heissen aber so spart man sich nicht nur Code sondern kann auch list-style-image & list-style-position notieren, was dann kurz so aussehen koennte: list-style: url('bild_zum_aufzaehlungszeichen.gif') none inside; Die Zeilen von 06-10 kuemmern sich eigentlich nur um die individuellen Breitenangaben der einzelnen Aufzaehlungspunkte. Von 11-18 geben wir den anchor-tags ein bisschen was mit. Erstmal wieder das display:block, was wichtig ist damit die korrekte Darstellung erfolgen kann. Die Breite width:100% wird aus dem Elternelement bezogen (In unserem Fall sind das die Listenpunkte, die ja verschieden Breitenangaben bekommen haben). Die Hoehe height: 52px brauchen wir hier aber also notieren wir sie auch - woraus sich diese ergibt?! Dazu kommen wir gleich .. Geduld. Die relative Positionierung position: relative braucht man in der Regel nicht, hier jedoch wird sie sehr wichtig also bitte nicht vergessen oder weg lassen. overflow: hidden sorgt dafuer, dass alles was Breiter ist als unsere Links -bzw. die Listenpunkte, nicht mehr angezeigt wird. Was aber immer noch nicht erklaert, warum ihr hier nichts seht, denn dafuer ist die die letzte Notation verantwortlich. Mit text-indent: -999px; verschieben wir den Text aus dem sog. Viewport ins Nirvana. Wir werden fuer grafische Menues sowieso keinen Text brauchen.

So im Folgenden werden wir diese Grafik verwenden, die ich mittels Photoshop erstellt habe und aus der sich auch die Breiten - bzw.. Hoehenangaben ergeben. Hier muss man einfach mittels Linealwerkzeugen z.B. nachmessen. Man muss hier schon ziemlich akurat und Pixelgenau zur Sache gehen, denn sonst verhaut man das gesammte Menue. Ich hab mich hier um einige, wenige Pixel vertan. Das wird einige der Menuepunkte etwas 'huepfen' lassen beim mit der Maus drueber gehen, was uns hier aber nicht stoeren soll. Menuegrafik Jetzt werdet ihr sagen, die Grafik ist aber riessig und wieso ist der Text hier zwei mal vorhanden.. Geduld bitte, schauen wir uns doch ersteinmal den Part an, der dafuer verantwortlich ist

Quellcode:

CSS-Code
<style type="text/css" media="screen">
   #nav span {
      position: absolute;
      width: 100%;
      height: 52px;
      top: 0;
      left: 0;
      background: url('http://i37.tinypic.com/24cfup0.jpg') no-repeat;
   }

   #nav #hom a span { 
      background-position: 0 0;
      background-repeat: no-repeat;
   } 
</style>
         

Jetzt muesstet ihr wieder was sehen:

Erklaerung:

Eh was'n hier los?! Ne, nichts is los sondern genau das was wir hier definiert haben. Im ersten Deklarationsblock, kuemmern wir uns allgemein um alle span-Elemente #nav span innerhalb des Menues. Zeile 03 gibt dem Ganzen eine absolute Position postion: absolute, deshalb war auch die relative Notation in den anchor-tags notwendig. Ansonsten wuerde das span-Element sich am naechst, hoeheren Element orientieren, das eine relative Orientierung hat, weil wir doch in den Zeilen 06 & 07 ein top: 0; left: 0; vergeben. Bei der Breite wollen wir, dass sich das span-Element an sein Elternelement ( hier ist es der anchor-tag ) orientiert, was sich wiederrum an der Notatiion der Listenaufzaehlungszeichen anlehnt und so Breiten von 96px, 83px, 101px, 116px & 124px entstehen. Die Hoehe muessen wir hier vergeben sonst sehen wir nichts sehen. In der 08 Zeile fuegen wir unsere Gesammtgrafik hinzu und durch die Breiten -bzw.. die Hoehenangaben entsteht schon fast das was wir haben wollen. Nur fast, weil die Ausrichtung der einzelen Punkte noch nicht ganz stimmt, wozu wir jetzt in unserem letzten Schritt kommen. Danach ist es auch schon vorbei - haltet noch ein kleines Bisschen durch.

Quellcode:

CSS-Code
<style type="text/css" media="screen">
   #nav #hom a:hover span,
       #nav #hom a:active span,         
       #nav #hom a:focus span  { background-position: 0 -52px; }

   #nav #abo a span        { background-position: -96px 0; }         
   #nav #abo a:hover span,         
       #nav #abo a:active span,         
       #nav #abo a:focus span  { background-position: -96px -52px; }
         
   #nav #gal a span        { background-position: -179px 0; }         
   #nav #gal a:hover span,         
       #nav #gal a:active span,         
       #nav #gal a:focus span  { background-position: -179px -53px; } 
        
   #nav #pro a span        { background-position: -280px 0; }         
   #nav #pro a:hover span,         
       #nav #pro a:active span,         
       #nav #pro a:focus span  { background-position: -280px -53px; } 
        
   #nav #ads a span        { background-position: -396px 0; }         
   #nav #ads a:hover span,         
       #nav #ads a:active span,         
       #nav #ads a:focus span  { background-position: -396px -53px; }
</style>
         

Finales Ergebnis:

Erklaerung:

Was hier jetzt passiert ist, dass wir fuer die jeweilligen Bereiche einfach nur unseren Hintergrund zurecht 'ziehen'. Stellt euch das einfach so vor wie .. Ach was solls, ich zeig es euch anhand einer Grafik - ich glaub so ist es am Verstaendlichsten, denn mir gehen langsamm die Worte aus und wenn ihr meint, dass ihr hier viel zu lesen hattet, dann stellt euch mal vor wie viel ich erst dafuer schreiben musste. Grafische Erklaerung So wuerde das ganze aussehen, wenn wir es nicht floaten wuerden und wenn wir ausserhalb der rot, markierten Bereiche schauen koennten. Diese roten Fenster, muesst ihr euch als fixe, nicht verrueckbare Sichtfenster vorstellen. Hier wird nur die Hintergrundgrafik nach rechts verschoben background-position: -96px;. Beim mit der Maus drueberfahren :hover passiert genau das gleiche nur dass es eben zusaetzlich auch noch nach oben geschoben wird background-position: -96px -56px. Viel mehr passiert hier eigentlich nicht.

Ihr werdet euch sicherlich fragen, warum man das so umstaendlich machen muss?! Geht das auch nicht einfacher, wenn man es so macht, wie man es immer macht..?! Ja mag so scheinen aber das hier ist auch nicht wirklich viel mehr Aufwand, vorallendingen wenn ihr eine Homepage gestaltet, die sich ausserhalb von Knuddels bewegt, habt ihr hier den Vorteil, dass ihr das gesammte CSS auslagern koennt und somit eine saubere Trennung von Markup und Gestaltung habt. Eure Dateien werden uebersichtlicher und wenn ihr das alles auch noch lernt sauber auszukommenteiren, dann werdet ihr es selbst in 5 Jahren noch nachvollziehen koennen weil es als sehr zukunftssicher gillt. Fassen wir noch mal alles zusammen:

Gesammtquellcode:

CSS-Code            
<style type="text/css" media="screen"> 

   #nav li {
      float: left;
      list-style: none;
   }

   #nav #hom { width: 96px;  }
   #nav #abo { width: 83px;  }
   #nav #gal { width: 101px; }
   #nav #pro { width: 116px; }
   #nav #ads { width: 124px; }

   #nav a { 
      display: block;
      height: 52px;
      width: 100%;
      position: relative;
      overflow: hidden;
      text-indent: -999px;
   }

   #nav span {
      position: absolute;
      width: 100%;
      height: 52px;
      top: 0;
      left: 0;
      background: url('http://i37.tinypic.com/24cfup0.jpg') no-repeat;
   }

   #nav #hom a span { 
      background-position: 0 0;
      background-repeat: no-repeat;
   } 

   #nav #hom a:hover span,
       #nav #hom a:active span,         
       #nav #hom a:focus span  { background-position: 0 -52px; }

   #nav #abo a span        { background-position: -96px 0; }         
   #nav #abo a:hover span,         
       #nav #abo a:active span,         
       #nav #abo a:focus span  { background-position: -96px -52px; }
         
   #nav #gal a span        { background-position: -179px 0; }         
   #nav #gal a:hover span,         
       #nav #gal a:active span,         
       #nav #gal a:focus span  { background-position: -179px -53px; } 
        
   #nav #pro a span        { background-position: -280px 0; }         
   #nav #pro a:hover span,         
       #nav #pro a:active span,         
       #nav #pro a:focus span  { background-position: -280px -53px; } 
        
   #nav #ads a span        { background-position: -396px 0; }         
   #nav #ads a:hover span,         
       #nav #ads a:active span,         
       #nav #ads a:focus span  { background-position: -396px -53px; }

</style>
         

In der Legende habe ich euch eine Testdatei zusammengestellt, die nicht nur das hier Besprochene beinhaltet sondern auch noch ein vertikales Beispiel traegt. Diese Datei soll zum Rumspielen und Ausprobieren sein aber bei den zur Verfuegung gestellten Grafiken moechte ich euch bitten, dass ihr diese nur lokal verwendet also nicht irgendwo hochladen und fuer eure eigenen Grafiken ausgeben. Ich waer euch dankbar, wenn ihr diese kleine Bitte beherzigen wuerdet. Natuerlich kann man diese Menues auch hier in Knuddels verwenden. Ihr muesst euch lediglich daran erinnern, dass in Knuddels jeder Zeilenumbruch in ein <br /> umgewandelt wird. Also alles hintereinander weg schreiben ohne Umbrueche. Wie ihr aus diesen Menues auf andere Bereiche eurer Seite referenziert, behandelt wir ein anderes mal.
Ich bin hier bewusst auf Fehler, die hierbei auftreten koennen nicht eingegangen, falls sich jemand fragen sollte ob das auch wirklich alles so glatt funktioniert wie hier beschrieben habe. Die meisten Fehler betreffen sowieso nur den IE und koennen meist durch Layout(*) umgangen werden. Keine Sorge, einfach ein bisschen rumexperimentieren und Fehler machen, denn nur aus denen lernt man so, dass man es auch behaelt. So; Schicht im Schacht - Aus die Maus. Ich danke fuer die Aufmerksammkeit. Bis zum naechsten mal ~leoOperaWink


Legende
  • Anmerkungen:
    Sollte etwas mal nicht so funktionieren wie hier beschrieben, dann bitte eine /m an mich. Mit einer genauen Beschreibung dessen, was nicht funktioniert und unter welchen Bedingen ( Browser, Betriebssystem, Testcase usw. ) Ich bin hier jetzt auch bewusst nicht auf einige Probleme eingegangen, weil diese meist durch sog. Layout geben umgangen werden kann. Fragen, Probleme oder Anregungen, was man hier besser machen kann bzw. muss, dann meldet euch.
  • Schwierigkeitsgrade:
    leicht:Schwierigkeitsgrad: leicht
    mittel:Schwierigkeitsgrad: mittel
    schwer:Schwierigkeitsgrad: schwer



Bearbeitet von KnuddelWelli (04.02.2010, 13:03:22)
Bearbeitungsgrund: Codefehler ausgebessert

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: ] - #1783108 - 18.06.2009, 06:31:33
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
So, damit es nicht staendig Fragen in den unterschiedlichsten Threads gibt, habt ihr hier zwei Methoden die funktionieren.

Der Moderne
Diese Methode funktioniert auf allen Browsern die Modernes CSS beherrschen also alle ausser die InternetExplorer Familie. Sie funktioniert auch ohne Javascript und ist mein persoenlicher Favorit:

Html:
<style type="text/css"><!-- 
    a[href*="http://scripts.knuddels.de/ww/knuddels.de/"] {
       background: url('http://i41.tinypic.com/2cn2ut.jpg');
       width: 600px; height: 60px;
       display: block;
    } 
    font[size='5'] b { 
       display: none;
    }
    --></style>

Dieses Script wurde hauptsaechlich von Mein Nick in folgendem Beitrag vorgestellt.

Der Faule
Beim Faulen, braucht man nichts weiter als zu kopieren und die Adresse der Grafik und die Dimensionen einzutragen und schon ist man fertig. Diese Methode funktioniert auf allen Browsern, hat allerdings den Nachteil, dass derjenige der eure Seite betrachtet, JavaScript eingeschalten haben muss. Wir jedoch sind hier in Knuddels und da hat man sein js immer eingeschalten.

Diesen Code kopieren
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"><!--
   $(function(){
      var myHeader = 'myHeader';
      var header = $('font[size="5"]');
      
      header.contents().filter(
         function() {
            var $this = header;
            if( 
               $this.find('b').hide() || 
               $this.find('a > b').hide() 
            );
            return false;
            
         } 
               
      );
           
      uri = header.children('a').attr('href').split('/');
      $('a[href*=".de/'+uri[5]+'"]').addClass(myHeader);
          
   });
--></script>

<!-- endjS // start css -->

<style type="text/css"><!--
   .myHeader{
      background: url('http://i41.tinypic.com/2cn2ut.jpg')bottom left;
      width:600px; height: 60px;
       
   /* ab hier, die Werte nicht veraendern */   
      display: block;
      text-indent: -999em;
      outline: none;
       
   }
--></style>


Im CSS Abschnitt, aendert ihr die URL, Breite und Hoehe, ganz so wie ihr es braucht.

Ich hab zu Demonstrationszwecken in beiden Beispielen einfach mal meine Grafik drin gelassen, die entfernt ihr und ersetzt sie durch eure. Solltet ihr nichts ersetzen, dann bekommt ihr im Headerbereich dieses Bild:

[img]http://i41.tinypic.com/2cn2ut.jpg[/img]

Conslusion
Sicher ist, die hier als faul bezeichnete Methode, noch ausbaufaehig und wer moechte, kann das gerne noch verbessern –bzw. modifizieren. Denkbar waere, dass man nach dem sechsten URI-Array ausschau haelt und diesen mittels Endattributselektor einbindet. Jedoch muesste man vorher erstmal filtern, was mir hier zu viel Aufwand war.

Hier koennt ihr noch ein Livebeispiel sehen:
Beispielseite auf Unite
Powered by
[img]http://promote.opera.com/opera9/468x60opera9.gif[/img]

[zum Seitenanfang]  
Zweispaltiges Layout (ohne Tabelle) [Re: huendchen] - #1800468 - 11.07.2009, 17:21:53
Scnappi
Nicht registriert


Zweispaltiges Layout (ohne Tabelle!)

In diesem Tutorial möchte ich erklären, wie man ein Layout macht, bei dem man links und rechts eine Spalte hat, in die man seinen Text schreibt.

Erstmal kurz zum Markup, das relativ einfach ist:
Html:
<div id="container">

   <div class="column left">
      <p>Inhalt der Linken spalte.</p>
   </div>

   <div class="column right">
      <p>Inhalt der rechten Spalte</p>
   </div>

   <br class="clearer" />

</div>


Wir haben einmal den umschließenden container. Der wäre so gesehen eigentlich nicht nötig. Doch die Tabelle, in die man auf der Knuddels-Homepage seinen Code schreibt, ist nur 600px breit. Der container erlaubt es uns, das Gerüst mit den zwei Spalten breiter als 600px zu machen.
Dann haben wir zwei Spalten (column). Eine ist linksfließend und die andere rechtfließend. Damit dieser Links- bzw. Rechtsfluss nach den Spalten aufhört, haben wir einen clearer.

Dann zum Stylesheet:

Html:
<style type="text/css"><!--
  #container {
      width: 800px; /* kann beliebig angepasst werden */
  }

  .column { width: 49%; }
  .left { float: left; }
  .right { float: right; }

  .clearer {
      clear: both;
      line-height: 0;
  }
--></style>


Im ersten Teilabschnitt geben wir dem container eine Breite von 800px. Die Bereite kann aber nach Bedarf angepasst werden. Anschließend weisen wir den beiden Spalten (column) eine Breite von 49% zu. Das heißt, dass sowohl die linke Spalte, als auch die rechte Spalte eine exakt 49% von 800px breit sind. Wer mitgedacht hat merkt, dass in der Mitte 2% platz sind. Diese 2% erzeugen einen kleinen Abstand zwischen den beiden Spalten, damit der Besucher wirklich direkt merkt, dass der Text nicht durchgeht. Dann geben wir jeder Spalte noch ihren Textfluss (jeweils nach links oder rechts). Dann bestimmen wir noch, dass unser clearer, der nach den Spalten den Textfluss stoppt, eine Höhe von 0 hat (ansonsten würde er einen Abstand erzeugen).

In den zwei Spalten habe ich als Beispiel jetzt einen Textabsatz (<p>Text</p>) verwendet. Natürlich kann man da auch Bilder, Überschriften, Zitate, Kästen usw. einfügen, es war lediglich ein Beispiel.

Zusammengefasst haben wir dann folgendes Gebilde im Quellcode:

Html:
<style type="text/css"><!--
  #container {
      width: 800px; /* kann beliebig angepasst werden */
  }

  .column { width: 49%; }
  .left { float: left; }
  .right { float: right; }

  .clearer {
      clear: both;
      line-height: 0;
  }
--></style>

<div id="container">

   <div class="column left">
      <p>Inhalt der Linken spalte.</p>
   </div>

   <div class="column right">
      <p>Inhalt der rechten Spalte</p>
   </div>

   <br class="clearer" />

</div>


Achtung: Ich habe jetzt zur Übersicht an diversen Stellen Zeilenumbrüche und Leerzeichen gemacht, damit der Code übersichtlich ist. Auf der Homepage müsst ihr ihn jedoch in eine Reihe schreiben, da sonst die automatischen Zeilenumbrüche eingesetzt werden.

Falls ihr etwas nicht verstanden habt, oder dieser Code bei euch nicht funktioniert, könnt ihr mich gerne im Chat per /m anschreiben. :-)

Kroko

[zum Seitenanfang]  
Re: Sammelthread für Tutoriale und Codehilfen [Re: ] - #1822932 - 12.08.2009, 13:48:02
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
[img]http://i31.tinypic.com/11ljths.jpg[/img]

Hier ein weiteres Tutorial von mir bezüglich umfließender Elemente. Dies wird mit der CSS-Eigenschaft float (und clear) realisiert, daher der Name. Hier eine Beispielgrafik für alle unter euch, die sich darunter nichts vorstellen können:

[img:left]http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg[/img] Hier seht ihr nun, dass der Text neben dem Bild verläuft und nicht darüber oder darunter. Viele fragen sich, wie das funktioniert - ich werd es euch hier erklären! :)




Zuerst such ihr euch ein Bild eurer Wahl aus, dass ihr gerne vom Text umfließen lassen wollt. Dieses fügt ihr, wie gewohnt, mit folgendem Code ein:

Html:
<img src="http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg">

Allerdings brauchen wir jetzt natürlich einen Zusatz, damit wir dem Bild sagen können, dass es vom Text umflossen werden soll. Das sieht dann so aus:

Html:
<img src="http://farm3.static.flickr.com/2565/3795094135_947ecfd689_t.jpg" style="float:right;">


Weitere Hinweise:
Gefloatete Elemente werden aus dem Dokumentenfluss genommen. Nachfolgende, normal fließende Elemente verhalten sich also, als wäre das gefloatete Element nicht vorhanden. Lediglich die Inhalte der nachfolgenden Elemente umfließen das gefloatete Element.

Ein Problem mit gefloateten Elementen ist, wie man den entlangfließenden Text davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen. Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element „größer“ ist, als es erscheint. Dadurch entsteht dann der Abstand. Die meisten Float-Elemente haben einen solchen Rand nur auf derjenigen Seite, die dem Text zugewandt ist sowie auf ihrer Unterseite.

[img:right]http://www.andreas-kalt.de/tutorials/float-theorie/clear.gif[/img]Ein weiteres "Problem": Statische Boxen ignorieren das Float einfach und richten sich an der vorausgehenden statischen Box aus. Was passiert nun aber, wenn wir der nachfolgenden (!) statischen Blockbox die Eigenschaft clear:both; zuweisen? Der obere Rand der mit clear versehenen Box wird soweit "ausgedehnt", bis diese Box unterhalb des floatenden Elements angeordnet werden kann! So ist es also möglich, viele Absätze (mit <br>) zu vermeiden und dann gleich, egal welche Auflösung der Betrachter der Seite hat, unter dem gefloateten Element weiterzuschreiben, wenn der umfließende Text zB. so kurz ist, dass er nicht bis unter das gefloatete Bild reicht.

Mögliche Werte für das float-Element:
  • 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.
  • none: das Element wird nicht umflossen.
Die float-Eigenschaft kann im übrigen jedem Element zugewiesen werden, nicht nur Bildern. :-)

Weiterführende Links / Quellen:

[zum Seitenanfang]  
Pseudo-Seitenwechsel [Re: ] - #1964006 - 27.03.2010, 18:55:42
Scnappi
Nicht registriert


Pseudo-Seitenwechsel

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. ;-)

Das wichtigste an diesem Pseudo-Seitenwechsel ist das JavaScript:
Html:
<script type="text/javascript">
function wechselDich(nummer) {
	// Hier die Anzahl aller Unterseiten eintragen:
	var anzahl = 5;
	// Ab hier nichts mehr ändern!
	for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
	document.getElementById('kasten' + nummer).style.display = "block";
}
</script>


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.

Dann brauchen wir natürlich die Kästen bzw. die einzelnen Seiten. :-)

Html:
<div id="kasten1" style="display:block;">
	<p>Seite1</p>
</div>

<div id="kasten2" style="display:none;">
	<p>Seite2</p>
</div>

<div id="kasten3" style="display:none;">
	<p>Seite3</p>
</div>

<div id="kasten4" style="display:none;">
	<p>Seite4</p>
</div>

<div id="kasten5" style="display:none;">
	<p>Seite5</p>
</div>


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;.

Nun kommt die Navigation:
Html:
<ul>
	<li><a href="javascript:wechselDich('1')" title="Inhalt der 1. Seite ansehen">Seite1</a></li>
	<li><a href="javascript:wechselDich('2')" title="Inhalt der 2. Seite ansehen">Seite2</a></li>
	<li><a href="javascript:wechselDich('3')" title="Inhalt der 3. Seite ansehen">Seite3</a></li>
	<li><a href="javascript:wechselDich('4')" title="Inhalt der 4. Seite ansehen">Seite4</a></li>
	<li><a href="javascript:wechselDich('5')" title="Inhalt der 5. Seite ansehen">Seite5</a></li>
</ul>

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").

Achtung: Ich habe jetzt zur Übersicht an diversen Stellen Zeilenumbrüche und Leerzeichen gemacht, damit der Code übersichtlich ist. Auf der Homepage müsst ihr ihn jedoch in eine Reihe schreiben, da sonst die automatischen Zeilenumbrüche eingesetzt werden.

Zusammen ergibt das folgenden Code:
Html:
<script type="text/javascript">
function wechselDich(nummer) {
	// Hier die Anzahl aller Unterseiten eintragen:
	var anzahl = 5;
	// Ab hier nichts mehr ändern!
	for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
	document.getElementById('kasten' + nummer).style.display = "block";
}
</script>

<ul>
	<li><a href="javascript:wechselDich('1')" title="Inhalt der 1. Seite ansehen">Seite1</a></li>
	<li><a href="javascript:wechselDich('2')" title="Inhalt der 2. Seite ansehen">Seite2</a></li>
	<li><a href="javascript:wechselDich('3')" title="Inhalt der 3. Seite ansehen">Seite3</a></li>
	<li><a href="javascript:wechselDich('4')" title="Inhalt der 4. Seite ansehen">Seite4</a></li>
	<li><a href="javascript:wechselDich('5')" title="Inhalt der 5. Seite ansehen">Seite5</a></li>
</ul>

<div id="kasten1" style="display:block;">
	<p>Seite1</p>
</div>
<div id="kasten2" style="display:none;">
	<p>Seite2</p>
</div>
<div id="kasten3" style="display:none;">
	<p>Seite3</p>
</div>
<div id="kasten4" style="display:none;">
	<p>Seite4</p>
</div>
<div id="kasten5" style="display:none;">
	<p>Seite5</p>
</div>


Falls ihr etwas nicht verstanden habt, oder dieser Code bei euch nicht funktioniert, könnt ihr mich gerne im Chat per /m anschreiben. :-)


Bearbeitet von Scnappi (02.09.2011, 04:11:07)

[zum Seitenanfang]  
YouTube-Karussell [Re: ] - #2011953 - 26.05.2010, 12:17:35
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Quickie: You Tube-Karussell

Als erstes kuemmern wir uns erstmal um die Inhalte.
Hier erzeugen wir einen Header, einen Container fuer ein Vorabbild und unsere Liste mit youtube Videos, die eigentlich nur eine Liste von Bildern ist.
Html:
<div id="page-wrap">
   <header>
      <h3>It's buggy right now!</h3>

   </header>
   <figure id="show_me">
     <img class="hide" style="width: 480px; height: 385px;" src="http://i46.tinypic.com/20jg6cg.jpg" alt="default picture">

   </figure>
   <nav class="yt_menu">
      <ul id="miniImg" class="yt_menu">
         <li><a><img id="6mxzBYuZ5wE" src="http://img.youtube.com/vi/6mxzBYuZ5wE/default.jpg"/></a></li>
         <li><a><img id="WnciA7vP2a4" src="http://img.youtube.com/vi/WnciA7vP2a4/default.jpg"/></a></li>
         <li><a><img id="7VpBbh9nSWs" src="http://img.youtube.com/vi/7VpBbh9nSWs/default.jpg"/></a></li>
         <li><a><img id="H7JxUcmn6Q8" src="http://img.youtube.com/vi/H7JxUcmn6Q8/default.jpg"/></a></li>
         <li><a><img id="W2Hr27zmbHo" src="http://img.youtube.com/vi/W2Hr27zmbHo/default.jpg"/></a></li>
         <li><a><img id="mm38I6GhLIQ" src="http://img.youtube.com/vi/mm38I6GhLIQ/default.jpg"/></a></li>
         <li><a><img id="KkezNWVd_jA" src="http://img.youtube.com/vi/KkezNWVd_jA/default.jpg"/></a></li>
         <li><a><img id="uCz1TSkuQyc" src="http://img.youtube.com/vi/uCz1TSkuQyc/default.jpg"/></a></li>
         <li><a><img id="TlpRYO2EKww" src="http://img.youtube.com/vi/TlpRYO2EKww/default.jpg"/></a></li>
      </ul>

   </nav>

</div>

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:
[img]http://localhostr.com/files/d37022/addressbar.png[/img]
Ich habe hier die Video ID mit einem gelben Hintergrund markiert.
Wir setzten auch bei der ID im Bild die Video ID, denn die wird spaeter noch mal entscheidend.

So jetzt, gehen wir weiter zu ein bisschen Visuelergestaltung ueber...
Html:
<style><!--
div, ul {margin: 0; padding: 0}
body { 
   text-align: center; 
   background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
   font:13px/1.231em 'Arial';
 }
   
section, article, nav { display: block; }
         
div#page-wrap {
   margin: 0 auto;
   width: 588px; 
   padding: 0 5px;  
   border: 1px solid #000; 
   border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

nav.yt_menu { 
   position: relative; 
   height: 110px; 
   width: 590px; 
   overflow: auto;  
   padding: 10px 0; 
   margin-bottom: 8px; 
   clear: left; 
}       

li { list-style: none; display: inline; } 
ul.yt_menu { 
   height: 110px;  width: 1288px;  
   padding: 12px 0 0 5px;
   text-align: center; 
   background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
} 
.yt_menu li a { float:left; padding: 0 4px; }
.yt_menu img { 
   border: 3px #fff solid; 
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;  
   padding: 0 5px; 
}
.yt_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; }
--></style>

Zuerst Nullen wir die Abstaende von Divisionen und ungeordneten Listen.
Ordnen dem Body neben einer allgemeinen Schriftart und einem Hintergrund und gestalten unseren Text mittig.
Jetzt, registrieren wir noch einige neue Elemente aus HTML5.

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.

Jetzt kommen wir zum Interessanten Teil.
Code:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Die erste Anweisung, registiert die HTML5 Elemente auch im Internetexplorer.
In der zweiten Anweisung laden wir unser JavaScript Framework jQuery.
Uns schreiben jetzt selber noch ein bisschen JavaScript, mithilfe von jQuery
Warnung! Spoiler!

Html:
<script><!--
   $(function(){
      var youtubesrc = $('#miniImg>li>img').attr('src');

      $("#miniImg img").click(function(){
         var youtubeID = $(this).attr("id");
         $('.hide').fadeOut();
         $("#show_me").empty();
         $("#show_me").append("<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"'></param><embed src='http://www.youtube.com/v/"+youtubeID+"' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();
      });

      var div = $('nav.yt_menu'), ul = $('ul.yt_menu'), ulPadding = 15;
      var divWidth = div.width();
      div.css({overflow: 'hidden'});
      var lastLi = ul.find('li:last-child');

      div.mousemove(function(e){
         var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
         var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
         div.scrollLeft(left);
      });
   });
--></script>

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.

Jetzt wenden wir einen sog. Klick-Event auf alle Bilder an ( $("#miniImg img").click(function(){ ).
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:
Warnung! Spoiler!
<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"'></param><embed src='http://www.youtube.com/v/'"+youtubeID+"' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();


Der Rest des Scripts, rechnet im Prinzip nur die Breite aus, um es wie ein HoverMenue aussehen zu lassen.
Hier noch mal eine Zusammenfassung des Ganzen:
Warnung! Spoiler!
Html:
<style><!--
   div, ul {margin: 0; padding: 0}
   body { text-align: center; background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;background: -moz-linear-gradient(center bottom,rgb(232, 215, 247)) 11%,rgb(248, 240, 255) 30%,rgb(240, 243, 255) 79%);background: -moz-linear-gradient(19% 75% 90deg,#E8D7F7, #F0F3FF, #F8F0FF 100%);font:13px/1.231em 'Arial'; }
   section, article, nav { display: block; }
         
   div#page-wrap {padding: 0 5px; text-align: center; width: 588px;margin: 0 auto; border: 1px solid #000; border-radius: 10px; -moz-border-radius: 10px;}
         
   ul {padding-left: 0;}
   li { list-style: none; display: inline; } 
         
   nav.yt_menu { position: relative; height: 110px; width: 590px; overflow: auto;  padding: 10px 0; margin-bottom: 8px; clear: left; }
   ul.yt_menu { display: block; height: 110px; width: 1288px;  padding: 12px 0 0 5px; text-align: center; 
                background: url("/sf/b/i/bg_p.png") repeat-x scroll 0 0 #f0f3ff;
                background: -moz-linear-gradient(center top, rgb(232, 215, 247)) 10%, 
                                                                rgb(248, 240, 255) 15%,
                                                                rgb(240, 243, 255) 30%);
                 } 
   .yt_menu li a { float:left; padding: 0 4px; }
         
   .yt_menu img { border: 3px #fff solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 0 5px; }
   .yt_menu a:hover img { filter:alpha(opacity=50); opacity: 0.5; }
--></style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="page-wrap"><header><h3>It's buggy right now!</h3></header><figure id="show_me"><img class="hide" style="width: 480px; height: 385px;" src="http://i46.tinypic.com/20jg6cg.jpg" alt="default picture"></figure><nav class="yt_menu"><ul id="miniImg" class="yt_menu"><li><a><img id="6mxzBYuZ5wE" src="http://img.youtube.com/vi/6mxzBYuZ5wE/default.jpg"/></a></li><li><a><img id="WnciA7vP2a4" src="http://img.youtube.com/vi/WnciA7vP2a4/default.jpg"/></a></li><li><a><img id="7VpBbh9nSWs" src="http://img.youtube.com/vi/7VpBbh9nSWs/default.jpg"/></a></li><li><a><img id="H7JxUcmn6Q8" src="http://img.youtube.com/vi/H7JxUcmn6Q8/default.jpg"/></a></li><li><a><img id="W2Hr27zmbHo" src="http://img.youtube.com/vi/W2Hr27zmbHo/default.jpg"/></a></li><li><a><img id="mm38I6GhLIQ" src="http://img.youtube.com/vi/mm38I6GhLIQ/default.jpg"/></a></li><li><a><img id="KkezNWVd_jA" src="http://img.youtube.com/vi/KkezNWVd_jA/default.jpg"/></a></li><li><a><img id="uCz1TSkuQyc" src="http://img.youtube.com/vi/uCz1TSkuQyc/default.jpg"/></a></li><li><a><img id="TlpRYO2EKww" src="http://img.youtube.com/vi/TlpRYO2EKww/default.jpg"/></a></li></ul></nav></div>
<script type="text/javascript"><!--
   $(function(){
      var youtubesrc = $('#miniImg>li>img').attr('src');

      $("#miniImg img").click(function(){
         var youtubeID = $(this).attr("id");
         $('.hide').fadeOut();
         $("#show_me").empty();
         $("#show_me").append("<object width='588' height='385'><param name='movie' value='http://www.youtube.com/v/"+youtubeID+"/&autoplay=1'></param><embed src='http://www.youtube.com/v/"+youtubeID+"&autoplay=1' type='application/x-shockwave-flash' width='588' height='385'></embed></object>").fadeIn();
      });

      var div = $('nav.yt_menu'), ul = $('ul.yt_menu'), ulPadding = 15;
      var divWidth = div.width();
      div.css({overflow: 'hidden'});
      var lastLi = ul.find('li:last-child');

      div.mousemove(function(e){
         var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
         var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
         div.scrollLeft(left);
      });
   });
--></script>


Das war es also!
Ein Livebeispiel, koennt ihr unter aboleos HP sehen.
Viel Spass damit.


Bearbeitet von Scnappi (26.05.2010, 13:23:30)
Bearbeitungsgrund: Topic angepasst.

[zum Seitenanfang]  
Pseudo-Seitenwechsel (verbesserte Version) [Re: huendchen] - #2023103 - 12.06.2010, 00:03:11
Scnappi
Nicht registriert


Pseudo-Seitenwechsel
(verbesserte Version)

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:

Html:
<div id="wrap">
	<ul id="navbar">
		<li><a href="#inhalt1" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt2" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt3" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt4" title="Beschreibung">Beispiel</a></li>
	</ul>
	<div id="inhalt1">
		<p>Hallo1!</p>
	</div>
	<div id="inhalt2">
		<p>Hallo2!</p>
	</div>
	<div id="inhalt3">
		<p>Hallo3!</p>
	</div>
	<div id="inhalt4">
		<p>Hallo4!</p>
	</div>
</div>

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:

Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).show();
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>


Vorteile gegenüber dem alten Tutorial:
  • 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.


Nutzen der Link-ID "current" - aktuellen Link hervorheben!
Wenn man möchte, dass der Link zur aktuellen Seite anders dargestellt werden soll, geht das kinderleicht:
Html:
<style type="text/css"><!--
  #current { font-weight: bold; }
  :focus { outline: 0; }
--></style>
Beispielcode, um aktuelle Links fett darzustellen.


Andere Effekte
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:
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).fadeIn("slow");
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>
Beispielcode, um die Inhalte einfaden zu lassen.


Achtung:
Ich habe jetzt zur Übersicht an diversen Stellen Zeilenumbrüche und Leerzeichen gemacht, damit der Code übersichtlich ist. Auf der Homepage müsst ihr ihn jedoch in eine Reihe schreiben, da sonst die automatischen Zeilenumbrüche eingesetzt werden.

Zusammengefasst - vollständiger Code
Warnung! Spoiler! (Vollständiger Code)
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	var inhalte = $('div#wrap > div');
	var navbar_links = $('#navbar a');
	inhalte.hide().filter(':first').show();
	$(navbar_links).click(function () {
		inhalte.hide();
		inhalte.filter(this.hash).show();
		navbar_links.removeAttr("id");
		$(this).attr("id","current");
		return false;
	});
});
</script>

<style type="text/css"><!--
  #current { font-weight: bold; }
  :focus { outline: 0; }
--></style>

<div id="wrap">
	<ul id="navbar">
		<li><a href="#inhalt1" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt2" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt3" title="Beschreibung">Beispiel</a></li>
		<li><a href="#inhalt4" title="Beschreibung">Beispiel</a></li>
	</ul>
	<div id="inhalt1">
		<p>Hallo1!</p>
	</div>
	<div id="inhalt2">
		<p>Hallo2!</p>
	</div>
	<div id="inhalt3">
		<p>Hallo3!</p>
	</div>
	<div id="inhalt4">
		<p>Hallo4!</p>
	</div>
</div>


Bei Fragen und Problemen helfe ich natürlich wie immer gerne in diesem Sammelthread oder per /m im Chat weiter. ;-)

[zum Seitenanfang]  
StyleSwitcher [Re: huendchen] - #2042780 - 19.07.2010, 14:27:45
bubub
Nicht registriert


Style Switcher für die Knuddels-Homepage

"Soll meine Homepage lieber hell oder dunkel aussehen?"
Diese Frage stellen sich viele Leute beim Erstellen der eigenen Homepage.
Doch mit dem StyleSwitcher kannst du mehrere Styles auf deine Knuddelshomepage bringen.
_______________________________________________________

Was wird benötigt?
  • TextEditor (z.B. Notepad++)
  • Browser, welcher alle CSS-Elemente korrekt darstellt, um eure Ergebnisse auszuprobieren. ;-)
  • Webspace, auf dem die CSS-Datein gespeichert werden (z.B. Square7.ch)

_______________________________________________________

Welche Kenntnisse müssen vorhanden sein?
  • HTML (mindestens: Einbindung von externen CSS-Datein)
  • CSS, damit der StyleSwitcher einen Sinn macht. ;-)

_______________________________________________________

Sourcecode
Code #1 - JavaScript:
Code:
<script type="text/javascript">
/* Dieses Script nicht verändern! */
function switchStyle(sheet)
{
	document.getElementById('myStyle').removeAttribute('href');   
	document.getElementById('myStyle').setAttribute('href', sheet); 
}
</script> 

Das Script ersetzt das alte StyleSheet durch das neue, indem es den Link im nächsten Code ersetzt:
Code #2 - HTML:
Html:
<link href="style.css" rel="stylesheet" type="text/css" id="myStyle">
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.
Code #3 - HTML:
Html:
<a href="#" onclick="switchStyle('style1.css'); return false;">Style1</a> 
<a href="#" onclick="switchStyle('style2.css'); return false;">Style2</a> 
Die Links rufen die Funktion unseres JavaScriptes (switchStyle) auf.
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.
Beispielseite: iSascha.square7.ch
Hinweise: Der Sourcecode stammt nicht von mir selbst, sondern von hier.

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.

[zum Seitenanfang]  
Eigene Header-Hintergrundgrafik [Re: ] - #2055520 - 04.08.2010, 23:58:17
Scnappi
Nicht registriert


NICKNAMEs HP
wurde schon ZAHLx mal geknuddelt | Mein Gästebuch


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. ;-)

[img]http://i35.tinypic.com/ynn2p.png[/img]
Abbildung 1: Beispieldesign

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.

Html:
<style type="text/css"><!--
center center {
    display: block;
}
--></style>

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.

Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
}
--></style>

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.

Variante 1 - Hintergrundbild
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: url('http://meinedomain/meinbild.jpg') repeat;
    height: auto; /* oder height: ZAHLpx; /*
}
--></style>

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.

Variante 2 - Hintergrundfarbe
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: #aa0000;
}
--></style>

Hier ist nun einfach die Farbe #aa0000 definiert. Es ist aber auch jede andere Farbe möglich.

Variante 3 - Hintergrundfarbe, Schatten, Rundung und Transparenz
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: white;
    /* Transparenz */
    opacity: 0.5;
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    /* Schatten */
    box-shadow: 5px 5px 5px black;
    -moz-box-shadow: 5px 5px 5px black;
    -webkit-box-shadow: 5px 5px 5px black;
    /* Rundung */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
--></style>

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*


Wichtiger Hinweis
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.


Viel Spaß beim Ausprobieren! :-]
Bei Fragen zu diesem Tutorial könnt ihr wie immer diesen Thread nutzen.


Bearbeitet von Scnappi (05.08.2010, 00:02:20)

[zum Seitenanfang]  
Anpassung der oberen Leiste [Re: ] - #2055722 - 05.08.2010, 13:16:07
Scnappi
Nicht registriert


Anpassung der oberen Leiste

Noch ein Minitutorial! ;-) Auf jeder Homepage gibt es oben diese graue Leiste mit den von Knuddels gesetzten Links. Wenn euch dieses grau zu langweilig ist, gibt es die Möglichkeit, das zu ändern.

Moderne Browser
Für alle Browser, die mit Attributselektoren umgehen können (nicht der Internet Explorer).
Html:
<style type="text/css"><!--
table[width="100%"] td {
    background: #ffffff;
}
--></style>

Hier kann die Farbe #fffff (weiß) durch jede andere ersetzt werden. Eine Liste von Hex-Farbcodes gibts es auf Chatfarben.de.

Alle Browser
Wer die Darstellung in allen Browsern möchte, hat einen minimal längeren Code vor sich, weil man den Bereich nicht einfach mit CSS auswählen kann, sondern mit jQuery eine ID zuweisen muss (für die, die es interessiert, allen anderen kann das im Prinzip egal sein, wie das funktioniert).
Html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("table[width=100%] tr td[bgcolor=#e9e9e9]").attr("id", "panel");
});
</script>

<style type="text/css"><!--
#panel {
    background: #ffffff;
}
--></style>

Der obere Teil braucht euch nicht groß zu interessieren, wichtig ist der Stylesheet unten. Dort kann die Farbe #fffff (weiß) durch jede andere ersetzt werden. Eine Liste von Hex-Farbcodes gibts es auf Chatfarben.de.

Zu Beachten ist, dass sich die Schriftfarbe der Links immer gut von der Hintergrundfarbe abheben muss, weil die Unkenntlichmachung ein AGB-Verstoß ist und zur Sperrung der Homepage führt.

Viel Spaß mit dem Tutorial. :-)

[zum Seitenanfang]  
Workaround: Homepage ohne Zeilenümbrüche anzeigen [Re: ] - #2332934 - 14.10.2011, 16:55:55
writeless
Nicht registriert


Workaround: Homepage ohne Zeilenumbrüche anzeigen

Da auf Knuddelshomepages durch den automatischen Zeilenumbruch manche Designs und Tabellen zerstört werden, wollte ich euch dazu einen Workaround vorstellen, der durch das Subforum kursiert:

Html:
<syle type="text/css">div.homepage br {display: none;}</style>

<div class="homepage">
Dein Homepageinhalt
</div>

Zur Erklärung:
  1. div.homepage br spricht die unterstehende Klasse homepage (<div class="homepage">) an.
  2. br {display: none;} fordert dazu auf, die Zeilenumbrüche nicht anzuzeigen.
  3. Falls du die Klasse homepage zu nobreak ändern möchtest, musst du das Stylesheet folgendermaßen ändern: div.nobreak br {display: none;}.
  4. Dein Homepageinhalt musst du durch deinen eignen Inhalt abändern.

[zum Seitenanfang]  
Re: Workaround: Homepage ohne Zeilenümbrüche anzeigen [Re: ] - #2529895 - 09.12.2012, 16:38:15
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Happy 2nd Advent:

Markup:
Html:
<section class="wrap"> 
	<input type="radio" name="tab" id="lorem"> 
	<input type="radio" name="tab" id="ipsum"> 
	<input type="radio" name="tab" id="dolor"> 
	
	<label class="tab-hl" for="lorem">lorum</label> 
	<label class="tab-hl" for="ipsum">ipsum</label> 
	<label class="tab-hl" for="dolor">dolor</label> 
	
	<article class="tab"> 
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. a</p> 
	</article> 
	<article class="tab"> 
		<h4>Ipsum</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. b</p> 
	</article> 
	<article class="tab"> 
		<h4>Dolor</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. c</p> 
	</article> 
</section>
An und für sich, nichts besonderes. Drei Radio-Buttons mit entsprechenden Labeln, die die Ueberschriften des Contentinhaltes darstellen. Zu guter letzt ein bisschen Content ( Inhalt ) der jeweils in einem Articel eingeschlossen ist und eine Ueberschrift h4 und ein bisschen Text (p) in sich birgt. Die section und articel - Bereiche lassen sich auch durch Divisionen (div) ersetzen. Soviel dazu.

Jetzt zum noetigen CSS:
Html:
<style>
	section, article { display: block }
	
	.wrap { width: 600px; margin: 10px auto; }
	
	.tab, input { display: none; }
	
	.tab-hl { cursor: pointer; display: inline-block; padding-left: 5px; text-decoration: underline; }

1 Zeile: section -und articlebereiche als blockelemente darstellen, falls sie verwendet werden.
2 Zeile: dient eigentlich nur der Optischen darstellung des Inhaltsconteiners und sorgt dafür, dass das in der mitte dargestellt wird.
3 Zeile: die Radiobuttions (input) und der Contentbereich (.tab) werden ersteinmal versteckt.
4. Fuer die Ueberschriften, wird der Mauszeiger zu einem Pointer umgewandelt, damit man einen visuellen Hinweis darauf hat, dass hier eine Interaktion moeglich ist - in unserem Fall ist es das klicken. Danach werden die Ueberschriften horizontal positioniert ( display: inline-block ) und ein Abstand zueinander generiert (padding-left: 5px). Zu letzt kommt nur nur ein Aufhuebschungseffekt, der dafuer sorgt, dass die Ueberschriften unterstrichen werden ( text-decoration: underline ).

So jetzt kommen wir zum eigentlichen wulla-wulla Magic-Trick:
Html:
	.wrap input:nth-of-type(2):not(:checked) ~ input:nth-of-type(3):not(:checked) ~ .tab:nth-of-type(1),
	.wrap input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
	.wrap input:nth-of-type(3):checked ~ .tab:nth-of-type(3) { display: block; }
--></style>
Dieser Abschnitt sorgt dafür, dass beim druecken der jeweiligen Überschriften, der entsprechende Inhalt angezeigt wird. Ausschlaggebend sind die Pseudoelemente nthof-type, checked und :not.

Mehr gibt es dazu eigentlich nicht zu erzählen. Das muesste in allen aktuellen Browsern funktionieren.

Alles auf einen Blick:
Warnung! Spoiler!
Html:
<style><!--
	
	section, article { display: block }
	
	.wrap { width: 600px; margin: 10px auto; }
	
	.tab, input { display: none; }
	
	.tab-hl { cursor: pointer; display: inline-block; padding-left: 5px; text-decoration: underline; }

	.wrap input:nth-of-type(2):not(:checked) ~ input:nth-of-type(3):not(:checked) ~ .tab:nth-of-type(1),
	.wrap input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
	.wrap input:nth-of-type(3):checked ~ .tab:nth-of-type(3) { display: block; }
	
	br {display: none; visibility: hidden;}
--></style>

<section class="wrap"> 
	<input type="radio" name="tab" id="lorem"> 
	<input type="radio" name="tab" id="ipsum"> 
	<input type="radio" name="tab" id="dolor"> 
	
	<label class="tab-hl" for="lorem">lorum</label> 
	<label class="tab-hl" for="ipsum">ipsum</label> 
	<label class="tab-hl" for="dolor">dolor</label> 
	
	<article class="tab"> 
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. a</p> 
	</article> 
	<article class="tab"> 
		<h4>Ipsum</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. b</p> 
	</article> 
	<article class="tab"> 
		<h4>Dolor</h4> 
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. c</p> 
	</article> 
</section>

[zum Seitenanfang]