(CSS)(HTML) Denkblockade :(

[Ole]

hi

ich schreibe grade ein kleines treemenue, mit hilfe von JS und CSS.
die funktion ist zwar für mein problem nicht relevant, ich bin aber so stolz drauf, dass ich die trotzdem poste ;)

function sichtbar(blabla)
{
if (document.getElementById(blabla).style.display == "block")
 {
 document.getElementById(blabla).style.display = "none";
 }
else
 {
 document.getElementById(blabla).style.display = "block";
 }
}

ich weiß, ich weiß...ist popelkram, aber mir gefällts :D.
zurück zum thema...mit hilfe dieses scriptes möchte ich ein treemenu realisieren...was im prinzip ja auch kein problem ist.
meine ersten erfolge habe ich mit listen <ol> gehabt, da hat auch alles ganz toll geklappt.
jetzt hab ich aber größere ansprüche und zwar möchte ich vor jedes element auch bilder haben...im prinzip soll es so aussehen wie bei outlook.

zur veranschaulichung hier ein Bsp.:

[x] Text
 |-[x] Text
 |-[x] Text
 |  |-[x] Text
 |  |  |-[x] Text
 |  |  L-[x] Text
 |  |-[x] Text
 |  L-[x] Text
 L-[x] Text

damit keine zwischenräume zwischen den grafiken ("[x]", "|-", "|", "L-") sind habe ich gedacht ich nehme tabellen dafür
(romy hatte vor ein paar tagen ein problem mit dem nahtlosen platzieren von bildern...sowohl übereinander als auch untereinander...aus diesen thread (http://forum.de.selfhtml.org/archiv/2003/1/34004/#m184944) ergab sich die lösung mit den tabellen).

hier die schematische darstellung der aufteilung:

|-----------------------------------|
| [x]| TEXT                         |
|-----------------------------------|

|-----------------------------------|
|    | |---------------------------||
| |- | | [x]| TEXT                 ||
|    | |---------------------------||
|-----------------------------------|

|-----------------------------------|
|    | |---------------------------||
|    | |    ||--------------------|||
| |  | | |- || [x]| TEXT          |||
|    | |    ||--------------------|||
|    | |---------------------------||
|-----------------------------------|

Ich hoffe es wird klar wie ich das immo realisiere.

vieleicht ist es nicht ganz uninteressant zu wissen das ich die ganze struktur des menues via ColdFusion aus einer datenbank hole.
jetzt wisst ihr auch das das ganze dynamisch erzeugt werden soll...hab ich was vergessen? *grübel*...ich hoffe mal nicht.

ich muß glaube ich nicht extra erwähnen das ich es recht umständlich finde für jede zeile die neu dazu kommt eine neue tabelle zu schreiben und obendrein noch, wenn eine neue ebene dazukommt die tabellen noch weiter zu verschachteln.

hat jemand eine idee wie ich mir die ganze sache einfacher machen könnte...mir fällt immo nix ein (totale denkblokade inkl. betriebsblindheit).

es sollten nur folgende kriterien erfüllt werden könne:

1. die images sollen nahtlos aneinandergeschmiegt sein
2. der text soll vetical zentriert sein (relativ zu den bildern)
      Erklärung: der text soll im prinzip mittig neben dem bild sein
3. das ganze sollte dynamisch realisiert werden können

das ist im prinzip alles...

hoffe mir kann jemand helfen...ich habe mir echt mühe gegeben mein problem ausführlich zu schildern :)

so long
ole
(8-)>

[romy]

Hi Ole,

[x] Text
|-[x] Text
|-[x] Text
|  |-[x] Text
|  |  |-[x] Text
|  |  L-[x] Text
|  |-[x] Text
|  L-[x] Text
L-[x] Text

Ich würde an dieser Stelle eher auf den Tip mit dem direkt ohne Zeilenumbruch aneinanderreihen verwenden. Da Du ja eh JS verwendest wie Du sagst, lässt Du ja sicherlich diese Zeilen generieren. Also kannst Du es Übersichtlich bei Dir haben und trotzdem den Text direkt nebeneinander setzen.
Damit hast Du nämlich nur eine Tabelle und ein Spalte je Menu-Zweig und das ist IMHO günstiger.
Also: <img1><img2><img3> Text

ciao
romy

[Robert Bamler]

Hallo Ole,

damit keine zwischenräume zwischen den grafiken ("[x]", "|-", "|", "L-") sind habe ich gedacht ich nehme tabellen dafür

Eine andere Möglichkeit, die vielleicht nicht ganz gerne gesehen wird, aber im Prinzip funktioniert und sicher einfacher ist, sind Blindgifs. Die eignen sich aber nur, wenn du dir sicher bist, dass der Text neben den Bildern nicht umgebrochen wird bzw. wenn du genau weißt, wo er umgebrochen wird. Dann müsstest du für "[x]", "|-", "|" und "L-" jeweils kleine Bildchen *der gleichen Größe* erstellen. Dazu kommt noch ein genauso großes Blindgif (transparentes Bild) für alle Stellen, wo nichts erscheint.

Sei "[ ]" das Blindgif. Dann wäre ein Beispiel:

[x] 1
[|] [x] 1.1
[|] [x] 1.2
[|] [+] [x] 1.2.1
[|] [L] [x] 1.2.2
[|] [ ] [+] [x] 1.2.2.1
[|] [ ] [+] [x] 1.2.2.2
[|] [ ] [L] [x] 1.2.2.3
[x] 2

Dann kannst du um alles, was sich ein- und ausblenden lässt einen div schreiben:

[x] 1
<div id="div_1">
  [|] [x] 1.1
  [|] [x] 1.2
  <div id="div_1_2">
    [|] [+] [x] 1.2.1
    [|] [L] [x] 1.2.2
    <div id="div_1_2_2">
      [|] [ ] [+] [x] 1.2.2.1
      [|] [ ] [+] [x] 1.2.2.2
      [|] [ ] [L] [x] 1.2.2.3
    </div>
  </div>
</div>
[x] 2

Und diese Divs kannst du dann einzeln sichtbar- und unsichtbar machen. Das hat außerdem den Effekt, dass ein div, der selbst sichtbar wäre, sich aber in einem unsichtbaren div befindet, auch unsichtbar ist. Wenn also beispielsweise div_1_2 ausgeblendet wird, ist auch div_1_2_2 unsichtbar. Wird div_1_2 wieder eingeblendet, dann wird auch div_1_2_2 wieder sichtbar. Wenn zuerst div_1_2_2 ausgeblendet wird, anschließend div_1_2 ausgeblendet wird und dann div_1_2 wieder eingeblendet wird, dann ist auch div_1_2_2 noch unsichtbar, wie man es vom Windows-Explorer kennt.

Ich hab' sowas ähnliches mal gemacht (damals noch mit document.all). Wenn du willst, kann ich dir den Quelltext und die Bildchen schicken. Die Bilder sind direkt aus dem Windows-Explorer herauskopiert (ist glaub' ich kein Urheberrechtsbruch).

Viel Erfolg,
Robert