Zeitbereich mit Balken darstellen

[Encoder]

Hallo
Wer mag darf mir bei Überlegungen zu einem Kopzept helfen.
Eine Webseite soll einen Zeitbereich waagerecht darstellen, in dem untereinander verschiedene Balken liegen, die jeweils eine Buchung innerhalb einem Zeitbereich visualisieren.

Also sowas

8.00 Uhr   9.00 Uhr   10.00 Uhr .....
 |          |           |
    xxxxxxxxxx
 |          |           |
          xxxxxxxxxxxxxxxxxxxxx
 |          |           |
  xxxxxxxxxxxxxxx

Die Balken wären jeweils ein <div>. Die Positionierung ist auch nicht das Problem.

Ich rätsel an der Beschriftung für die Zeit. Die divs sollten praktisch auf einem Hintergrundbild mit den Zeiten und den senkrechten Hilfslinien der Zeitpunkte liegen. Nachdem dieses Bild sich aber je nach Zeitbereich ändern muss, möchte ich nicht jedes mal ein Bild zeichnen. Die Beschriftung der Zeiten wäre noch durch HTML lösbar. Aber wie krieg ich die Hintergründe da rein?

canvas könnte eine Lösung sein. Nachdem aber Microsoft aber leider ja einen Dreck auf aktuelle Standards gibt ... also der IE unter XP kann das eben nicht, drum scheidet das aus.

Wie löse ich das am schönsten?

[Der Martin]

Hi,

8.00 Uhr   9.00 Uhr   10.00 Uhr .....
|          |           |
    xxxxxxxxxx
|          |           |
          xxxxxxxxxxxxxxxxxxxxx
|          |           |
  xxxxxxxxxxxxxxx

[...]
Die Beschriftung der Zeiten wäre noch durch HTML lösbar. Aber wie krieg ich die Hintergründe da rein?

der Hintergrund muss doch dann nur noch ein gleichmäßiges Raster sein, oder sehe ich das falsch? Also würde ich ein Hintergrundbild mit 8px Höhe und einer festen Breite nehmen, das z.B. am linken Rand einen senkrechten Strich hat, und das in x- und y-Richtung wiederholen. Eventuell mit background-position fein justieren, wenn nötig.
Beschriftung und Zeitbalken darauf absolut positionieren, und schon sind wir fast fertig.

Wie löse ich das am schönsten?

Am schönsten? Hmm, ob mein Vorschlag schön ist, liegt im Auge des Betrachters ...

So long,
 Martin

[Encoder]

Das wäre natürlich das einfachste, bezogen aufs Coden.
Allerdings müsste ich dann für jede mögliche Skalierung der Anzeige ein eigenes Hintergrundbild zeichnen.

Ich bin gerade am spielen mit verschachtelten divs.
<div position:relative; >
  Balkenzeile (z-index:1)
  Balkenzeile (z-index:1)
  ...

<div position:absolute; left:0; top:0; z-index:0;>
  hier divs mit passender Breite und jeweils border-right für die senkrechten Linien
</div>

</div>

das eingeschachtelte div mit den Linien liegt auf selber Position wie das übergeordnete div und wird mit z-index hinter die Balken gesetzt. Damit erreiche ich den gewünschten Effekt.
Bleibt nur noch ein Problem übrig. Wie sag ich dem div mit den Linien, dass es genau so hoch sein soll wie sein Parent? position:absolute macht diese Zugehörigkeit kaputt.

[Der Martin]

Hi,

Das wäre natürlich das einfachste, bezogen aufs Coden.
Allerdings müsste ich dann für jede mögliche Skalierung der Anzeige ein eigenes Hintergrundbild zeichnen.

nicht unbedingt. Angenommen, du legst über die Größe des Hintergrundbilds einen Abstand der Rasterlinien von 30px fest. Ob dieses Rastermaß dann in der jeweiligen Darstellung sechs Stunden, eine Stunde oder fünf Minuten bedeutet, lässt sich mit der Beschriftung klären.
Wenn du natürlich stufenlos skalieren willst, ist dieser Ansatz nicht mehr zu gebrauchen.

Bleibt nur noch ein Problem übrig. Wie sag ich dem div mit den Linien, dass es genau so hoch sein soll wie sein Parent? position:absolute macht diese Zugehörigkeit kaputt.

Äh, stimmt auffallend. ;-)
Wäre es eine Option, dem Elternelement position:relative zu geben? Dann geht's AFAIK wieder mit der Höhe (wenn nicht: top:0; bottom: 0; geht auch).

