Enrico: Grafiklinks in einer Tabelle werden nicht angezeigt

Hallo,

seit gestern beschäftigt mich die Umsetzung folgender Tabellenkonstruktion für die Anzeige unserer Gästebuch-Einträge:

+------------------------------------------+
   |                               Tabelle 2  |
   |                              +----------+|
   |Tabelle 1                     |Grafiklink||
   |                              |Grafiklink||
   |                              |Grafiklink||
   |                              |Grafiklink||
   |                              +----------+|
   |                                          |
   +------------------------------------------+

Ich habe eine äussere Tabelle ("Tabelle 1"), in deren mittleren, rechten Zelle eine weitere Tabelle ("Tabelle 2") eingebettet ist.

Tabelle 1 enthält u.a. Namen, Inhalt und Zeitstempel der Einträge, während Tabelle 2 Grafiklinks für eMail, Homepage, Kommentar- sowie Alarmfunktion (zum Melden unpassender Einträge) enthält.

Die Tabellen werden dynamisch über php zusammengesetzt, hier die Struktur im html-Format (hier nicht bedeutende css-IDs habe ich weggelassen):

+-------> <table id="Aussen">
          |            <tr>
          |               <td colspan="2"></td> <---------------------------------- Ausgabe Name
          |            </tr>
          |            <tr>
          |               <td colspan="2"></td> <---------------------------------- Trennlinie
          |            </tr>
          |            <tr>
          |               <td id="Inhalt"></td> <---------------------------------- Ausgabe Inhalt
          |               <td>
          |           +----> <table id="Innen">
          |           |         <tr>
          |           |            <td><a href="#" id="eMail"></a></td> <---------- Grafiklink
          |           |         </tr>
          |           |         <tr>
          |           |            <td><a href="#" id="Homepage"></a></td> <------- Grafiklink
Tabelle 1 | Tabelle 2 |         </tr>
          |           |         <tr>
          |           |            <td><a href="#" id="Kommentieren"></a></td> <--- Grafiklink
          |           |         </tr>
          |           |         <tr>
          |           |            <td><a href="#" id="Melden"></a></td> <--------- Grafiklink
          |           |         </tr>
          |           +----> </table>
          |               </td>
          |            </tr>
          |            <tr>
          |               <td colspan="2"></td> <---------------------------------- Trennlinie
          |            </tr>
          |            <tr>
          |               <td colspan="2"></td> <---------------------------------- Ausgabe Zeitstempel
          |            </tr>
          +-------> </table>

Hier der (meiner Meinung nach relevante) css-Code:

table#Aussen
   {
      border:          0px;
      border-spacing:  0px;
      border-collapse: collapse;
      padding:         0px;
      margin:          0px;
      width:           100%;
   }

table#Innen
   {
      border:          0px;
      border-spacing:  0px;
      border-collapse: collapse;
      height:          45px;
      padding:         0px;
      margin:          0px;
      width:           81px;
   }

td#Inhalt
   {
      border:         0px;
      border-spacing: 0px;
      font-size:      16px;
      margin:         0px;
      padding:        0px 5px 0px 0px;
      width:          100%;
   }

a#eMail,
   div#eMail_nicht_verfuegbar
   {
      background-image:  url('../Grafiken/Button__Aktion_innerhalb__eMail.png');
      background-repeat: no-repeat;
      height:            10px;
      width:             33px;
   }

a#eMail:hover,
   a#Melden:hover,
   a#Kommentieren:hover
   {
      background-position: 0px -10px;
   }

div#eMail_nicht_verfuegbar
   {
      background-position: 0px -20px;
   }

a#Homepage,
   div#Homepage_nicht_verfuegbar
   {
      background-image:  url('../Grafiken/Button__Aktion_innerhalb__Homepage.png');
      background-repeat: no-repeat;
      height:            12px;
      width:             55px;
   }

a#Homepage:hover
   {
      background-position: 0px -12px;
   }

div#Homepage_nicht_verfuegbar
   {
      background-position: 0px -24px;
   }

a#Kommentieren
   {
      background-image:  url('../Grafiken/Button__Aktion_innerhalb__Kommentieren.png');
      background-repeat: no-repeat;
      height:            10px;
      width:             81px;
   }

a#Melden
   {
      background-image:  url('../Grafiken/Button__Aktion_innerhalb__Melden.png');
      background-repeat: no-repeat;
      height:            10px;
      width:             42px;
   }

Ich habe nun das Problem, dass die Grafiklinks nicht angezeigt werden.

Die innere Tabelle wird mir ausgegeben, dies habe ich über Zuweisung einer Hintergrundfarbe getestet.

Wo liegt die Ursache dieses Problems (die Pfadangaben stimmen, da mir die Trennlinie ja auch angezeigt wird, deren Grafik sich im gleichen Verzeichnis wie die Grafiklinks befinden. Auch sind die Dateinamen korrekt übernommen. Wenn ich die Breite der Zelle "Inhalt" reduziere, dann komme ich zum gleichen Resultat)?

Vielen Dank für eure Hilfe.

Gruß
Enrico

  1. Hallo Enrico,

    seit gestern beschäftigt mich die Umsetzung folgender Tabellenkonstruktion für die Anzeige unserer Gästebuch-Einträge:

    Zum Thema Tabellenlayout äußer ich mich jetzt mal nicht ...

    <td><a href="#" id="eMail"></a></td> <---------- Grafiklink
    [...]
       a#eMail,
       div#eMail_nicht_verfuegbar
       {
          background-image:  url('../Grafiken/Button__Aktion_innerhalb__eMail.png');
          background-repeat: no-repeat;
          height:            10px;
          width:             33px;
       }

    a ist standardmäßig ein inline-Element und hat damit keine Breite - um ihm eine Breite geben zu können musst du ihm schon ein display:block; verpassen.

    Gruß,
    Tobias

    1. Hallo Tobias,

      Zum Thema Tabellenlayout äußer ich mich jetzt mal nicht ...

      Ich habe ansonsten alles per css "gelayoutet" und war der Meinung, dass Gästebucheinträge in Tabellenform ausgegeben durchaus sinnvoll ist.

      ihm schon ein display:block; verpassen.

      Das war's :-))

      Da wäre ich nie drauf gekommen.

      Danke :-)

      Gruß
      Enrico

      1. Mahlzeit Enrico,

        Zum Thema Tabellenlayout äußer ich mich jetzt mal nicht ...

        Ich habe ansonsten alles per css "gelayoutet" und war der Meinung, dass Gästebucheinträge in Tabellenform ausgegeben durchaus sinnvoll ist.

        Wieso sollte es? Bei Gästebucheinträgen könnte es sich zwar um tabellarische Daten handeln - nicht jedoch bei der Art und Weise, wie Du sie aufbaust. Eine Liste von Gästebucheinträgen ist genau das: <http://de.selfhtml.org/html/text/listen.htm@title=eine Liste>.

        Und Zitat 1068 gilt weiterhin ...

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:& n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. Mahlzeit Enrico,

    Die Tabellen werden dynamisch über php zusammengesetzt, hier die Struktur im html-Format (hier nicht bedeutende css-IDs habe ich weggelassen):

    Dynamisch zusammengebaut? Naja, klar - es kann ja schließlich mehrere Gästebucheinträge geben.

    Was mich nur wundert, dass Du hier ...

    +-------> <table id="Aussen">

    ... offenbar fix immer die gleiche ID vergibst - und damit invaliden HTML-Code erzeugst: eine ID muss dokumentweit eindeutig sein (deshalb heißt sie ja auch "ID").

    Du möchtest vielleicht eher Klassen verwenden ...

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:& n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|