Anlegen eines Informationsmenüs

[Shalec]

Hallo,

zunächst möchte ich einen Rat, ob man Tabellen überhaupt noch braucht, oder ob <div> das gleiche bewerkstelligen können? Mittels CSS sieht das ja tatsächlich identisch aus.
Was ist besser im Zusammenspiel mit php?


Nun zur Kernfrage:
Angenommen, ich habe eine Tabelle oder äquivalente <div>, wie z.B.

<table class="bewertung">
  <tr>
    <td class="name">
      Name
    </td>
    <td class="punkte">
      Blatt01
    </td>
  </tr>
  <tr>
    <td class="name">
      Teilnehmer
    </td>
    <td class="punkte">
      Punktezahl
    </td>
  </tr>
</table> 

oder alternativ:

<div class="bewertung">
  <div class="zeile">
    <div class="spalte name">
      Name
    </div>
    <div class="spalte punkte">
      Blatt01
    </div>
  <div class="zeile">
    <div class="spalte name">
      Nutzer
    </div>
    <div class="spalte punkte">
      Punktezahl
    </div>
  </div>
</div> 

Nun möchte ich nicht nur die Punktezahl ausgeben, sondern, wenn der Nutzer auf das entsprechende Feld mit der Maus fährt, dass sich dort, ohne den Rest zu verschieben, ein "Fenster" ausfährt, wo nochmal eine Tabelle enthalten sein wird. (Bepunktung der Teilaufgaben)

Ich hatte schon versucht, die Inhalte mittels <ul> zu strukturieren, aber dann ist die Tabellenzelle so groß, wie alle Informationen, die darin hinterlegt sind.

Gleiches Prinzip mit einer <div> hier gebe ich die Höhe und Breite der Zelle vor, und gebe im CSS "overflow: hidden" an. Weiter hatte ich schon mit einem z-Index versucht das darzustellen.
Aber irgendwie, sieht es alles nicht so toll aus.

Wie würdet ihr sowas anlegen? Oder wie würdet ihr sowas strukturieren, damit die Darstellung möglichst "schön" erscheint?

Viele Grüße und vielen Dank

>>ich habe übrigens die Boardsuche verwendet, und keine Themen hierzu gefunden, was mich aber verwundert, da ich sicher nicht der einzige bin, der diese Frage schon jemals gestellt hat.

[tr0y]

Das nennt man Fly Over was du willst.

[mermshaus]

zunächst möchte ich einen Rat, ob man Tabellen überhaupt noch braucht, oder ob <div> das gleiche bewerkstelligen können? Mittels CSS sieht das ja tatsächlich identisch aus.
Was ist besser im Zusammenspiel mit php?

Tabellen sind das semantisch korrekte Element zur Auszeichnung tabellarischer Daten. (Im Sinne von: Tabelle der Fußball-Bundesliga.) Daran hat sich nichts geändert. Die kannst du für deinen Anwendungsfall also definitiv verwenden, wenn du tabellarische Daten hast, was ja der Fall zu sein scheint.

„Tabellen nicht benutzen“ bezieht sich immer auf Tabellen, die zu Layoutzwecken eingesetzt werden, um etwa Header, Footer, Seitenspalte und dergleichen zu schaffen. Von tabellarischen Daten kann man bei so was nicht wirklich reden, weshalb das HTML-Element <table> für derlei Aufgaben die falsche Wahl ist. Damit würde eine Semantik impliziert („hier Tabelle mit Daten“), die nicht zu den Inhalten passt.

(Weil ich es gerade sehe: Gibt auch noch ein th-Element für Kopfzeilen in Tabellen.)

Aus PHP-Sicht ist das alles irrelevant.

Nun möchte ich nicht nur die Punktezahl ausgeben, sondern, wenn der Nutzer auf das entsprechende Feld mit der Maus fährt, dass sich dort, ohne den Rest zu verschieben, ein "Fenster" ausfährt, wo nochmal eine Tabelle enthalten sein wird. (Bepunktung der Teilaufgaben)

Das geht mit CSS (mit Einschränkungen) oder mit JavaScript.

Ich würde etwa nach „javascript tooltip html“ oder „css tooltip html“ suchen.

Hier ist eine Liste mit etlichen Ansätzen:

- http://www.smashingmagazine.com/2007...ipt-css-dhtml/ (allerdings schon einige Jahre alt)

Hier ist zum Beispiel eine Lösung, die wohl nur CSS nutzt:

- http://www.webdesignerdepot.com/2012...-css3-tooltip/

Das waren jetzt aber nur die erstbesten Suchtreffer. Empfehlen kann ich spontan nichts.

[Shalec]

Vielen Dank für die zahlreichen Informationen. Damit komme ich sicherlich zum Ziel.

Viele Grüße

[SebTM]

Hallo,

wenn du es dir etwas leichter machen willst - könntest du auch ein Frontend-Framework âla Twitter Bootstrap, Foundation o.ä. verwenden ...