Problem mit Layout

[ZwoksKorbi]

Hallo Community,
ich arbeite gerade an einem Kalendersystem, es funktioniert soweit alles, nur das layout macht mich noch Schwierigkeiten...

Erstmal ein Screenshot wie es immoment aussieht:

Das ganze wird mit PHP/MySQL generiert.

Immoment weiß ich echt nicht weiter, hab schon verschiedenes probiert.
Ich habs gerade so gelöst, dass ich die breite des eigentlichen kalenders über expressions im css gelöst hab. Insofern kein Problem, da wir hier nur Internet Explorer v.6 einsetzen.

Ich hätte es gerne so:

hier mal der momentane Stand:
(Achtung: dirty Code ^10, bin immoment so verzweifelt am teste, ich hoffe ihr könnt mir helfen.)

css:

/* Allgemeine Definitionen */
* {
    padding:0;
    margin:0;
    border:0;
}

body, html {
    height:100%;
    text-align:center;
}
html {
overflow: hidden;
}
body {
    background-color: #0C3A6D;
    font-family: Arial, sans-serif;
}

a:link,a:visited,a:hover,a:active,a:focus {
    text-decoration:none;
    color:black;
}

h1 {
    font-size:120%;
    color:#c0c0c0;
    text-decoration:none;
}

h2 {
    font-size:120%;
    color:#666666;
    font-style:italic;
    margin-bottom:-10px;
}

/* ID Definitionen */
#header {
    border-bottom: 1px solid black;
    background-color: #FFFFFF;
    width: 100%;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    position: relative;
}
#header h1 {
    margin: 0;
}

#header strong {
    color: #888888;
}
#overallContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: expression(document.body.clientHeight);
    padding:0;
    margin:0 auto;
    text-align:left;
}

#leftContainer {
    width: 250px;
    float: left;
    height: 100%;
}
#rightContainer {
    margin-top: 10px;
    float: left;
    overflow: auto;
    margin-right: 10px;
}


#menueheading {
    color: #666666; 
    font-size: 120%;
}

#room {
    border: 1px solid #000000;
}



/* ---------- Klassen Definitionen ----------- */

/*Schriftgröße*/
.small {
    font-size: 85%;
}

.smaller {
    font-size: 75%;
}

.tiny {
    font-size: 50%;
}

/*Breite*/
.fullwidth {
    width: 100%;
}

.halfwidth {
    width: 50%;
}

/*Sidebar*/
.sidebar {
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #000000;     
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-right: 10px;
    padding: 10px;
}

.sidebar li {
    list-style: circle;
    margin: 0 10px;
}


