Schmidt: Wochenkalender mit HTML+CSS

Beitrag lesen

SELF-Forum

Wochenkalender mit HTML+CSS

Schmidt
– Informationen zu den Bewertungsregeln

Hallo ihr Lieben,

ich möchte einen Wochenkalender in HTML+CSS realisieren. Der Inhalt wird dynamisch mit PHP erzeugt.

ZIEL:
Im Prinzip sollte der Kalender ähnlich dem Sunbird-Wochenkalender aussehen. Sprich: Die Spalten entsprechen den Wochentagen und die Zeilen entsprechen den Tagesstunden. Termine werden als Blöcke angezeigt. Position und Höhe der Blöcke entsprechen dem Startzeitpunkt und der Dauer des Termins.

Zur Veranschaulichung hier ein Bild des Sunbird-Wochenkalenders:
Sunbird-Wochenkalender

REALISIERUNG:
Nun habe ich fast alles soweit umsetzen können. (Siehe Quelltext)
Jedoch

  1. Wie kann ich die Spaltenbreiten und Zeilenhöhen erzwingen?

  2. Welche Maßeinheit zur Festlegung der Zeilenhöhe empfiehlt ihr? em,px,%,...? Ich möchte ja, dass der Kalender möglichst von jedem Gerät gut dargestellt wird.

  3. Habe ich irgendwelche grundlegenden Ansätze falsch gewählt?

  4. Habt ihr Verbesserungsvorschläge

Schönen Gruß
Schmidt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
	<head>  
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
		<title>Kalender</title>  
		<style type="text/css">  
		<!--  
			tr {  
				height: 3em;  
				padding: 0px;       /*Innenabstand*/  
				margin: 0px;        /*Außenabstand*/  
				}  
			td {  
				height:3em;  
		                width: 15em;/*???*/  
				padding:0px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				border:1px solid black;  
				}  
				  
			table {  
				background-color: #E0E0E0;  
				border-collapse: collapse;  
				empty-cells: show;  
				  
				}  
				  
			#zelle {  
				height: 3em;  
		                width: 15em;/*???*/  
				padding:0px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				}  
				  
			#termin {  
				width: 50%;  
				position: relative;  
				top: 2.25em;  
				height: 4.5em;  
				background-color: red;  
				overflow: hidden;  
				padding:3px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				-moz-border-radius: 3px;  
				-webkit-border-radius: 3px;  
				-ms-border-radius: 3px;  
				-o-border-radius: 3px;  
				-khtml-border-radius: 3px;  
				border-radius: 3px;  
				}  
			#termin:focus { /*Für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)*/  
				overflow:visible;  
				height: auto;  
				}  
			#termin:hover { /* für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)*/  
				overflow:visible;  
				height: auto;  
				}  
			#termin:active { /*für gerade angeklickte Elemente*/  
				overflow:visible;  
				height: auto;  
				}  
		-->  
		</style>  
	</head>  
	<body>  
		<table>  
			<tr>  
				<td></td>  
				<td>Mo</td>  
				<td>Di</td>  
				<td>Mi</td>  
				<td>Do</td>  
				<td>Fr</td>  
				<td>Sa</td>  
				<td>So</td>  
			</tr>  
			<tr>  
				<td>7:00</td>  
				<td><div id="zelle"><div id="termin">7:45 - 9:15<br>Die heiße Zypernsonne quälte Max und Victoria ja böse auf dem Weg bis zur Küste. Xaver schreibt für Wikipedia zum Spaß quälend lang über Yoga, Soja und Öko.</div></div></td>  
				<td><div id="zelle"></div></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>8:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>9:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>10:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<!-- ... -->  
		</table>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln