Ein übersichtliches Verzeichnis für die Besucher

[Moe]

Hallo!
Ich habe für meine Seite bereits genügend html dateien als eine art datenbank. Eine Ansammlung von Wissen. Sagen wir mal die html dokumente tragen die Namen von Affe-Zaffe (Beudeutung ist hier jetzt nicht wichtig)und so weiter. Nun möcht ich auf meiner Seite Die Buchstaben A-Z stehen haben inklusive # Sonderzeichen stehen haben. Sobald man auf einen Buchstaben (bzw # für Sonderzeichen drückt), sollen darunter alle Namen meiner html dokumente kommen welche mit zB A anfangen wenn ich auf A drücke und so weiter. Wie ist das möglich?

 

[Efchen]

Wenn Du das im HTML-Forum stellst, muss de Antwort lauten: Mach eine Liste. Vermutlich willst Du jedes Listenelement außerdem mit einem Link versehen.

<ul>
  <li><a href="affe.html">A</a></li>
  <li><a href="baffe.html">B</a></li>
  ...
  <li><a href="zaffe.html">Z</a></li>
</ul>

Sowas kann man natürlich auch mit Hilfe eines serverseitigen Scripts und einer for-Schleife generieren lassen, aber das ist wohl eher nicht wirklich nötig.

Gruß,
-Efchen

 

[Bleistift]

Hallo,
das geht mit PHP: Wenn du für jeden Begriff eine HTML-Datei hast dann gib der Datei den erklärten Begriff als Namen. Dann müssen die Dateien alle in ein Verzeichnis. Nun brauchst du die Seite, die als Übersicht für einen Buchstaben dient. Das könnte man recht gut mit einer PHP-Seite machen bei der der Buchstabe als GET-Variable angegeben wird. Dann könnte mit einer while-Schleife das Verzeichnis mit den Dateien gelesen werden. Bei jedem Dateinamen wird überprüft, ob er mit dem Buchstaben beginnt und wenn das der Fall ist, wird ein Link angelegt. Ein Vorteil wäre dabei, dass wenn eine neue Datei mit einem Begriff hinzukommt man nirgendwo den Quelltext ändern muss um z. B. einen Link anzulegen.
mfg Bleistift

 

[Loon3y]

wäre es nicht möglich auch dies so zu gestalten:

                <table>
         <tr>
            <td width="19%" align="center">Sorted by letter:</td>
            <td width="3%" align="center">123</td>
            <td width="3%" align="center"><a href="_a.htm">A</a></td>
            <td width="3%" align="center"><a href="_b.htm">B</a></td>
            <td width="3%" align="center"><a href="_c.htm">C</a></td>
            <td width="3%" align="center"><a href="_d.htm">D</a></td>
            <td width="3%" align="center"><a href="_e.htm">E</a></td>
            <td width="3%" align="center"><a href="_f.htm">F</a></td>
            <td width="3%" align="center"><a href="_g.htm">G</a></td>
            <td width="3%" align="center"><a href="_h.htm">H</a></td>
            <td width="3%" align="center"><a href="_i.htm">I</a></td>
            <td width="3%" align="center"><a href="_j.htm">J</a></td>
            <td width="3%" align="center"><a href="_k.htm">K</a></td>
            <td width="3%" align="center"><a href="_l.htm">L</a></td>
            <td width="3%" align="center"><a href="_m.htm">M</a></td>
            <td width="3%" align="center"><a href="_n.htm">N</a></td>
            <td width="3%" align="center"><a href="_o.htm">O</a></td>
            <td width="3%" align="center"><a href="_p.htm">P</a></td>
            <td width="3%" align="center"><a href="_q.htm">Q</a></td>
            <td width="3%" align="center"><a href="_r.htm">R</a></td>
            <td width="3%" align="center"><a href="_s.htm">S</a></td>
            <td width="3%" align="center"><a href="_t.htm">T</a></td>
            <td width="3%" align="center"><a href="_u.htm">U</a></td>
            <td width="3%" align="center"><a href="_v.htm">V</a></td>
            <td width="3%" align="center"><a href="_w.htm">W</a></td>
            <td width="3%" align="center"><a href="_x.htm">X</a></td>
            <td width="3%" align="center"><a href="_y.htm">Y</a></td>
            <td width="3%" align="center"><a href="_z.htm">Z</a></td>
         </tr>
        </table>
        <table width="100%">
             <tr>
             <td align="center"><a href="gesamt.htm">Back</a></td>
          </tr>

        </table>

