Frage zur Umsetzung einer Idee

[richie]

Moin zusammen!
Ich möchte für den Google-Calendar eine Jahresübersicht anfertigen. Nun habe ich die Schnittstellen schon alle fertig und brauche nur noch das "Enddesign". Hierfür habe ich mir eine möglichst Farbarme Darstellung ausgedacht und weiß leider nun nicht so recht, wie ich das am besten mache..

Ich habe auf der Seite whatthefunk.de/app/test.php schonmal das Grundgerüst gebaut. Am liebsten hätte ich jetzt ein overlay über die ganze Tabelle in das ich "malen" kann schätze ich.. Vielleicht hat jemand eine gute Idee - möglichst ohne vorher gefertigte Grafiken - das umzusetzen.

[Steel]

Hi!

Ich verstehe jetzt nicht so richtig, was Dir fehlt. Du hast HTML und das CSS um das HTML 'anzumalen'. Was genau fehlt Dir noch? (ich vermisse z.B. eine Klasse fuer SA und SO, statt beide zusammenzufuehren, kannst Du das aendern?)

[richie]

Hi!

Ich verstehe jetzt nicht so richtig, was Dir fehlt. Du hast HTML und das CSS um das HTML 'anzumalen'. Was genau fehlt Dir noch? (ich vermisse z.B. eine Klasse fuer SA und SO, statt beide zusammenzufuehren, kannst Du das aendern?)

Moin!
Mir fehlt der Ansatz, wie ich diese Linien wie auf dem Bild aufgemalt hinbekomme mit html und css.. also am liebsten auch mal "über" einen Feiertag drüber die Linie..
Das mit Sa und So verstehe ich nicht ganz - inwiefern sind die "zusammengeführt"?
LG

[Steel]

Moin!

Moin!
Mir fehlt der Ansatz, wie ich diese Linien wie auf dem Bild aufgemalt hinbekomme mit html und css.. also am liebsten auch mal "über" einen Feiertag drüber die Linie..

Ah. Die Linien. (die mit den NAmen, denk ich? Urlaub?) Da wuesste ich nicht, wie man das im Nachhinein einfach einbauen koennte. Spontan, denke ich da an eine Loesung mit JS, die aber sicher kompliziert werden wuerde.

Das mit Sa und So verstehe ich nicht ganz - inwiefern sind die "zusammengeführt"?

So wie ich das HTML verstehe gibt es nur eine Klasse fuer die beiden Wochenendtage und eine fuer die anderen.

[richie]

Moin!

Moin!
Mir fehlt der Ansatz, wie ich diese Linien wie auf dem Bild aufgemalt hinbekomme mit html und css.. also am liebsten auch mal "über" einen Feiertag drüber die Linie..

Ah. Die Linien. (die mit den NAmen, denk ich? Urlaub?) Da wuesste ich nicht, wie man das im Nachhinein einfach einbauen koennte. Spontan, denke ich da an eine Loesung mit JS, die aber sicher kompliziert werden wuerde.

Das mit Sa und So verstehe ich nicht ganz - inwiefern sind die "zusammengeführt"?

So wie ich das HTML verstehe gibt es nur eine Klasse fuer die beiden Wochenendtage und eine fuer die anderen.

Achsoo - das liegt daran, dass die css Klasse eiegentlich für was anderes war - hab das nur schnell umgeschrieben, damit man mal ein Bild hat..
Genau mir geht es um die bunten Linien mit Namen dran. Mir fällt nichtmal was mit js ein.. das einzige woran ich gerade denke ist eine Art overlay-Bild, das dann generiert wird.. aber dann wird der Seitenaufbau ja noch langsamer..

[Steel]

Hi!

Genau mir geht es um die bunten Linien mit Namen dran. Mir fällt nichtmal was mit js ein.. das einzige woran ich gerade denke ist eine Art overlay-Bild, das dann generiert wird.. aber dann wird der Seitenaufbau ja noch langsamer..

Du kannst mit JS durchaus ermitteln, wo sowas anfängt und wo es endet. In die Anfangszelle setzt Du ein Element, das Du mit Hintergrundbild(ern) versiehst oder einfärbst und machst es so hoch, daß es bis in die letzte Zeile reicht (absolut positionieren wäre hier sinnvoll). Den Text kannst Du dann mit JS genauso verarzten. Für monatsübergreifende Zeiträume musst du ne extra Logik einbauen, die quasi den ersten Tag wieder als neuen Starttag nimmt.

Dazu musst du zusehen, Überlagerungen zu vermeiden.

Ein Anfang wäre z.b. aus <td>Hans Anna</td> ein <td><div class="urlaub hans">Hans</div> <div class="urlaub anna">Anna</div></td> zu machen. .urlaub machste dann meinetwegen hübsch rund und .hans wird blau und .anna rosa. Bleibt die Höhe zu bestimmen. Du kannst das natürlich auch so lassen und einfach aus jedem Namen ein Urlaubsdiv machen. Dann haste sowas wie Punkte oder Klötzchen in jeder Zelle. Nicht so hübsch, aber relativ einfach umzusetzen.

Details müssteste Dir selbst raussuchen.

[Matthias Apsel]

Om nah hoo pez nyeetz, Steel!

Das wäre auch mit CSS lösbar. Vielleicht maximal 5 Striche pro Zelle, die verschiedenen Farben könnten um einige Pixel versetzt sein und die Bezeichnung könnte tatsächlich ein Text sein. Dann wären folgende Klassen notwendig falls es bei der Tabelle bleibt. Bei Verwendung einer Liste ließe sich auf einige Klassen verzichten.

mehrtägig, mehrtägig begin, mehrtägig ende, und dies jeweils für 5 Farben.

[Steel]

Moin!

Das wäre auch mit CSS lösbar. Vielleicht maximal 5 Striche pro Zelle, die verschiedenen Farben könnten um einige Pixel versetzt sein und die Bezeichnung könnte tatsächlich ein Text sein. Dann wären folgende Klassen notwendig falls es bei der Tabelle bleibt. Bei Verwendung einer Liste ließe sich auf einige Klassen verzichten.

mehrtägig, mehrtägig begin, mehrtägig ende, und dies jeweils für 5 Farben.

Sowas aehnliches hab ich mir auch ueberlegt, als ich das mit den Kloetzchen geschrieben hatte. War aber zu spaet als dass ich mir darueber weiter Gedanken machen wollte.

[richie]

Moin!

Das wäre auch mit CSS lösbar. Vielleicht maximal 5 Striche pro Zelle, die verschiedenen Farben könnten um einige Pixel versetzt sein und die Bezeichnung könnte tatsächlich ein Text sein. Dann wären folgende Klassen notwendig falls es bei der Tabelle bleibt. Bei Verwendung einer Liste ließe sich auf einige Klassen verzichten.

mehrtägig, mehrtägig begin, mehrtägig ende, und dies jeweils für 5 Farben.

Sowas aehnliches hab ich mir auch ueberlegt, als ich das mit den Kloetzchen geschrieben hatte. War aber zu spaet als dass ich mir darueber weiter Gedanken machen wollte.

ich hab jetzt mal was versucht - noch ohne klassen, sondern direkt ins style reingeschrieben das ging zum testen besser. ist schon fast sowas, wie ich es will - jetzt muss ich nachher nur noch ein paar tabellenfelder zwingen ihre größe beizubehalten :) vielen Dank auf jeden fall!