Hi,

und zwar brauche einen HTML Code für folgendes:

Ich will kleine, verhsciedene Tabellen erstellen. Platziere ich die allerdings untereinander wird meine Seite entlos lang. Also dachte ich mir, da gibt es doch solche Balken, die rechts ein + haben und dann wird die Tabelle ausgefahren...

Nun meine Frage: Wie nennt man solche Balken, wo man was verstecken kann und wie heißt der nötige Code dazu?? Wenn es geht bitte mit Beschreibung...

Wenn es geht, möchte ich bitte folgende Hintergrundgrafik der Balken haben:
http://kirmes-freizeitparks.jimdo.com/s/img/nav_bg.gif

SChriftart: Verdana
Größe: 12 Pixel
Farbe: Weiß

Danke

Hallo,

meinst du etwas in diese Richtung:

Nee ich meinte das hier:

http://community.woltlab.com/db/index.php?...t&projectID=435

Weißt Du den Code dafür??

Achso, du meinst so eine Tabelle, die wie eine Kartei funktioniert Auf der Seite ist das eigentlich so gemacht, dass man beim Anklicken von einer Zelle auf eine neue Seite weitergeleitet wird, aber ich habe dir das Gaze mit Javascript gemacht (da brauchst du keine neuen Seiten zu laden)

Das ist der Code:
<table border="0" width="500" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <table border="0" width="100%" cellspacing="1" cellpadding="0">
        <tr>
          <td width="20%" id="Eins" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,0)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 1</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,1)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 2</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,2)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 3</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,3)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 4</font></td>
          <td width="20%" align="center" bgcolor="#666666" onclick="javascript:Auswahl(this,4)" style="height: 24px; color: #FFFFFF; cursor: hand"><font face="Arial" size="2">Kategorie 5</font></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="100%" align="center" bgcolor="#EEEEEE" style="height: 60px">
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 1</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 2</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 3</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 4</font></form>
      <form name="Inhalt" action="" style="display: none"><font face="Arial" size="2">Inhalt 5</font></form>
    </td>
  </tr>
</table>
<script type="text/javascript">
<!--
var Kategorien = new Array();
var ausgewaehlt = 0;

if(document.getElementById)
{
Kategorien[0] = document.getElementById("Eins");
Kategorien[0].style.color = "#333333";
Kategorien[0].style.backgroundColor = "#00FF00";
document.Inhalt[0].style.display = "";
}
else
ausgewaehlt = -1;

function Auswahl(Objekt,Objektindex)
{
if(!Kategorien[Objektindex])
Kategorien[Objektindex] = Objekt;

if(ausgewaehlt>-1)
{
Kategorien[ausgewaehlt].style.color = "#FFFFFF";
Kategorien[ausgewaehlt].style.backgroundColor = "#666666";
document.Inhalt[ausgewaehlt].style.display = "none";
}

Kategorien[Objektindex].style.color = "#333333";
Kategorien[Objektindex].style.backgroundColor = "#00FF00";
document.Inhalt[Objektindex].style.display = "";

ausgewaehlt = Objektindex;
}
//-->
</script>
Beim Anklicken einer Zelle wird der entsprechende Inhalt sichtbar gemacht. Wenn du eine Kategorie hinzufügen möchtest, fügst du bei den Zellen in dem table einfach eine neue Zelle ein (kopiere am Besten eine von den bereits vorhandenen Zellen).

Was beim Hinzufügen sehr wichtig ist, ist die rot geschriebene Indexnummer für die Zellen. Diese Nummer musst du anpassen, weil sie angibt, um die wievielte Zelle es sich handelt (Zählung beginnt bei 0, daher hat die erste Zelle eine 0, die Zweite Zelle eine 1, usw). Entsprechend dieser Nummer wird nämlich die Zelle grün eingefärbt und deren Inhalt sichtbar gemacht.

In den blau geschriebenen Bereichen kommt der Inhalt hin, der beim Klick auf die entsprechende Zelle erscheint.

Dieses Javascript funktioniert in allen Browsern, die CSS können. Browser, die getElementById() unterstützen, färben beim Laden der Seite automatisch die erste Zelle grün ein und lassen deren Inhalt erscheinen. W3C valide ist das Javascript natürlich auch