/*Kalendertabelle*/
.tbl_kalender {
    border: 1px solid #808080;
    background-color: white;
}
.tbl_kalender td {
    text-align: center;
    vertical-align: top;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

.header {
    border:0px;
    height: 35px;
    border-bottom:1px solid #808080;
    background-color:#c0c0c0;
    text-align: center;
}

.tage {
    height: 15px;
    text-align: center;
}

.td_outofmonth {
    background-color:#dcdcdc;
    min-width: 60px;
    max-width: 130px;
    padding:0px;
    margin:0px;
    border-width: 1px;
    border-style: solid;
    border-color: #808080;
}

.td_inmonth {
    background-color:#c0c0c0;
    min-width: 60px;
    max-width: 130px;
    padding:0px;
    margin:0px;
    border-width: 1px;
    border-style: solid;
    border-color: #808080;
}

.today {
    border-left:2px solid #696969; 
    border-bottom:2px solid #696969; 
    background-color: #fffacd;
    padding: 0px;
    margin: 0px;
}
.inMonthDiv {
    height: 100%;
}

/*Tagesansicht*/
.dayViewAppointment {
    background-color: #FFFFFF;
    border: 1px solid #333333;
    margin-top:10px;
    padding: 5px;
    width: 70%;
}

Den HTML-Part hab ich hier mal auf meinem Webspace gespeichert.
Die htm-codebox wollte meine Zeilenumbrüche nicht ...
http://kkugelmann.de/work/kalenderhtml.php

ich hoffe ihr könnt mir helfen.
und ich Entschuldige mich nochmal für den unsauberen code.
Gruß
Korbi

 

[ZwoksKorbi]

Ich weiß es schaut nach ner menge code aus etc, aber hat mri keiner nen tipp wie ichs realisieren könnte?

 

[neuroleptika]

Ich verstehe nicht was mit der Tabelle passieren soll.
Soll die Hintergrundfarbe der Tabelle bis nach unten gezogen werden oder die Tabelle selbst unten ausgerichtet werden?

 

[ZwoksKorbi]

Entschuldigung ich habs nich genau ausgeführt, also:
Die Kalendertabelle soll die restliche höhe (fensterhöhe - header - margins) voll ausnutzen, das gleiche mit der breite (fensterbreite - sidebar - margins)

also quasi solles später so aussehen: (das hier is ne Bildmontage)

(der weiße Strich ist nicht gewollt ^^)

 

[psytec]

Da die Tabellenspalten und Tabellenzeilen ja immer gleich bleiben würde ich die Spaltenbreite und Höhe prozentual im Verhältniss zur umgebenden Box formatieren das sollte dann eigentlich klappen.

 

[ZwoksKorbi]

manko dabei: ich muss den prozentsatz jedes mal neu ausrechnen (wär mit php ja nich des problem), weil ein monat sich ja nicht immer nur über 5 wochen erstreckt, sondern auch mal nur 4 belegen kann, etc.

ich bin jetz immoment dran es anders zu lösen, nämlich nach dem beispiel:
stu nicholls | CSS PLaY | cross browser fixed layout bare essentials

ist zwar nicht des optimalste, aber es funktioniert

 

[psytec]

Also eigentlich erstreckt sich ein Monat doch zu fast 100% immer über 5 Kalenderwochen.

Einzige Ausnahme bildet doch nur der Fall des Monats Februar wenn kein Schaltjahr ist un der der 1. auf nen Montag fällt. Nicht sonderlich häufig also...

Ich guck mir mal das ganze was genauer an hab glaub ich sowas schonmal in einem anderen Zusammenhang realisiert...

 

[ZwoksKorbi]

es gibt auch monate die sich über 6 wochen erstrecken, immoment bin ich schon kurz davor das wirklich so zu lösen, habs jetz immoment soweit am laufen.

nur sobald da ein termin drin steht ändert sich die höhe der betroffenen zeile, das muss ich noch ausbessern

 

[psytec]

Also ich wäre ja immer noch dafür das ganze über Prozentangaben in den entsprechenden Spalten und Zeilen zu lösen.

Aber ich dann müsstest Du wohl Dein Layout nochmal gründlich überarbeiten um es insgesamt flexibler zu machen. Hätte dann aber auch den Vorteil das es auf verschiedenen Auflösungen immer schön passen würde.

Alles in allem wirst Du aber wohl noch über einige Probleme fallen die speziell die Darstellung im IE betreffen, der hat nämlich überraschende Bugs im Zusammenhang mit der Umsetzung von CSS zu bieten.

Vielleicht hilft Dir ja folgende Seite weiter:

Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

 

[ZwoksKorbi]

yaml kenn ich schon, wollte ich auch schon ausprobiern ...
also was die verschiedenen auflösungen angeht ists eigentlich kein problem.
Hier im Amt hat keiner mehr eine auflösung < 1280*1024.
Ich hab mit meiner jetzigen lösung das fenster auch schon kleiner als 800*600 gezogen und es gab keine probleme in der darstellung.

ich hab auch schon probiert, wie du gesagt hast, die höhe der tr's bzw td's fest vorzugeben in %, hat leider nichts geholfen, die zeile in der der termin steht ist immernoch höher als der rest...

 

[psytec]

Hm ich hab bei mir mal bissle rumgefummelt und bin als ich Deinem

.td_inmonth {height: 80px;}

zugewiesen habe auf folgendes Ergebniss gekommen:

Zeilen sind hier gleich groß...

 

[ZwoksKorbi]

das problem ist nur, dass die Auflösungen bei uns im Amt zwischen der vorher genannten 1280*1024 und 1600*1200 variieren.

=> fester pixelwert bei der höhe is schonmal nich so gut.

ich habs in der arbeit auch ungefähr hinbekommen, kann dir jetzt immoment aber nicht sagen wie genau.

Ich bin mittlerweile schon Daheim,
und war nicht so verrückt mir die neue Version des Kalenders mit
nach Hause zu nehmen => ich kann dir leider erst am Mittwoch meinen neuen Lösungsansatz zeigen. (Montag+Dienstag hab ich Berufsschule *urghs*)
Der ist allerdings nicht unbedingt genau ...
Solltet ihr noch was besseres finden, was wirklich funktioniert bin dafür gerne offen.


mfg
Korbi

 

[neuroleptika]

ich hab auch schon probiert, wie du gesagt hast, die höhe der tr's bzw td's fest vorzugeben in %, hat leider nichts geholfen, die zeile in der der termin steht ist immernoch höher als der rest...

Du solltest keine height für <tr> und <td> angeben.
Wenn du nur eine prozentuelle Höhe für <table> angibst sollte das reichen. Die Höhen von <tr> werden dann automatisch aufgeteilt.

Ich bin mir nicht sicher aber ich glaube, daß eine Tabellenüberschrift (<caption>) die height-Angabe für <table> durcheinander bringen würde. Die Tabelle mit height:100%; könnte dann etwas höher dargestellt werden.

Wenn es trotz richtiger height-Werte für alle übergeordneten Elemente zu einem Scrollbalken kommt, könntest du versuchen den IE6 in den quirks-mode zu schicken. Dann brauchst du sämtliche Border nicht in den height-Berechnungen zu berücksichtigen.
(aber wehe dem, mann sieht sich die Seite doch mal mit einem anderen Browser an. Bugs in Listen sind im quirks-mode im IE6 gut möglich und andere Browser scheitern dann am Box-Modell.)
Die Border in <td> dürften keine Rolle spielen. Auf Rahmen um die ganze Tabelle solltest du besser verzichten.

Wenn du alles in px angeben möchtest, kannst du auch mit height: expression(); die Höhe abzüglich des Kopf und Fussbereichs angeben.
Das funktioniert eigentlich auch ganz gut. Für IE6 und IE7 habe ich das für etwas Ähnlichem schon mal gemacht.

Deinen Quelltext hab ich mir nicht richtig angesehen.

 

[ZwoksKorbi]

Danke für die umfassende Antwort.

ich glaub ich fahr am Montag nah der Berufsschule nochmal schnell in die Arbeit und hol mir kurz den mommentanen Stand mit nach Hause.

bei mir stellt sich nur das Problem:
Wenn kein Termin eingetragen ist sind alle gleich hoch, genau so wie ichs haben will.
Sobald jedoch ein Termin eingetragen ist (ich werde euch dann am Montag mal zeigen wie das im Quelltext dann aussieht) verzieht sich die Höhe der Zeile in der der Termin ist.

mfg
Korbi