zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Korrekte Semantik für eine Belegungkalender

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2011, 04:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2010
Beiträge: 33
franc78 befindet sich auf einem aufstrebenden Ast
Standard 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:
  • Kursname
  • Dozent
  • evtl. Altersgruppe
  • evtl. Link zur genaueren Beschreibung

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>
Hat jemand eine eine bessere Idee als diese <dl>´s?

Geändert von franc78 (19.11.2011 um 04:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2011, 02:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2010
Beiträge: 33
franc78 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.11.2011, 12:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von franc78 Beitrag anzeigen
Hallo,

Hat jemand eine eine bessere Idee als diese <dl>´s?
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
Mit Zitat antworten
  #4 (permalink)  
Alt 21.11.2011, 06:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2010
Beiträge: 33
franc78 befindet sich auf einem aufstrebenden Ast
Standard

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 )
Mit Zitat antworten
  #5 (permalink)  
Alt 21.11.2011, 23:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Hallo,

hier ohne position: relative sollte es hinhauen.

Code:
} .kursblock {
            background-color: #87A2FA; 
            position: relative;
}
Getestet. Aber teste selbst einmal erst bei dir.

_________
Gruß,
Roland
Mit Zitat antworten
  #6 (permalink)  
Alt 22.11.2011, 08:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2010
Beiträge: 33
franc78 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Roland
es funktioniert , auch wenn ich nicht wirklich verstehe was für ein Problem der IE7 mit position:relativ hatt

Danke vielmals
Mit Zitat antworten
  #7 (permalink)  
Alt 22.11.2011, 17:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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; 
}
sobald top: 5px; oder ... hast du ein problem.
__________
Gruß,
Roland
Mit Zitat antworten
  #8 (permalink)  
Alt 22.11.2011, 18:39
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von franc78 Beitrag anzeigen
HTML-Code:
        <td>
            <dl>
            <dt>Kursname</dt>
            <dd>Dozent</dd>
            <dd>Alter ab:</dd>
            <dd>Link</dd>
Und das validiert so? Kann ich mir nicht ganz vorstellen.
Semantisch drückst Du damit aber folgendes aus: Du versuchst den Term "Kursname" mit "Dozent" zu erklären. Das halte ich für keine sonderlich gute Idee.
Wie wäre es damit:
HTML-Code:
       <td>
            <h3>Kursname</h3>
            <p>Dozent, Alter, Link</p>
       </td>
__________________
github | http://dnaber.de
Mit Zitat antworten
  #9 (permalink)  
Alt 23.11.2011, 02:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2010
Beiträge: 33
franc78 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von K.Roland Beitrag anzeigen
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; 
}
sobald top: 5px; oder ... hast du ein problem.
__________
Gruß,
Roland
Hab inzwischen gelesen das der IE7 mit position:relativ in Tabellen nicht umgehen kann.

Mit dem top: 5px; meinst du das der Bezugspunkt weg fällt, weil .kursblock nicht mehr relativ positioniert ist oder?

Zitat:
Zitat von David Beitrag anzeigen
Und das validiert so? Kann ich mir nicht ganz vorstellen.
Semantisch drückst Du damit aber folgendes aus: Du versuchst den Term "Kursname" mit "Dozent" zu erklären. Das halte ich für keine sonderlich gute Idee.
Wie wäre es damit:
HTML-Code:
       <td>
            <h3>Kursname</h3>
            <p>Dozent, Alter, Link</p>
       </td>
Ist oben falsch eingetragen (mein Fehler).
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>
Nach meinem Verständnis müsste doch dann auch Semantisch so passen.
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.11.2011, 08:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von franc78
Hab inzwischen gelesen das der IE7 mit position:relativ in Tabellen nicht umgehen kann.
Stimmt, aber gut zu wissen nochmals hatte es auch schon vergessen.
Zitat:
Zitat von franc78
Mit dem top: 5px; meinst du das der Bezugspunkt weg fällt, weil .kursblock nicht mehr relativ positioniert ist oder?
Ja darauf wollte ich nur ein hinweisen, falls ...

Gruß
____________
Roland
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:55 Uhr.