?

 

[Efchen]

Nein, denn Du zeichnest Deine Auflistung ja als Tabelle aus. Es handelt sich aber nicht um tabellarische Daten, sondern um eine Aufzählung/Liste. Also muss es auch als Liste ausgezeichnet werden.
Mit "Gestaltung" (das ist das Wort, was Du benutzt hast) hat das hier (weil HTML) nichts zu tun, dafür ist CSS da.

Gruß,
-Efchen

 

[Loon3y]

d.h. table durch ul und td durch li ersetzen und dann wäre es ok?

 

[Moe]

Wenn man das mit ul und li (usw) macht Dann hat man auf der Seite die buchstaben und sobald man draufklickt kommt man auf ne andere Seite. Also Zwei Sachen. Wie soll ich auf diese Weise jedem Buchtsaben mehrere "Wörter" zuordnen? Und wie mache ich es das SObald ich auf den Buchstaben drücke das erst die "Wörter" erscheinen quasi:
A
B (Wenn man draufklickt öffnen sich die beiden unteren.
Bobo
Bebe
C
D
E
......

(Ich glaub mit php wäre sowas vllt möglich. Könnte mir jemand mal ne PN schicken in der erklärt ist wie ich php überhaupt benutze und damit meine html seite "aufbessern" kann??? Oo)

 

[Efchen]

Wenn man das mit ul und li (usw) macht Dann hat man auf der Seite die buchstaben und sobald man draufklickt kommt man auf ne andere Seite. Also Zwei Sachen. Wie soll ich auf diese Weise jedem Buchtsaben mehrere "Wörter" zuordnen?

Da hatte ich Dich falsch verstanden. Aber eine Antwort hast Du ja direkt nach meiner bekommen.

Gruß,
-Efchen

 

[Loon3y]

wenn ich die liste nun horizontal mache schreib ich doch nur

.css

        #nav li {
            display: inline;
            list-style-type: none;
            padding-right: 5px;
            }

und in der htm

<div id="main">
        <ul id="nav">
            <li><a href="all.htm">ALL</a></li>
            <li>123</li>
           <li><a href="a.htm">A</a></li>
           .
           .
           .
           <li><a href="z.htm">Z</a></li>
      </ul>
bla bla bla bla bla
</div>

wie bewerkstellige ich es, das die auflistung da oben zentriert ist ohne nochmals es in ein div zu schließen?

 

[Efchen]

Auch wenn Du die Liste nochmal in ein Block-Element einschließt (ul ist auch ein Block-Element) ändert das gar nichts.
Das Problem ist, dass die Liste sich über die gesamte Breite des Fensters erstreckt und nicht dem Inhalt anpasst (ist halt ein Block-Element). Eine Möglichkeit ist, wenn alle Menüpunkte eine feste Breite haben (heißt nicht zwangsweise Einheit "px", geht auch mit "em" oder "%") und die Liste selbst als Breite die Summe der Einzelgrößen (inkl. margin/padding/border selbstverständlich) bekommt. Dann kann man sie zentrieren, wie jedes andere Block-Element auch.
Einen Versuch wert wäre es auch, der Liste selbst ein display:inline mitzugeben, ob sie sich dem Inhalt anpasst und sich dann auch zentrieren lässt.
Das müsste ich auch ausprobieren.

 

[neuroleptika]

....
Einen Versuch wert wäre es auch, der Liste selbst ein display:inline mitzugeben, ob sie sich dem Inhalt anpasst und sich dann auch zentrieren lässt.
Das müsste ich auch ausprobieren.

Das geht nicht. Dann müsstest du die Liste in ein weiteres Element stecken welchem du text-align: center; gibst.
Aber mann kann <li> display: inline; geben und <ul> als Blockelement beibehalten. Mit text-align: center; für <ul> wird der inline-Inhalt zentriert.

 ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

 li {
padding-left: 5px;
padding-right: 5px;
display:inline;
}

Leider kann man so für <a> kein display: block; nutzen.

Mit display: table; für <ul> und display: table-cell; für <li> bekommt man die Einträge nebeneinander und kann trotzdem display: block; für <a> nutzen.
Der IE bis vers.7 kennt display: table; leider nicht.
Dummerweise könnte man gerade für diesen Browser display: block; in <a> gebrauchen.


Ich würde vermutlich eine Definitionsliste (<dl>) verwenden. Sie ist ursprünglich für eine Auflistung von Abkürzungen (in diesem Fall Anfangsbuchstaben) gedacht.