Kalenderansicht mit DIVs

[AlexD1979]

Hallo,
Ich steh gerade voll auf dem berühmten Schlauch.
Ich muss einen dynamischen Kalender zusammenbauen mit JSP, der links eine Zeitskala vertikal hat, und verschiedene Ressourcen horizontal. Wenn nun ein Termin gebucht ist, dann habe ich es mit Tabelle und rowspan versucht, aber das bekomme ich nicht hin. Kann man sowas sinnvoller mit DIVs lösen?
Siehe Anlage der Screenshot.
Kann mir da jemand einen kurzen Ansatz geben, wie ich das lösen kann.
Danke & Gruß
Alex

 

[Maik]

Hi,

von dem angekündigten Screenshot seh ich hier nichts.

Was hast du denn mit der Tabelle konkret erfolglos versucht?

Und was gibt es sinnvolleres, als dieses HTML-Element für einen Kalender zu nutzen?

Wenn du aber Appetit auf eine DIV-Suppe hast, wäre die float-Eigenschaft das Werkzeug deiner Wahl, um die Blöcke aus dem normalen Textfluß zu nehmen und sie in einer Zeile nebeneinander auszurichten, sowie die clear-Eigenschaft, um dem Umfluß zu beenden.

Die andere technische Möglichkeit ist die absolute Positionierung der Blöcke. Dies wäre aber nur bei fixen Dimensionen geeignet.

mfg Maik

 

[Grille]

Hallo Alex ...

ich arbeite eigentlich nur mit div-boxen, obwohl ich das mit dem "float" bis heute noch nicht richtig verstanden habe.

ich habe mir aber eine Art "Baukasten" erstellt, womit ich genau solche div-Boxen-Probleme gut lösen kann:

dies muss in deiner CSS-Datei stehen:

/* ******** VOREINSTELLUNGEN ****** */
div { margin: 0px; padding: 0px; }
img { display: block; border: 0; }


/* ******** DIV-BOX-GRUND-SYSTEM ****** */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
.floatbox { overflow: hidden; }
.neben { float: left; display: block; }

und so baue ich dann die Boxen zusammen:

1.Regel ... sollen Div-Boxen nebeneinander stehen, dann müssen sie von einer anderen Div-Box eingeschlossen werden, welche die Klassen "class="floatbox clearfix"" enthält.

2. Regel ... jeder der Boxen in dieser "float-Box" bekommen die klasse "class="neben""

Bei deinem Problem könnte das so aussehen:

<div id="kalender">

<div class="floatbox clearfix">
<div class="neben"> Montag</div>
<div class="neben"> Termin 1</div>
<div class="neben"> Termin 2</div>
</div>

<div class="floatbox clearfix">
 <div class="neben"> Dienstag</div>
<div class="neben"> Termin 1</div>
<div class="neben"> Termin 2</div>
<div class="neben"> Termin 3</div>
 </div>

<div class="floatbox clearfix">
  <div class="neben"> Mittwoch</div>
 <div class="neben"> Termin 1</div>
    </div>

</div>

Du kannst natürlich innerhalb einer solchen Konstruktion weiter verschachteln und mit Divboxen teilen:

<div id="kalender">

<div class="floatbox clearfix">
   <div class="neben"> Mittwoch</div>
  <div class="neben">
<div class="neben"> hier ist eine box oberhalb von zwei weiteren</div>
<div class="floatbox clearfix">
<div class="neben"> links</div>
<div class="neben"> rechts</div>
</div>
</div>
     </div>

 </div>

und das müsste auch gehen:

 <div id="kalender">

 <div class="floatbox clearfix">
    <div class="neben"> Mittwoch</div>
   <div class="neben floatbox clearfix">
<p>hier ist ein Text oberhalb von zwei Boxen</p>
 <div class="neben"> links</div>
<div class="neben"> rechts</div>
 </div>
      </div>

  </div>

ich nutze dieses System schon seit über Zwei Jahren ... und es funktioniert gut bei mir.