|
|||
Korrekte Semantik für eine Belegungkalender
Hallo,
ich habe einen Belegungsplan erstellt. Für den Belegungsplan hab ich eine Tabelle gemacht. Die Wochentage werden horizontal angeordnet. Die Uhrzeiten Vertikal. Nun meine Frage wie Zeichne ich den Inhalt in den einzelnen Zellen korrekt aus. Der Inhalt der Zellen besteht aus:
Ich dachte zunächst an eine <dl> innerhalb der jeweiligen Zellen. Das HTML sieht jetzt also so aus: HTML-Code:
<table cellspacing="0"> <caption>Belegungsplan</caption> <tr> <th scope="col">Zeit</th> <th scope="col">Montag</th> <th scope="col">Dienstag</th> <th scope="col">Mittwoch</th> <th scope="col">Donnerstag</th> <th scope="col">Freitag</th> <th scope="col">Samstag</th> </tr> <tr> <td>9:00 bis 10:00 Uhr</td> <td>--</td> <td> <dl> <dt>Kursname</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> </tr> <tr> <td>10:00 bis 11:00 Uhr</td> <td>--</td> <td>--</td> <td>--</td> <td> <dl> <dt>Kursname</dt> <dd>Dozent</dd> <dd>Alter ab:</dd> <dd>Link</dd> </dl> </td> <td>--</td> <td>--</td> </tr> <tr> <td>15:00 bis 16:00 Uhr</td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> </tr> <tr> <td>16:00 bis 17:00 Uhr</td> <td>--</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td rowspan="4"> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> </tr> <tr> <td>17:00 bis 18:00 Uhr</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> <td>--</td> </tr> <tr> <td>18:15 bis 19:15 Uhr</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> <td>--</td> <td>--</td> </tr> <tr> <td>19:00 bis 20:15 Uhr</td> <td>--</td> <td>--</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> </tr> <tr> <td>20:30 bis 21:30 Uhr</td> <td>--</td> <td>--</td> <td> <dl> <dt>Kurs</dt> <dd>Dozent</dd> </dl> </td> <td>--</td> <td>--</td> <td>--</td> </tr> </table> Geändert von franc78 (19.11.2011 um 04:14 Uhr) |
Sponsored Links |
|
|||
Nach dem mit keiner geantwortet hat, führe ich hier meinen Monolog weiter.
Ich hab hier einen Thread zu <dl>´s gefunden, und denke das sie Semantisch die richtige Wahl sind. Bisher hat ja auch keiner widersprochen. Nun was anderes: Ich hab mir überlegt das jede Zeile 15 Minuten darstellt, und ich die Zellen je nach Dauer der Kurse verbinde. Also z.b. in der Spalte Montag die vier Zellen von 10:00 Uhr bis 11:00 Uhr. Das Ergebnis ist viel übersichtlicher aber der Quelltext wird enorm aufgebläht und das Schreiben ist richtig Arbeit . Tabellen werden mit einfach nicht sympathischer. Hat hier jemand eine bessere Idee? |
Sponsored Links |
|
|||
Hallo,
kannst du ruhig so machen, wenn s dl Liste sein soll. Aber nicht vergessen: table td { vertical-align: top; } mit zu geben, damit sich deine dl Liste anpassen tut. ___________ Gruß, Roland |
|
|||
Habs jetzt so gemacht das die <dl>´s nur bei hover angezeigt werden.
In den IE´s < 7 werden sie immer dargestellt, dafür werden die die Überschriften in der Tabelle ausgeblendet. Hab aber einen Fehler im IE7. Da wird die <dl> von den folgenden <td>'s überdeckt . Weiß jemand warum, und wie ich das beheben kann? Hier der Link: Tanz und Bewegung - Physiotherapie Flisar in Treuchtlingen - ( Aktuelle Terminliste für der Raum für Tanz und Bewegung ) |
|
|||
Hallo,
hier ohne position: relative sollte es hinhauen. Code:
} .kursblock { background-color: #87A2FA; position: relative; } _________ Gruß, Roland |
|
|||
Hallo franc78,
ich weiss das auch noch nicht so Recht ehrlicherweise, denn normalerweise ist das schon richtig mit erst position relative. Du mußt aber hier darauf achten: Code:
} .kursblock:hover dl { display: block; position: absolute; } __________ Gruß, Roland |
|
|||
Zitat:
Mit dem top: 5px; meinst du das der Bezugspunkt weg fällt, weil .kursblock nicht mehr relativ positioniert ist oder? Zitat:
Wenn du dem Link folgst, siehst du das es in der Originaldatei passt, ist auch alles Valide . HTML-Code:
<h3>Dance Moves</h3> <dl> <dt>Kurs:</dt> <dd>Dance Moves</dd> <dt>Dozent(in):</dt> <dd>Elli</dd> <dt>Zielgruppe:</dt> <dd>Kinder von 5 - 8 Jahren</dd> </dl> Und man kann es beliebig erweitern, weil man ja mehrere <dt>´s und <dd>´s verwenden kann. Ich kann also z.b. "Link:" "Mitbringen" "Thema" usw. mir einfügen. |
Sponsored Links |
|
|||
Zitat:
Zitat:
Gruß ____________ Roland |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Suche korrekte Syntax - JS -> PHP String | Scolex | Javascript & Ajax | 4 | 17.05.2011 16:43 |
Eine Frage der Semantik: Steckbrief | Cu Chullain | CSS | 1 | 27.03.2011 21:30 |
Korrekte Bezeichnung für UTF8 in SQL Datenbank | Baracudagirl | Serveradministration und serverseitige Scripte | 4 | 12.02.2011 19:18 |
Semantik in HTML 5 | Lima | Ressourcen | 15 | 15.08.2009 14:51 |
Semantik: Name vs. Nummerierung | methodfive | (X)HTML | 11 | 27.02.2006 19:53 |