Ciao,
 Martin

[Encoder]

Wenn du natürlich stufenlos skalieren willst, ist dieser Ansatz nicht mehr zu gebrauchen.

Ich überlege schon ob ich ein paar wenige Rasterungen finde die ausreichen.

Wäre es eine Option, dem Elternelement position:relative zu geben?

Das hat es bereits, sonst wäre es static und dann bezieht sich die Position des Kind-divs nicht aufs Elternelement.

Dann geht's AFAIK wieder mit der Höhe (wenn nicht: top:0; bottom: 0; geht auch).

Hier funktioniert das mit top UND bottom :-)
Wahnsinnigsten Dank!

Wie könnte es da dann anders funktionieren? Du sagst ja "wenn nicht", wie dachtest du dass es noch gehen könnte?

[Der Martin]

Hallo,

Dann geht's AFAIK wieder mit der Höhe (wenn nicht: top:0; bottom: 0; geht auch).
Hier funktioniert das mit top UND bottom :-)
Wahnsinnigsten Dank!
Wie könnte es da dann anders funktionieren? Du sagst ja "wenn nicht", wie dachtest du dass es noch gehen könnte?

ich war mir nicht sicher. Aber ich dachte, da sich Positionsangaben für position:absolute ja auf ein Vorfahrenelement beziehen, das nicht "static" ist, sollte das auch für Breiten- oder Höhenangaben gelten. Demnäch hätte height: 100% in deinem Fall funktionieren sollen ...

Ciao,
 Martin

[Encoder]

ich war mir nicht sicher. Aber ich dachte, da sich Positionsangaben für position:absolute ja auf ein Vorfahrenelement beziehen, das nicht "static" ist, sollte das auch für Breiten- oder Höhenangaben gelten. Demnäch hätte height: 100% in deinem Fall funktionieren sollen ...

Seltsam, jetzt funktionierts auch. Das hatte ich eigentlich vor meinem Beitrag schon versucht und da hats nicht geklappt. War wohl noch irgendwas anderes dran schuld.

Ich glaube ich bleib jetzt erst mal bei meiner Version mit den verschachtelten divs und schau dass ich überhaupt mal was zum laufen bringe.

Vielen Dank schon mal an alle fürs mitdenken :-)

[Linuchs]

Bleibt nur noch ein Problem übrig. Wie sag ich dem div mit den Linien, dass es genau so hoch sein soll wie sein Parent? position:absolute macht diese Zugehörigkeit kaputt.

Ich würde das Hintergrund-div nicht in das Daten-div schachteln.

Stattdessen Hintergrund anzeigen mit einer minimalen Höhe. Getrennt davon die Daten. Anschliessend die Daten-Höhe per Javascript auf den Hintergrund übertragen.

<div id="d1" style="position:relative">
  <div id="d11" style="position:absolute; height:5em">
  <!-- Hintergrund -->
  </div>
  <div id="d12" style="min-height:5em">
  <!-- Daten -->
  </div>
</div>
document.getElementById("d11").style.height = document.getElementById("d12").style.height;

Musst mal sehen, in welcher Einheit ("d12").style.height kommt, evtl. noch +"px" dahintersetzen.

Linuchs

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Es sind sicher gute Ideen von Martin und Linuchs. ABER was passiert, wenn nur der Text gezoomt wird? Du bräuchtest dich nicht um den Maßstab kümmern (sondern könntest einen festlegen, der für alle gilt), wenn du deine Zeitstreifen anders organisierst.

8:00
xxxxxxxxxxxxxxxxxxxxx
                 9:00

<div class="buchung">  
  <p class="begin">8:00</p>  
  <p class="ende">9:00</p>  
</div>

.buchung {  
  background: red;  
}  
.buchung p {  
  background: white;  
}  
.begin::after {  
  content: "\A\A";  
  white-space: pre;  
}  
.ende {  
  text-align: right;  
}

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

und wenn die p-Elemente noch ein wenig padding und links bzw. rechts einen border in der entsprechenden Farbe bekommen, sieht es sogar richtig gut aus.

Matthias

[ralphi]

Hi,

suchst Du sowas?
http://www.braekling.de/web-design/2835-balkendiagramme-mit-css.html

hab ich ausprobiert - fuzt prima
ralphi

[Tabellenkalk]

hab ich ausprobiert - fuzt prima
ralphi

Psst!
JA?
schhhh!
ja?
möchtest du ein "r" kaufen?

Gruß
Schlemihl
äh
Kalk