Das Forum zu Nutzerseiten.

Tabs einfügen

#940417 von Worgianer
09.01.2013, 22:02
wollte mal wissen wie ich da mehrere Tabs haben kann
mit CSS und C++ und wie das ganze heißt hab ich nix am hut und würde demenstprechend wenigstens gerne wissen wie man mehrere Tabs hat

danke im vorraus :lol: 8)
-0
+0

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.

Re: Tabs einfügen

#940420 von LukeSkywalker
09.01.2013, 22:05
Mit C++ hat das ganze (glücklicherweise) auch nichts zu tun ;)

Im Prinzip ist es recht einfach - du musst nur einen bestimmten HTML-Code in die Quelltextansicht einfügen, und anschließend kannst du den Text im WYSIWYG-Editor (also im Editor, wo du den Text formatieren kannst) bearbeiten.

Hast du es bereits mit den Tipps aus diesem Thema probiert (unter "Multiseiten-Layout")?
pokefans-organisation/topic65621.html

Aktuell arbeite ich ohnehin an einem kleinen Tool, das die Erstellung von Tabs vereinfacht. Ich kann dir ja mal eine kleine Vorabversion senden, das Erstellen von Tabs funktioniert damit bereits recht gut.
-0
+0

Re: Tabs einfügen

#940437 von Dark_Fire
09.01.2013, 22:38
Was verstehst du nicht? Wie man den Code einbaut? Wie man dann Unterseiten erstellt?

Lies dir das von LukeSkywalker verlinkte Thema nochmal gut durch und teste einfach ein bisschen rum, du kannst deine Nutzerseite ja auch auf Privat stellen ;)
-0
+0

Re: Tabs einfügen

#940443 von LukeSkywalker
09.01.2013, 23:06
Gut, hier ist eine etwas detailliertere bzw. einsteigerfreundlichere Beschreibung davon. Du solltest aber - wenn du die Beispiele aus dem Post ausprobieren willst - in der Quellcodeansicht arbeiten!

Noch ein paar Erklärungen: Wenn ein Text in geschweiften Klammern steht, also bspw. {TEXT}, dann bedeutet das, dass dieser Text mitsamt den geschweiften Klammern durch etwas ersetzt wird.

Eine Tabnavigation auf Benutzerseiten hat prinzipiell ein einfaches Gerüst (folgender Code ist in der Sprache HTML geschrieben - damit kannst du die Struktur deiner Seite bearbeiten, also auch die Menüpunkte):
Code: Alles auswählen<menu class="tabs">
{MENÜPUNKTE}
</menu>
(Code 1)

In dieses Gerüst kannst du nun Menüpunkte einbauen, die auf die einzelnen Seiten verweisen - also falls du eine Seite "Über mich" und eine Seite "Meine Pokémon-Angebote" anlegen willst, brauchst du zwei Menüpunkte um auf diese Seiten zu verweisen. Dieser Menüpunkt wird dann in der Tabnavigation als kleines Kästchen angezeigt - klickst du auf einen bestimmten Tab, werden die dazu verlinkten Inhalte angezeigt.

Im obigen Code findest du auch eine Stelle {MENÜPUNKTE} - anstelle davon fügst du einen oder mehrere Menüpunkte ein, was ich im nächsten Absatz erkläre.


Ein Menüpunkt besteht wieder aus HTML-Code, der diesmal etwas einfacher aussieht:
Code: Alles auswählen<li><a href="#{TABID}">{TABTITEL}</a></li>
(Code 2)

Dieser Code sorgt dafür, dass ein passendes Kästchen für jeden Tab in der Navigation erscheint. Bevor du diesen Code oben einfügen kannst, musst du jedoch noch einige Textstellen ersetzen (eben jene, die in geschweiften Klammern stehen):

  • Anstelle von {TABID} fügst du für jeden Menüpunkt den Text "tab" ein, gefolgt von einer einzigartigen Zahl - am einfachsten ist es, wenn du einfach die Menüpunkte fortlaufend durchnummerierst, also tab1, tab2, tab3, ... . Merke dir diese Kombination, da du sie noch brauchen wirst, um einem Menüpunkt auch die passende Seite zuzuordnen!
  • Dort, wo im Code {TABTITEL} steht, kannst du die Beschriftung für den Menüpunkt einfügen - also bspw. "Über mich" oder "Meine Angebote" einfügen.


Beispiel: Du willst eine Navigation mit den Punkten "Über mich" und "Tauschbasar" erstellen - das funktioniert, indem du zunächst das Grundgerüst aus (Code 1) hernimmst, und dort die einzelnen Menüpunkte einfügst, wobei du jeden Menüpunkt wie oben erstellen musst.
Das Grundgerüst wäre demnach: <menu class="tabs">{CODE}</menu>
Nun erstellst du für jeden Menüpunkt den passenden Code:

  • <li><a href="#tab1">Über mich</a></li>
  • <li><a href="#tab2">Tauschbasar</a></li>

Und jetzt kannst du diese Codefragmente zusammenfassen und im Grundgerüst anstelle von {MENÜPUNKTE} einfügen:
Code: Alles auswählen<menu class="tabs">
    <li><a href="#tab1">Über mich</a></li>
    <li><a href="#tab2">Tauschbasar</a></li>
</menu>


Wenn du diesen Code ganz am Anfang deiner Benutzerseite einfügst, sollte dort bereits ein kleines Menü erscheinen. Was jetzt noch fehlt, sind die einzelnen Seiten, die du den Menüpunkten zuordnen musst. Das ist wichtig, damit beim Klick auf einen Punkt auch die dazu passende Seite angezeigt wird.


Um das zu tun, schauen wir uns zunächst die Grundstruktur einer Seite an:
Code: Alles auswählen<div id="{TABID}">Inhalt deiner Seite</div>
(Code 3)

Du erinnerst dich noch daran, dass du jedem Menüpunkt eine einzigartige #ID zugewiesen hast (im Beispiel waren die #IDs tab1 und tab2) - jetzt benötigst du diese #ID erneut, um dem Menüpunkt auch die passende Seite zuzuordnen. Dabei musst du anstelle von {TABID} jenen einzigartigen Text einfügen, den du damals im Menüpunkt eingetragen hast, damit diese Seite auch angezeigt wird, wenn du auf den Menüpunkt klickst.

In unserem Beispiel sehen die Seiten wie folgt aus:
Code: Alles auswählen<div id="tab1">
    Die Seite "Über mich"
</div>

<div id="tab2">
    Die Seite "Tauschbasar"
</div>


Den Inhalt der Seite selbst kannst du später dann übrigens auch im Nicht-Quellcodeeditor (er nennt sich WYSIWYG-Editor) bearbeiten.


Und jetzt sind wir fast fertig. Du musst nur noch den Code für die Seiten nach dem Code für das Menü im Quelltexteditor einfügen. Gesamt sollte das Beispiel so aussehen:
Code: Alles auswählen<menu class="tabs">
    <li><a href="#tab1">Über mich</a></li>
    <li><a href="#tab2">Tauschbasar</a></li>
</menu>

<div id="tab1">
    Die Seite "Über mich"
</div>

<div id="tab2">
    Die Seite "Tauschbasar"
</div>


Wenn du die Seite jetzt abspeicherst, solltest du eine funktionierende Navigation auf deiner Seite haben (sofern ich keine Fehler gemacht habe :tja: ).

Ich hoffe, das war jetzt einigermaßen verständlich - ich arbeite wie gesagt an einem kleinen Tool, das die Erstellung einer Navigationsleiste vereinfacht, aber das wird noch ein paar Tage brauchen.
-0
+0

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast