Im Verzeichnis /shared/css/ befinden sich sämtliche
+ Designinformationen (CSS).
+
Wichtige Dateien im Überblick seit Version 5.7:
+
+
Screen-Design. Die zentrale CSS-Datei für das ehemalige Bildschirmdesign der technikum29.de-Seite.
+
Fresh-Design. Die zentrale CSS-Datei für das neue Bildschirmdesign der technikum29.de-Seite (seit Version 5.7)
+
Common Styles. Ursprünglich gedacht für zwischen den beiden gleichberechtigten Seitendesigns gemeinsam genutzte Stile. Hier werden spezielle Designanweisungen gespeichert, die von einzelnen Inhaltsseiten genutzt werden (z.B. Startseite oder UNIVAC-Seite). Außerdem ist das ehemalige print.css hier eingebaut, zwecks Ladezeit. Mithilfe des Drucklayouts sind moderne Browser in der Lage, aus jeder technikum29.de-Seite eine sinnvolle Druckversion mit nur dem nötigsten Inhalt zu generieren.
+
Fresh-Design: Korrekturen für den Internet Explorer 6. Die etwa 30% IE6-Benuter (Stand Juli 07) müssen zu jeder Seite dieses absurde CSS, Paradebeispiel für Javascript-getränkte Microsoft-Stylesheets, laden, um das neue Fresh-Design der Version 5.7 mit Kompromissen anzeigen zu können.
Im Verzeichnis /shared/img/ befinden sich die Bilder für das technikum29.de-Design. Seit Version 5.7 sind diese für die beiden gleichberechtigten Seitenstiele in Unterordner geteilt
Im Verzeichnis /shared/photos/ befinden sich die inhaltlichen Bilder der Homepage. Seit Version 5.5. sind diese in drei Ordner unterteilt, die bei größeren Themenkomplexen nochmals in Unterordner untergliedert sind:
auf einer WANG-Extraseite, Bedienungsanleitung */
+ margin: 5px 0px;
+ padding: 0px;
+ color: #2F319D;
+ text-align: justify;
+}
+
+
+
+/*
+** Bildboxen ("Imageboxen")
+** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
+** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
+**
(box für fakultativen Abstand oben/unten)
+**
+** <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
+**
Viel Text...
+** [div|p]>
+**
(Damit das Bild nicht weitergeht)
+**
+** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
+** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
+** Bilder werden.
+*/
+
+#content .box, .content .box {
+ /* .box als allgemeine Klasse fuer abstandswuerdige */
+ /* Objekte (.center/.right/.left zum Beispiel) */
+ margin-top: 3em;
+ margin-bottom: 3em;
+}
+
+#content .left img, .content .left img {
+ /* Links ausgerichtetes Bild mit Abstand drumherum */
+ float: left;
+ margin: 0 2em 2em 0;
+}
+
+#content .right img, .content .right img {
+ /* Rechts ausgerichtetes Bild mit Abstand drumherum */
+ float: right;
+ margin: 0 0 2em 2em;
+}
+
+#content .center img, .content .center img {
+ /* Mittig ausgerichtetes Bild mit Abstand drunter */
+ margin: 0 0 0.3em 0;
+}
+
+#content img.nomargin, .content img.nomargin {
+ /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
+ margin: 0;
+}
+
+#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
+.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
+ /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
+ (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
+ Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
+ .clear dann erzeugt. */
+ margin-bottom: 0;
+}
+
+#content .left .bildtext, .content .left .bildtext,
+#content .right .bildtext, .content .right .bildtext {
+ /* p.bildtext oder div.bildtext: Kein Abstand! */
+ text-align: justify;
+ /* Im Endeffekt ist .bildtext hier unnoetig! */
+}
+
+#content .center .bildtext, .content .center .bildtext {
+ /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
+ text-align: justify;
+ margin-left: 10%;
+ margin-right: 10%;
+}
+
+#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
+ /* Text zentriert unter dem Bild in der Breite des Bildes */
+ text-align: justify;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/*
+ Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
+ Verwendung als Zusatzklasse zu box.
+*/
+
+#content .bordered, .content .bordered {
+ border: 1px solid #094099;
+ padding: 2em;
+}
+
+#content .bordered img, .content .bordered img {
+}
+
+
+
+@media print {
+ /**************************************************************\
+ * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 *
+ * T E C H H NN N I K K U U MM MM 2 2 9 9 *
+ * T EEE C HHHH N N N I KK U U M M M 2 99999 *
+ * T E C H H N NN I K K U U M M 2 9 *
+ * T EEEE CCCC H H N N III K K UUUU M M 22222 9 *
+ * *
+ * P R I N T C S S *
+ * ehemals in eigener print.css, jetzt aus perfomancegruenden *
+ * (ladezeit) in commons.css intigriert *
+ \**************************************************************/
+
+ body {
+ margin: 1em; padding: 0;
+ color: #000;
+ font: 100% "Times New Roman",Times,serif;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ img {
+ border: none;
+ page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
+ }
+
+ h1 {
+ margin: 0; padding: 6px 0;
+ text-align: center;
+
+ font: 180% Arial,Verdana,Helvetica,sans-serif;
+ }
+
+ h1 a, h1 a span {
+ color: #AAA !important;
+ text-decoration: none !important;
+ }
+
+ /*h1 span.old:after {
+ * jetzt durch #h1-subtitle auch im IE moeglich *
+ content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
+ }*/
+
+ #h1-subtitle {
+ display: block;
+ font-size: 108%;
+ border-bottom: 1px solid #AAA;
+ margin-bottom: 10px; margin-top: 0;
+ text-align: center;
+ }
+
+ h2 {
+ font-size: 150%;
+ margin: 10px 0 10px 0;
+ padding: 0;
+ page-break-after: avoid; /* auch wenn's nur Opera rafft ;) */
+ }
+
+ #sidebar, #footer, #sidebar-footnote {
+ display: none;
+ }
+
+ #copyright {
+ margin: 2em 0;
+ font-size: 80%;
+ text-align: center;
+ }
+
+ /***** TEXT *****/
+
+ p {
+ text-align: justify;
+ line-height: 110%;
+ }
+
+ a:link, a:visited {
+ color: #000;
+ text-decoration: none;
+ }
+} /* end of @media print */
+
+/* EOF */
Index: /shared/css/details.css
===================================================================
--- /shared/css/details.css (revision 20)
+++ /shared/css/details.css (revision 20)
@@ -0,0 +1,76 @@
+
+/*------------------------------------------*
+ * T E C H N I K U M 2 9 *
+ * Details CSS *
+ *------------------------------------------*/
+
+/*
+ updated / .. für v5.5
+*/
+
+td, table, tr
+ {
+ font: 12px Verdana;
+ }
+table p
+ {
+ text-align: justify;
+ line-height: 120%;
+ }
+table p.center
+ {
+ margin: 5px 0px;
+ text-align: center;
+ }
+td b
+ {
+ display: block;
+ }
+td.b, td.b a
+ {
+ font-weight: bold;
+ }
+table
+ {
+ background-color: #7090C0;
+ }
+td
+ {
+ padding: 2px;
+ vertical-align: middle;
+ text-align: center;
+ background-color: #F7FDFF;
+ }
+th
+ {
+ padding: 2px;
+ text-align: center;
+ background-color: #BED0E5;
+ }
+.bemerkungen
+ {
+ vertical-align: middle;
+ text-align: justify;
+ }
+/*
+a:link, a:visited
+ {
+ text-decoration: underline;
+ color: #0E466A;
+ }
+a:hover
+ {
+ text-decoration: none;
+ background-color: #B1C6DF;
+ border: 1px solid #2C5494;
+ color: #2C5494;
+ }
+a:active, a:focus
+ {
+ text-decoration: none;
+ background-color: #F3D8D8;
+ border: 1px solid #D54747;
+ color: #D54747;
+ }
+
+*/
Index: /shared/css/extra.css
===================================================================
--- /shared/css/extra.css (revision 20)
+++ /shared/css/extra.css (revision 20)
@@ -0,0 +1,325 @@
+/***
+ *** v5.7. FRESH UP:
+ *** Diese Datei wird im neuen Layout nicht mehr gebraucht.
+ *** Nur noch erhalten, bis die englische Version umgestellt
+ *** ist, da die Extraseiten unter /en/devices diese Datei
+ *** noch nutzen!
+ ***
+ ***
+ ***/
+
+
+/*------------------------------------------*
+ * T E C H N I K U M 2 9 *
+ * Extrastylesheet *
+ * Ersatzstylesheet für screen.css mit *
+ * kleinerem banner (dazu etwas abgespeckt),*
+ * *nur* zu benutzen für Spezialseiten *
+ * (Details & Geräte) *
+ *------------------------------------------*/
+
+body {
+ margin: 0; padding: 0;
+ color: #000;
+ font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
+}
+
+.hidden {
+ display: none;
+}
+
+img {
+ border: none;
+}
+
+
+/***** HEAD *****/
+h1 {
+ margin: 0; padding: 0;
+ height: 47px; /* real height: 67px */
+ border-bottom: 1px solid #3A6198;
+ text-align: center;
+ background-color: #5E7FAD;
+
+ z-index: 12;
+}
+
+html > body h1 {
+ /* For intelligent browsers */
+ height: 47px;
+}
+
+h1 a {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -380px;
+ z-index: 11;
+ display: block;
+
+ /* background-image: see h1 a.[lang] */
+ background-position: top center;
+ background-repeat: no-repeat;
+ width: 760px;
+ height: 47px;
+}
+
+h1 a.de {
+ background-image: url(../img/banner/small.de.jpg);
+}
+
+h1 a.en {
+ background-image: url(../img/banner/small.en.jpg);
+}
+
+h1 a span {
+ display: none;
+}
+
+h1 span.d {
+ background-color: #0C377A;
+ display: block;
+ width: 50%;
+ height: 47px;
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 10;
+}
+
+h2 {
+ font: bold 140% Verdana,Arial,Helvetica,sans-serif;
+ margin: 10px 0 10px 0;
+ padding: 0;
+}
+
+/* Abstand zwischen h2 und h1 */
+.a {
+ height: 10px;
+ display: block;
+}
+
+
+#h1border {
+ /* border hilfsmittel */
+ background-color: #C8C8C8;
+ position: absolute; z-index: 10;
+/* border: 10px solid red; */
+ display: block;
+ height: 2px; width: 100%;
+ overflow: hidden;
+ margin: 0; padding: 0;
+}
+
+
+/* Seiteninhalt */
+
+#page {
+ margin: 40px 35px;
+}
+
+/* Seitenelemente */
+
+p {
+ text-align: justify;
+}
+
+a:link, a:visited {
+ color: #224B88;
+ text-decoration: underline;
+}
+
+a:hover, a:active, a:focus {
+ color: #882224;
+ text-decoration: underline;
+}
+
+
+.highlight {
+ color: #000E8C;
+ font-style: italic;
+}
+
+
+/*
+ Links mit Pfeilen: a.go & a.arrow:
+ Momentan noch kein IE-Workaround gefunden
+ (Bei mehrzeiligen Links pfeile im text)
+ Siehe auch Changelog (/CHANGELOG.txt)
+*/
+
+html>body a.arrow,
+html>body a.go {
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ padding-left: 13px;
+}
+
+html>body a.arrow:link,
+html>body a.arrow:visited,
+html>body a.go:link,
+html>body a.go:visited {
+ background-image: url(../img/double.a.png);
+}
+
+html>body a.arrow:hover,
+html>body a.arrow:active,
+html>body a.arrow:focus,
+html>body a.go:hover,
+html>body a.go:active,
+html>body a.go:focus {
+ background-image: url(../img/double-hot.a.png);
+}
+
+/* Definitionslisten */
+
+dt {
+ margin-top: 1.2em;
+ font-weight: bold;
+ display: block;
+}
+dd {
+ text-align: justify;
+ margin: 0; padding: 0;
+}
+
+
+/* Navigationsleisten mit Pfeilen: Auch
+ Benutzung für IE */
+
+
+ul.nav, ul#nav {
+ list-style: none;
+ padding: 0;
+}
+ul.nav li, ul#nav li {
+ margin: 0;
+ padding: 0;
+}
+ul.nav li a, ul#nav li a {
+ padding-left: 13px;
+ background-position: bottom left;
+ background-repeat: no-repeat;
+}
+
+ul.nav li a:link,
+ul#nav li a:link,
+ul.nav li a:visited,
+ul#nav li a:visited {
+ background-image: url(../img/double.a.png);
+}
+
+ul.nav li a:hover, ul#nav li a:hover,
+ul.nav li a:active, ul#nav li a:active,
+ul.nav li a:focus, ul#nav li a:focus {
+ background-image: url(../img/double-hot.a.png);
+}
+
+
+/****** IMAGES & MORE *****/
+
+p.bildtext {
+ /* Bildbeschreibung */
+ margin: 10px 10%;
+}
+
+div.bildtext {
+ /* Bildbeschreibung, die in irgendeiner
+ Art Spalte angezeigt wird, daher kein
+ relativer Rand (10%, siehe p.bildtext) */
+ text-align: justify;
+}
+
+.center {
+ /* bild über text, alles zentriert */
+ text-align: center;
+/* border: 1px solid #B6C6D4;
+ background-color: #F1FCFE; */
+ margin: 10px;
+}
+
+.center .boxleft {
+ /*
+ zentrierter inhalt mit .center
+ box mit bestimmter breite und
+ text-align: left;
+ */
+ text-align: left !important;
+}
+
+html>body .center .boxleft {
+ /* intelligent browsers only */
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+}
+
+.right {
+ /* Image -> left, text -> right */
+ margin: 10px;
+}
+
+.right img {
+ float: left;
+ margin: 1px;
+}
+
+.right p.bildtext {
+ padding: 5px;
+ margin: 0 15px 5px 15px;
+}
+
+.left {
+ /* Image -> right, text -> left */
+ margin: 10px;
+}
+
+.left img {
+ float: right;
+}
+
+.left p.bildtext {
+ padding: 5px;
+}
+
+.clear {
+ /* clearendes element, inhalt egal */
+ display: block;
+ clear: both;
+ height: 2px;
+ overflow: hidden;
+}
+
+blockquote {
+ margin: 5px 0px;
+ padding: 0px;
+ color: #2F319D;
+ text-align: justify;
+}
+
+
+/* spezialseitennavigation (kleine
) */
+ul#nav {
+ text-align: left;
+}
+
+
+/* Mehrspaltigkeit */
+
+
+.cols {
+ /* Mehrspaltiger Inhalt. */
+}
+
+.cols .leftcol,
+.cols .rightcol {
+ padding: 5px 10px;
+/* border: 3px dashed red;*/
+}
+
+.col .leftcol {
+ float: left; width: 43%;
+}
+
+.col .rightcol {
+ float: right; width: 43%;
+}
Index: /shared/css/fresh-iefixing.css
===================================================================
--- /shared/css/fresh-iefixing.css (revision 20)
+++ /shared/css/fresh-iefixing.css (revision 20)
@@ -0,0 +1,218 @@
+/*
+ * technikum29 fresh design (seit v5.7)
+ * Spezialcss fuer IE6, ueber Conditional Comments eingebunden
+ * IE5 wird per Conditional Comment automatisch auf das alte Design umgestellt
+ *
+** Für das größte Stückchen Softwarescheiße, welches die Welt
+** je erlebt hat, dieses exklusive CSS mit Microsoft-proprietärem
+** Schrott.
+** -- Sven, 13.07.2007, 00:45, nach stundenlangem Rumgefrickel
+** bezueglich Lösungen für transparente PNGs und die Navigation
+ *
+ * Man beachte die aktuellen Statistiken, hier aus April/Mai/Juni 2007:
+ *
+ * 40.60% Gecko-Engine (z.B. Firefox) und KHTML (Konqueror, Safari)
+ * 31.90% Internet Explorer 6
+ * 16.50% Internet Explorer 7
+ * 3.39% Opera
+ * 1.01% Internet Explorer 5
+ * 1.85% Bots (z.B. Suchmaschinen)
+ *
+ * Für gerade mal 30% der Homepagepagebesucher wurden die folgenden Zeilen
+ * ganz exklusiv geschrieben und unglaubliche Verrenkungen im HTML-Sourcecode
+ * vorgenommen. Für 30% der Homeepagebesucher, eine Gruppe, die sich dadurch
+ * auszeichnet, dass sie von unheimlicher Dummheit und Ignoranz gezeichnet ist.
+ * Natürlich wissen diese DAUs nicht, was sie da machen. Denn wie man sieht,
+ * schadet ihr Verhalten nicht nur ihnen, sondern auch vielen anderen.
+ *
+ */
+
+/* #wrapper: min-width im IE simulieren */
+html{behavior:expression(function(element){
+ /* scripting hack, funktioniert "leider" erst im ie5.5. Und zerstört
+ nebenbei mein Syntaxhighlighting */
+ runtimeStyle.behavior = "none"; /* trash this expression */
+ var minWidth = 1000; /* Siehe fresh.css, gegen Zeile 136 (Selektor #wrapper) */
+
+ function fixwidth() {
+ /* Mindestbreite bei kleinen Monitoren sichern */
+ if(document.body.offsetWidth < minWidth) { // entspricht quasi window.innerWidth
+ document.all.wrapper.style.width = minWidth+"px";
+ //document.all.wrapper.style.overflow = "visible"; // bringt eigentlich nichts
+ } /*else... - da stuerzt er immer ab */
+ } // damit mein syntaxhighlighting glücklich ist : (nichts)
+
+ if (document.readyState == "complete") fixwidth();
+ else window.attachEvent("onload", fixwidth);
+ window.attachEvent("onresize", fixwidth);
+}(this))}
+
+#menu a {
+ /* border: 2px solid red !important;*/
+}
+
+#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
+ /* Listenpunkte, mal schaun ob der IE das auf die Reihe kriegt */
+ top: 7px; left: -14px; /* IEs top:0 geht relativ zum padding-left... */
+ background-image: none;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/arrowbg.menu.png', enabled='true', sizingMethod='crop');
+ /*border: 1px solid red;*/
+}
+
+/* Hauptueberschriften */
+#menu em.l1, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
+ background-image: none;
+ height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl1-bg.menu.png', enabled='true', sizingMethod='scale');
+}
+
+/* (Hauptüberschriften) gehovert, um Bg zurückzukriegen */
+#menu li.l1 a:hover {
+ background-image: url(../img/fresh.design/orangebg.menu.png);
+ filter: none;
+}
+
+/* Gehoverte/aktive Kategorie */
+#menu li.l2 div.on ul.l2 {
+ background-image: none;
+ height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl1-bg.menu.png', enabled='true', sizingMethod='scale');
+ /* Das :hover klappt nicht mal ansatzweise. Aufgegeben. */
+}
+
+/* Unterkategorieüberschriften */
+#menu li.l3 div.on em {
+ /* Überschrift eines aktiven Untermenüs, wo man ist. Volle Formatierung. */
+ background-image: none !important;
+ height: 10px; overflow: visible; /* Kleiner Hack, weil der Filter eine Groessenangabe braucht */
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl2-bg.menu.png', enabled='true', sizingMethod='scale') !important;
+}
+
+#menu li.l3 em span {
+ /* Immer einen ausgeklappten Pfeil zeigen, weil das Submenü eh immer angezeigt wird. */
+ background-image: none;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/subarrow.menu.png', enabled='true', sizingMethod='crop');
+ left: -16px; top: 10px;
+}
+
+/* Hier das, was bei dem Versuch übrig blieb, wenigstens für die Sublisten ein
+ :hover-Effekt nachbauen (letztendlich mit onclick, wie man sieht). Doch das
+ fuehrte dazu, dass man die Links in den Boxen nicht mehr anklicken kann.
+ Der gleiche Grund, weswegen es kein Hintergrundbild mehr gibt.
+ Auch das kriegt der Krüppel nicht hin.
+*/
+/*#menu li.l3 em {
+ cursor: pointer;
+ m: expression(this.onclick = new Function("this.parentElement.className='on';"));
+}
+#menu div.on em {
+ cursor: pointer;
+ *m: expression(this.onclick = new Function("this.parentElement.className='';"));*
+}*/
+
+#menu li.l3 div {
+ /* Seit v5.7.1 ständiges Vorhandensein der Boxen, im IE ohne Hover-Effekt */
+ /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/headl2-bg.menu.png', enabled='true', sizingMethod='scale'); *//* <- IE ist halt einfach zu blöd. */
+ background-color: #E0E6EE;
+ position: relative;
+}
+
+#menu li.l3 em {
+ /* Weil das Hover nicht geht, das ganze wenigstens etwas kenntlich machen */
+ /* Bzw. seit v5.7.1 ständiges Anzeigen der Boxen */
+ color: #000;
+ border-bottom: 1px solid #ccc;
+ background: none;
+}
+
+#menu li.l3 ul {
+ /* Menü immer anzeigen -- HOVER geht einfach nicht. */
+ /* Und wird seit v5.7.1 auch nur noch beschränkt gewünscht. Toll, was,
+ so viel Aufwand, um es 20 Tage später wieder rückgängig zu machen, hm?
+ */
+ display: block;
+ margin-top: -2px;
+ padding: 5px 0 5px 10px;
+ background: none;
+}
+
+/* Hintergrund der Unter(unter)kategorien */
+#menu li.l3 div.on ul {
+ /* Hintergrund dritte Navigation */
+ background-image: none !important;
+ /* Filter führt dazu, dass man andere Links der Box nicht anklicken kann... */
+ /*height: 10px; overflow: visible; * Kleiner Hack, weil der Filter eine Groessenangabe braucht */
+ /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/catl2-bg.menu.png', enabled='true', sizingMethod='scale') !important;*/
+ background-color: #D2DDEE;
+}
+
+#menu li.l3 div.on ul {
+ /* IE-Bug: Hintergrund "wackelt" -- Jeenas Empfehlung :-) */
+ position: relative;
+}
+
+
+/* Schwarzer Pfeil eine Zeile */
+#menu a.on, #menu a.on:hover, #menu li.l1 a.on, #menu li.l1 a.on:hover {
+ background-image: none;
+ background-color: transparent !important; /* Hintergrundfarbenbug bei li.l1 */
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow.menu.png', enabled='true', sizingMethod='crop');
+ height: 19px; /* direkt von fresh.css nur um den height: 10px-wert oben zu überschreiben */
+}
+
+/** Schwarzer Pfeil zwei Zeilen. */
+#menu li.long a.on, #menu li.long a.on:hover {
+ background-image: none;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long.menu.png', enabled='true', sizingMethod='crop');
+ height: 32px;
+}
+
+/* Schwarzer Pfeil drei Zeilen */
+#menu li.long3 a.on, #menu li.long3 a.on:hover {
+ background-image: none;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/blackarrow-long3.menu.png', enabled='true', sizingMethod='crop');
+ height: 48px;
+ /*border: 2px solid green !important;*/
+}
+
+/* Schrecklicher IE-Bug: Einfach ueberall Boxen ziehen. Sieht ganz
+ fantastisch aus, wo man viel sowas verwendet:
+ Also müssen .bordered-Elemente mit diesem ekelhaften Hack formatiert werden.
+ Einfach schrecklich.
+ Hinzugefuegt am 03.02.2008 fuer v5.7.17, .bordered zur Zeit nur genutzt auf
+ Lehrerinfoseite.
+*/
+
+.bordered {
+ position: relative;
+}
+
+
+/* FOOTER */
+#footer li a span {
+ overflow: hidden;
+ position: absolute;
+ display: block !important;
+ height: 29px;
+ width: 12px;
+ top: 05px;
+}
+
+#footer li a {
+ background-image: none !important;
+}
+
+#footer li.prev a span {
+ left: 0;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-left.footer.png', enabled='true', sizingMethod='crop');
+}
+
+#footer li.next a span {
+ right: 0;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-right.footer.png', enabled='true', sizingMethod='crop');
+}
+
+#footer li.up a span {
+ right: 0;
+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/fresh.design/white-up.footer.png', enabled='true', sizingMethod='crop');
+}
Index: /shared/css/fresh.css
===================================================================
--- /shared/css/fresh.css (revision 20)
+++ /shared/css/fresh.css (revision 20)
@@ -0,0 +1,711 @@
+/***************************************************************************\
+| _ _ _ |
+| /\ \ /\ \ / /\ technikum29.de |
+| \_\ \ / \ \ / / \ Screendesign der Version 5.7 |
+| /\__ \ / /\ \ \ / / /\ \ |
+| / /_ \ \\/_/\ \ \/_/ /\ \ \ Seit Version 5.7 default-css fuer |
+| / / /\ \ \ / / /\ \ \_\ \ \ die Homepage. screen.css steht |
+| / / / \/_/ / / / \ \/__\ \ \ jedoch immer noch als gleichwertige |
+| / / / / / / _ \_____\ \ \ Alternative zur Verfuegung. |
+| / / / / / /_/\_\ \ \ \ |
+|/_/ / / /_____/ / \ \ \ Alle "Spezialstyles" fuer einzelne |
+|\_\/ \________/ \_\/ Inhaltsseiten sind in common.css |
+| mit dem ehemal. print.css |
+| zusammengefasst. |
+| |
+| IE6-Workarounds sind hauptsaechlich in fresh-iefixing.css festgehalten! |
+\***************************************************************************/
+
+/*
+** Changelog seit v5.7:
+** v5.7FINAL: eingeführt
+** v5.7.1: Schriftgröße runtergesetzt, Menü l3 nun ständig angezeigt
+** v5.7.5: Kosmetische Verbesserungen (Sourcecode), Verallgemeinerungen
+** für Textabstand zu links floatenden Bildern, Restrukturierung
+** Navibereich, Transfer von allgemeinen Teilen (bildboxen) zu
+** common.css, Styleswticher, etc.
+** v5.7.6: opacity:.99; für Safari2-Bug
+** v5.7.21: Seitenmindesthöhe vergrößert
+**
+**
+**
+*/
+
+
+/*
+** "fresh" -- das klingt nach Freiheit, Frische, Vitalitaet, ein Design, was
+** alte Zoepfe abschneidet trotzdem aestetisch schoen ist. So oder so aehnlich
+** war es auch in der ersten Version geplant -- was in dieser hier vorliegenden
+** Endfassung davon uebrig geblieben ist, haben viele Leute unabhaengig von-
+** einander auf den Punkt gebracht: Konservativ. Jedes einzige der "frischen"
+** Elemente wurde in einer zaehen, langen Woche Stueck fuer Stueck entfernt
+** und durch etwas ersetzt, was in seiner Ganzheit nun von einigen Leuten als
+** schlichtweg "haesslich", von anderen als "konservativ" und "altbacken" be-
+** zeichnet wird. Eigentlich trifft nur eins zu: Es trifft vermutl. im Grossen
+** und ganzen die Vorstellungen des "Kunden", wenn auch jede Hoffnung auf das,
+** was man von einem "Redesign" erhoffen koennte, weitgehend gestorben ist.
+** So bleibt nur noch der Name, den ich - entgegen jedem Frust - aus Hoffnung
+** heraus nicht in "conservative.css" geaendert habe. Denn auch Rueckschritt
+** kann Frische bringen, und, um mit den Worten der Leute zu schliessen, die
+** das Design als "neutral" und "nicht schlecht" empfunden haben, es passt doch
+** zu einem Museum auch ein bisschen.
+** In diesem Sinne viel Spass beim Lesen eines Stylesheets, was meinem Empfinden
+** nach fuer ein solches Aussehen ueberpropertional umfangreich ist.
+** -- Sven, 15.07.2007 23:00
+*/
+
+
+body {
+ margin: 0; padding: 0;
+ color: #000; background-color: #fff;
+ font-family: Verdana,Tahoma,Helvetica,Arial,sans-serif;
+ /* exiplit keine font-size */
+}
+
+.hidden { display: none; }
+img { border: none; }
+.center { text-align: center; }
+.left { text-align: left; }
+.block, .justify { text-align: justify; }
+.clear { /* clearendes element, inhalt egal */
+ display: block; clear: both;
+ height: 2px; overflow: hidden; }
+
+/*
+** Table of contents:
+** 1. Banner
+** 2. General page layout (#wrapper, #page, #menu, #content,...)
+** 3. Sidebar (Menu, language link,...)
+** 4. Common content
+** 5. Footer (Relations, copyright)
+**
+*/
+
+
+/******************************************************************************
+** 1. Banner
+*/
+
+h1 {
+ margin: 0; padding: 0;
+ height: 98px;
+ text-align: center;
+ background-color: #5E7FAD;
+ background-repeat: repeat-x;
+ background-image: url(../img/fresh.design/freshbanner.bg.png);
+}
+
+h1 a {
+ /* Schriftzug als Link zu /[Sprache]/ */
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -438px;
+ /*margin-left: auto;
+ margin-right: auto;*/
+ display: block;
+
+ /* background-image: multilangual => h1.[lang] a */
+ background-position: top center;
+ background-repeat: no-repeat;
+ width: 877px;
+ height: 96px;
+}
+
+h1.de a {
+ /* Deutscher Banner */
+ background-image: url(../img/banner/big.de.png);
+}
+
+h1.en a {
+ /* English banner */
+ background-image: url(../img/banner/big.en.png);
+}
+
+h1.int a {
+ /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
+ background-image: url(../img/banner/int.jpg);
+}
+
+h1.dev a {
+ /* Banner fuer Development-Zone (weil er nun mal hier im Verzeichnis steckt) */
+ background-image: url(../img/banner/dev.png);
+}
+
+h1.none a {
+ /* Banner with no subtitle in any language */
+ /* Banner mit ueberhaupt keinem Subtitel */
+ background-image: url(../img/banner/logo.png);
+}
+
+h1 a span, h1 .old, #h1-subtitle {
+ /* a span: Beschriftung fuer Druck/designlose Darstellung */
+ /* h1 .old, #h1-subtitle: Legacylast zwecks Kombatibilitaet screen.css */
+ /* #h1-subtitle hiess frueher #h1border und wird jetzt im printlayout genutzt */
+ display: none;
+}
+
+
+/******************************************************************************
+** 2. General Page Layout (#sidebar, #content, #page,...)
+**
+** An dieser Stelle nur allgemeine grundlegende Bereiche beschreiben, kein
+** Design.
+*/
+
+#wrapper {
+ /* Wrapper, der #content und #sidebar umfliesst. Er ist fuer
+ min-width notwendig, damit #sidebar aus dem Bildschirm ver-
+ schwinden kann. Hier wird auch der Hintergrund definiert */
+ position: relative;
+ min-width: 1000px; /* seit v5.7.1 nur 1000px damit ein 1024px-Bildschirm nicht scrollen braucht */
+
+ background-position: top right;
+ background-image: url(../img/fresh.design/menu-bg/binary.png);
+ background-repeat: repeat-y;
+ /*background-attachment: fixed; netter effekt, aber komisch */
+}
+
+/* NAVIGATIONSLEISTENHINTERGRUENDE
+** Die Klasse um #wrapper rum ist einfach die $location-SSI-Variable.
+** Wegen IE6 braucht's leider noch einen Wrapper um den #wrapper :/
+*/
+.rundfunk #wrapper, .tontechnik #wrapper { background-image: url(../img/fresh.design/menu-bg/rundfunk.jpg); }
+.fernsehen #wrapper { background-image: url(../img/fresh.design/menu-bg/fernsehen.jpg); }
+.messtechnik #wrapper { background-image: url(../img/fresh.design/menu-bg/messtechnik.jpg); }
+.elektro-mechanik #wrapper { background-image: url(../img/fresh.design/menu-bg/elektro-mechanik.jpg); }
+.tabelliermaschine #wrapper { background-image: url(../img/fresh.design/menu-bg/tabelliermaschine.png); }
+.lochkarten #wrapper { background-image: url(../img/fresh.design/menu-bg/lochkarte.jpg); }
+.speichermedien #wrapper { background-image: url(../img/fresh.design/menu-bg/speichermedien.png); }
+.transistoren #wrapper { background-image: url(../img/fresh.design/menu-bg/transistoren.png); }
+.fruehe-computer #wrapper { background-image: url(../img/fresh.design/menu-bg/fruehe-computer.png); }
+.analogrechner #wrapper { background-image: url(../img/fresh.design/menu-bg/analogrechner.png); }
+.elektronenroehren #wrapper { background-image: url(../img/fresh.design/menu-bg/elektronenroehren.jpg); }
+/*
+ Es fehlen noch spezielle Hintergründe für:
+ * Faxtechnik
+ * Programmierbare Rechner 2. Generation
+ * 3. Generation mit ICs
+ * Kommerzielle Rechner
+ * Univac
+*/
+
+
+#sidebar {
+ /* Rechte Seitenleiste, relativ zum #wrapper */
+ /* "Navigation rechts" empfinden Manche als "sehr ungewöhnlich". Es gibt allerdings sehr häufig,
+ vor allem in letzter Zeit, rechtsausgerichtete Navigationen, z.B. in sehr, sehr vielen Blog-
+ designs. Wissenschaftliche Studien meinen, es wäre ergonomisch sinnvoller und würde zu
+ schnellerer Navigation auf Webseiten führen, weil der Abstand zu den Scrollleisten nicht so
+ groß ist. Wie dem auch sei, im fresh-Design habe ich bewusst eine rechtsausgerichtete Navigation
+ gewählt, damit die Schrift nicht so an den Rand geklatscht aussieht -- dadurch, dass sie links
+ ausgerichtet ist, entsteht mehr Freiraum. Außerdem ist es ein weiterer Indiz dafür, dass es sich
+ nicht um ein stinknormales langweiliges Layout handelt.
+ */
+ position: absolute;
+ right: 0; top: 98px;
+ width: 210px;
+ padding: 10px 20px 0 0;
+}
+
+#content, .content {
+ /* Allgemeines fuer Inhalt */
+ /*font-family: "Times New Roman", "Times", serif;*/
+ font-size: 90%; /* kleinere Schrift für Inhalt, seit v5.7.1 gewünscht*/
+ /* problematishce Sache. VOrher stand font-size:105% ausgeklammert, d.h. 100% wurde genutzt.
+ Afaik soll sogar ein Schriftwechsler implementiert werden.
+
+ */
+ line-height: 125%; /* 1.5em sieht auch nett aus */
+}
+
+#content {
+ /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */
+ margin-right: 230px; /* #sidebar.width + 2*#sidebar.padding! */
+ padding: 5%;
+ padding-bottom: 0; /* Kleines Workaround, um keine Riesenabstaende */
+ margin-bottom: 5%; /* unten zu kriegen, denn margins ueberlagern sich */
+
+ min-height: 1100px;
+ height: 1100px; /* IE workaround */
+ overflow: visible;
+ position: relative; /* für #sidebar-footnote, absolut dazu positiniert */
+}
+
+html>body #content { height: auto; }
+
+#page, .content {
+ /* Fuer seiten ohne #menu */
+ /* muss man ggf. noch anders regeln */
+ margin: 2em;
+}
+
+/******************************************************************************
+** 3. Sidebar: Menue, Languagelink, Footnote
+*/
+
+#sidebar {
+ font-size: 12px;
+ /*background-color: #fafafa; geregelt als img für #wrapper */
+ font-weight: bold; /* Herihässlich */
+}
+
+/* Sprachlink */
+#lang {
+ /* Link auf englische/deutsche Version, auffällig */
+ margin: 12px 0 20px 0;
+}
+
+#lang a {
+ display: block;
+ line-height: 140%;
+ padding: 5px 12px 5px 20px;
+ background-color: #fff;
+ /*background-image: url(../img/fresh.design/langbg.menu.png);*/
+ text-decoration: none;
+ border: 1px solid #5D7EAB;
+}
+
+#lang a:hover, #lang a:focus {
+ border: 1px outset #5D7EAB;
+ color: #000;
+ background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x;
+}
+
+/* Schriftgroesseneinstellung/Styleswitcher */
+#styleswitcher {
+ border: 1px solid #555;
+ background-color: #fff;
+ padding: 5px 20px;
+ text-align: right;
+}
+
+#styleswitcher em {
+ display: block;
+ text-align: center;
+ font-style: normal;
+}
+
+#styleswitcher a.small {
+ float: left;
+}
+
+
+
+/* Menue */
+#menu ul.l1, #menu li {
+ /* Menue Level1, Hauptmenue */
+ list-style: none;
+ margin: 0; padding: 0;
+}
+
+#menu li {
+ display: inline;
+}
+
+#menu ul ul {
+ margin: 0; padding: 0;
+}
+
+/* Beschreibung aller allgemeinen Links */
+#menu a, #menu em {
+ /* a=link, em=Kategorieueberschrift, a.on=hier ist man */
+ text-decoration: none;
+ display: block;
+ padding: 6px 3px 6px 20px;
+ position: relative; /* fuer absolut positionierbares #menu a span */
+}
+
+/* Beschreibung der Elemente der Hauptkategorie */
+#menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on {
+ /* die zwei Ueberschriften fuer Hauptunterkategorien & ^--- a.on nur wegen margin-top-dominanz!
+ Ausserdem die Links der Hauptkategorie
+ Achtung: #menu a.on muss das hier teilweise ueberschreiben, siehe
+ weiter unten
+ */
+ margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */
+ /*text-align: right;*/
+ font-weight: bold;
+ font-style: normal;
+ color: #fff; /*#5D7EAB;*/
+ /*background-color: #5d7eab;*/
+ background-image: url(../img/fresh.design/headl1-bg.menu.png);
+ /*border: 1px outset #5d7eab; IE machts komisch, also aufgesplittet: */
+ border-top: 2px solid #d9e0ea;
+ border-left: 2px solid #d9e0ea;
+ border-right: 2px solid #929dad;
+ border-bottom: 2px solid #929dad;
+}
+
+/* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */
+#menu a:hover, #menu li.l1 a:hover {
+ /* alle gehoverten Links */
+ background-color: #F0C494; /*#f0d994*/
+ background-image: url(../img/fresh.design/orangebg.menu.png);
+ background-repeat: repeat-x;
+ color: #000;
+ border: 1px outset #ffbf00;
+ padding: 5px 2px 5px 19px; /* um den 1px border zu kompensieren (gegen ruckeln) */
+}
+
+#menu li.l1 a:hover {
+ /* Um 1px Rahmen wieder zu ueberschreiben */
+ border-width: 2px;
+ /* und um 2px-Kompensation zu überschreiben, da sich rahmenbreite nicht ändert */
+ padding: 6px 3px 6px 20px;
+}
+
+#menu li.long a:hover, #menu li.long3 a:hover {
+ /* fuer mehrzeilige (lange) Links langer Hintergrund */
+ /* long3 wird zwar bis jetzt nicht mehr genutzt, aber egal. */
+ background-image: url(../img/fresh.design/orangebg-long.menu.png);
+}
+
+#menu ul.l2 {
+ /* Erstes Unterkategorielevel Abstand von erstem Link
+ kompensieren um direkten Anschluss an die Ueberschrift
+ zu gewaehrleisten */
+ /*margin-top: -2px;*/
+ padding: 7px 0;
+}
+
+#menu li.l2:hover ul.l2, #menu li div.on ul.l2 {
+ /* Unterkategorien gehovert/aktiv - allgemein - Hintergrundfarbe */
+ /*background-color: #DEE5EE;*/
+ background-image: url(../img/fresh.design/catl1-bg.menu.png);
+}
+
+#menu ul.l2 a {
+ /* Ein bisschen Abstand fuer normale Links */
+ margin-top: 1px;
+ margin-bottom: 1px;
+}
+
+/*
+Besuchte-Seiten-Haeckchen letzendlich voellig entfernt :(
+#menu ul.l2 a:visited span {
+ * Link-Span fuer Haeckchen fuer bereits besuchte
+ Seiten anzeigen nutzen *
+ right: 0;
+ width: 18px; height: 26px;
+ background-image: url(../img/fresh.design/visitedbg.menu.png);
+}
+#menu ul.l2 li.long a:visited span,
+#menu ul.l2 li.long3 a:visited span {
+ height: 42px;
+}
+*/
+
+#menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span {
+ /* Allgemeine Listenpunkte (kleine blaue Pfeile) */
+ display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 20px; height: 20px;
+ overflow: hidden; /* wegen -Inhalt */
+ background-image: url(../img/fresh.design/arrowbg.menu.png);
+ background-repeat: no-repeat;
+ background-position: 6px 7px;
+}
+
+html>body #menu ul.l2 a:hover span { /* IE darf nicht mitmachen, der positioniert anders */
+ /* position:absolute geht nach border, und der ist jetzt 1px breit */
+ top: -1px; left: -1px;
+}
+
+#menu ul.l2 a:focus span {
+ /* Ausblenden bei focus -> da kommt der schwarze grosse Pfeil */
+ display: none;
+}
+
+/* Beschreibung der Elemente zur 3. Unterkategorie */
+#menu li.l3 div {
+ /* Abstand 3. Unterkategorie zu anderen Punkten */
+ margin: 10px 0;
+}
+
+#menu li.l3 em {
+ /* Ueberschriften der Unterkategorien Level3 */
+ font-weight: bold;
+ font-style: normal;
+ color: #224B88;
+ /* siehe auch z.317 direkt hier drueber wegen allgemeinen Listenpunkten */
+ /* -> nein. keine allgemeinen Listenpunkte mehr. Nur noch runtergehende */
+}
+
+#menu li.l3 ul {
+ /* Unterkategorien Level3 */
+ display: block;
+ /*margin-top: -2px;*/
+ padding: 5px 0 5px 10px;
+ background-image: url(../img/fresh.design/catl2-bg.menu.png);
+ /*background-color: #BACEEC;*/
+ /*border-left: 5px solid #d4d4d4;*/
+ opacity: 0.7;
+}
+
+#menu li.l3:hover ul, #menu li.l3 div.on ul {
+ opacity: .99; /* Safari2-Bug: opacity:1 blendet das Ding komplett aus! */
+}
+
+#menu li.l3 em {
+ background-image: url(../img/fresh.design/catl2-bg.menu.png);
+}
+
+#menu li.l3:hover em, #menu li.l3 div.on em {
+ /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */
+ /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */
+ background-image: url(../img/fresh.design/headl2-bg.menu.png);
+ color: #000;
+}
+
+#menu li.l3 em span, #menu li.l3 div.on em span {
+ /* Icon ist immer runtergefahren */
+ background-image: url(../img/fresh.design/subarrow.menu.png);
+ background-position: 4px 10px;
+}
+
+#menu a.on, #menu a.on:hover, #menu a:focus, #menu li.l1 a.on, #menu li.l1 a:focus { /* #menu a.on.l1, #menu a.on.l1:hover */
+ /* Formatierung des Dings, wo man gerade ist */
+ /* Dort soll ein schwarzer Pfeil links raushaengen */
+ background-image: url(../img/fresh.design/blackarrow.menu.png);
+ background-position: left center;
+ background-repeat: no-repeat;
+ color: #000;
+ margin-left: -12px;
+ padding: 6px 5px 6px 31px; /* gegen :hover-Ueberschreibung */
+ font-weight: bold;
+ height: 19px;
+ /* gegen allgemeines #menu a:hover */
+ background-color: inherit !important;
+ border: none !important;
+}
+
+#menu li.long a.on, #menu li.long a.on:hover, #menu li.long a:focus {
+ /* Zweizeilige oder dreizeilige Elemente */
+ background-image: url(../img/fresh.design/blackarrow-long.menu.png);
+ height: 32px;
+ /* ggf. :focus-Teil entfernen, der laesst den Pfeil bereits */
+ /* vor dem Laden der neuen Seite erscheinen */
+}
+
+#menu li.long3 a.on, #menu li.long3 a.on:hover, #menu li.long3 a:focus {
+ /* Dreizeilige Elemente */
+ background-image: url(../img/fresh.design/blackarrow-long3.menu.png);
+ height: 48px;
+}
+
+#sidebar-footnote {
+ /* Container, der in #content steckt und rechts in der Seitenleiste
+ angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund
+ einzugehen. */
+ position: absolute;
+ /* Position relativ zum inneren padding von #content! */
+ bottom: 0;
+ right: -230px;
+ width: 230px;
+}
+
+#sidebar-footnote a {
+ display: block;
+ padding: 1em;
+ text-align: center;
+}
+
+
+/******************************************************************************
+** 4. Common Content
+*/
+
+h2 {
+ font-weight: bold;
+ font-size: 160%;
+ line-height: 125%; /* wird sonst relativ zu falscher schriftgroesse vererbt */
+ margin: 0 0 0.7em 0;
+ padding: 0;
+}
+
+p { text-align: justify; }
+
+a:link, a:visited {
+ color: #224B88;
+ text-decoration: underline;
+}
+
+a:hover, a:active, a:focus {
+ color: #882224;
+ text-decoration: underline;
+}
+
+/*
+ Links mit Pfeilen: a.go & a.arrow
+ entweder mit Bildern oder mit »-Dooppelpfeil
+*/
+
+/*a.arrow:before, a.go:before {
+ content: "»";
+ text-decoration: none;
+ padding-right: 0.5em;
+ font-weight: bold;
+}*/
+
+html>body a.arrow,
+html>body a.go {
+ background-position: center left;
+ background-repeat: no-repeat;
+ padding-left: 13px;
+}
+
+html>body a.arrow:link,
+html>body a.arrow:visited,
+html>body a.go:link,
+html>body a.go:visited {
+ background-image: url(../img/fresh.design/arrowbg.a.png);
+}
+
+html>body a.arrow:hover,
+html>body a.arrow:active,
+html>body a.arrow:focus,
+html>body a.go:hover,
+html>body a.go:active,
+html>body a.go:focus {
+ background-image: url(../img/fresh.design/arrowbg-hot.a.png);
+}
+
+html>body #content ul {
+ /* Allgemeine Listen: Listenzeichen Dreieck */
+ list-style-image: url(../img/fresh.design/arrowbg.menu.png);
+ /* transparentes PNG => IE bitte nicht. */
+}
+
+/* Navigationslisten:
Im Verzeichnis /shared/img/banner/ befinden sich einige offizielle sowie inoffizielle Banner- und Logos der technikum29.de-Homepage.
+
+
Hinweis zur Verwendung außerhalb der technikum29-Präsenz: Diese Banner sind Eigentum von technikum29 und dürfen nur im Zusammenhang damit (Namensnennung, etc.) verwendet werden. Nehmen sie im Zweifelsfall Kontakt auf.
Die Dateien in diesem Verzeichnis werden im neuen Fresh-Design
+(seit Version 5.7)
+als Hintergründe für die seitenleiste (rechts) verwendet. Für fast jeden Themenbereich/jede Inhaltsseite
+gibt es einen eigenen Hintergrund, der immer in einem Bezug zum Thema steht.
+
+
Jeder einzelne Hintergrund wurde in mühevoller Kleinarbeit erstellt. Entsprechend gilt der folgende
+Hinweis auch hier:
Allgemeine Fallback-Grafik, wird bei Seiten wie Start/Suche/Impressum verwendet. Dargestellt sind kleine
+ Nullen und Einsen, die in einem Vektorgrafikprogramm (Inkscape)
+ gezeichnet wurden. In den dargestellten Oktetts ist eine Botschaft des Künstlers enthalten
+ (durch die nachträgliche Ausgrauung nach rechts kann diese allerdings vermutlich nicht mehr gelesen werden)
+ ;-)
+
Drei eingescannte Bilder, wobei die antike Fernsehkamera freigestellt wurde. Untendrunter
+ ist ein Testbild abgebildet (farblos) und ein selbsterklärendes Bild ("3 Minuten Pause").
Typische Schaltung von Rechnern mit Elektronenröhren. Die Röhren in dem Schaltbild wurden
+ mit GIMP besonders hervorgehoben und die restliche Schaltung leicht abgewandelt.
+
Eingescannte Lochkarte, freigestellt auf schwarzen Hintergrund. Mit etwas Anstrengung
+ kann man sogar die Beschriftung lesen oder den Text anhand der Lochungen erschließen (ASCII).
Es handelt sich hier um Noten von Richard Strauss
+ Till Eulenspiegels lustige Streiche, Opus 28,
+ einer sinfonischen Dichtung für Orchester. Das Bild zeigt Takt 531 (das komplette System) und ist
+ eingescannt von Seite 83 aus einer Studienpatitur, erschienen in Edition Eulenburg Nr. 443, EE 3502.
+ Es wird verwendet auf den Seiten Rundfunk und Tonaufnahme- und Wiedergabetechnik.
+
Diese Grafik basiert auf einer Abbildung von Typenrädern (eingescannt). Diese wurde
+ zwecks Kachelung entzerrt (Photoshop) und dann freigestellt/sterilisiert (GIMP).
+ Dadurch sind auch einzelne Verzerrungen und Ungleichheiten (an den Ziffern) zu sehen.
Auch hier ein Scan eines Schaltplans, anschließend mit GIMP modifiziert, sodass die
+ zwei Transistoren besonders zur Geltung kommen und eine Kachelung möglich ist.
+
+
+
+
+
Index: /shared/js/ie5.js
===================================================================
--- /shared/js/ie5.js (revision 20)
+++ /shared/js/ie5.js (revision 20)
@@ -0,0 +1,57 @@
+/**
+ * technikum29.de fresh/screen-Design-Unterscheidung
+ * Dieses JavaScript wird seit v5.7 von allen IEs der Version 5.x geladen.
+ * Diese stellen damit automatisch* auf das alte screen.css um, da sie das
+ * neue fresh.css nicht darstellen koennen (transparente pngs, kaputtes boxmodel,
+ * etc. pp). Übrigens sieht es im IE5.5 gar nicht so schlimm aus.
+ * Nur IE5.0 braucht wirklich das alte Design. Trotzdem kriegen es jetzt
+ * alle IE5er. Einfach mal so aus Prinzip. Denn, ich zitiere aus
+ * /shared/css/fresh-iefixing.css:
+ *
+** Man beachte die aktuellen Statistiken, hier aus April/Mai/Juni 2007:
+**
+** 40.60% Gecko-Engine (z.B. Firefox) und KHTML (Konqueror, Safari)
+** 31.90% Internet Explorer 6
+** 16.50% Internet Explorer 7
+** 3.39% Opera
+** 1.01% Internet Explorer 5
+** 1.85% Bots (z.B. Suchmaschinen)
+ *
+ * Na, also für gerade mal 1% aller Homepagebesucher dieses folgende Script
+ * hier. Ich will die IE5-Benutzer an der Stelle gar nicht mehr beschimpfen,
+ * denn wer einen fast 10 jahre alten Browser benutzt und meint, damit heute
+ * noch Webseiten anschauen zu wollen, dem ist eh nicht mehr zu helfen.
+ *
+ * Warum dann dieses Script? Die Zahlen da oben waren mir echt neu (sie sind
+ * vom eigenen modularen Logfileanalsyseprogramm). Monatelang glaubte ich dem,
+ * was der Webalizer als Auswertung gegeben hat:
+ *
+ * 50.31% Internet Explorer (6.0 vermute ich mal)
+ * 41.38% Internet Explorer 5.0
+ * 2.71% Opera
+ * 1.11% Netscape
+ *
+ * Diese Statistiken lügen, dass sich die Balken biegen. Gesteigerten Wert wird
+ * auf den IE5 jetzt nur noch gelegt, weil er, glaub ich, noch auf einigen
+ * Windows 2000-Computern hier im Haus installiert ist. Na und die können sich
+ * jetzt sogar noch exquisit am alten design erfreuen.
+ *
+ * Ginge es nach mir, dann könnten die 30% IE6-Benutzer mit ihrer Dummheit auch
+ * mit dem alten Design bestraft werden, aber das soll wohl nicht so sein. Naja,
+ * 30% sind ja auch nicht viel. Tendenz fallend.
+ *
+ **/
+
+function setActiveStyleSheet(title) {
+ var i, a, main;
+ for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+ if(a.getAttribute("rel").indexOf("style") != -1
+ && a.getAttribute("title")) {
+ a.disabled = true;
+ if(a.getAttribute("title") == title) a.disabled = false;
+ /*alert(a.getAttribute("title") + " ["+a.getAttribute("href")+"] wurde "+(a.disabled?"deaktiviert":"aktiviert"));*/
+ }
+ }
+}
+
+setActiveStyleSheet("technikum29 old");
Index: /shared/js/startseite.js
===================================================================
--- /shared/js/startseite.js (revision 20)
+++ /shared/js/startseite.js (revision 20)
@@ -0,0 +1,44 @@
+/*
+ * technikum29.de Startseitenscript (seit v5.5.6)
+ *
+ * Mit diesem Script kann man die Sprach"boxen"
+ * zusätzlich anklicken (Seite funktioniert einwandfrei
+ * auch ohne JavaScript)
+ *
+ **/
+
+ var lang = new Array("de", "en");
+
+ function initHovers() {
+ // Handler für Sprachelemente einrichten (beim Laden)
+ var le;
+ for(var x=0; x < lang.length; x++) {
+ le = document.getElementById(lang[x]);
+ le.langcounter = x;
+ le.onmouseover = highlightLanguage;
+ le.onmouseout = blurLanguage;
+ le.onclick = chooseLanguage;
+ }
+ }
+
+ function highlightLanguage() {
+ // mit der Maus über ein Sprachelement gefahren
+ this.style.cursor = "pointer";
+ this.style.border = "2px solid #7991b7";
+ this.style.margin = "-2px";
+ // etc. pp.
+ }
+
+ function blurLanguage() {
+ // mit der Maus ein Sprachelement verlassen
+ this.style.border = "none";
+ this.style.margin = "0";
+ }
+
+ function chooseLanguage() {
+ // mit der Maus auf ein Sprachelement geklickt
+ document.location.href = "/"+lang[this.langcounter]+"/";
+ }
+
+
+ window.onload = initHovers;
Index: /shared/old/css-prev5.7/additional.css
===================================================================
--- /shared/old/css-prev5.7/additional.css (revision 20)
+++ /shared/old/css-prev5.7/additional.css (revision 20)
@@ -0,0 +1,27 @@
+/*
+ technikum29.de design (Version 5.3)
+ Additional css für Designelemente, die zur Homepage gehören
+ aber selten gebraucht werden (das gleiche für nicht zur Homepage
+ gehörende Designs gibts unter /etc/src/improved.css)
+*/
+
+/* Links floatende Bildergalerie, einfache Listenstruktur
+ gebraucht auf univac9400-Seite
+ ** seit 5.5.2 wegen Designkorrektur spezialisierung auf **
+ ** univac-Seite **
+*/
+
+ul.thumbs, ul.thumbs li {
+ list-style: none;
+ margin: 0; padding: 0;
+}
+
+ul.thumbs li {
+ float: left;
+ margin: 10px 50px 20px 0;
+ clear: left;
+}
+
+ul.thumbs li img {
+ width: 238px; /* um unschönen textreinfließeffekt zu umgehen */
+}
Index: /shared/old/css-prev5.7/details.css
===================================================================
--- /shared/old/css-prev5.7/details.css (revision 20)
+++ /shared/old/css-prev5.7/details.css (revision 20)
@@ -0,0 +1,76 @@
+
+/*------------------------------------------*
+ * T E C H N I K U M 2 9 *
+ * Details CSS *
+ *------------------------------------------*/
+
+/*
+ updated / .. für v5.5
+*/
+
+td, table, tr
+ {
+ font: 12px Verdana;
+ }
+table p
+ {
+ text-align: justify;
+ line-height: 120%;
+ }
+table p.center
+ {
+ margin: 5px 0px;
+ text-align: center;
+ }
+td b
+ {
+ display: block;
+ }
+td.b, td.b a
+ {
+ font-weight: bold;
+ }
+table
+ {
+ background-color: #7090C0;
+ }
+td
+ {
+ padding: 2px;
+ vertical-align: middle;
+ text-align: center;
+ background-color: #F7FDFF;
+ }
+th
+ {
+ padding: 2px;
+ text-align: center;
+ background-color: #BED0E5;
+ }
+.bemerkungen
+ {
+ vertical-align: middle;
+ text-align: justify;
+ }
+/*
+a:link, a:visited
+ {
+ text-decoration: underline;
+ color: #0E466A;
+ }
+a:hover
+ {
+ text-decoration: none;
+ background-color: #B1C6DF;
+ border: 1px solid #2C5494;
+ color: #2C5494;
+ }
+a:active, a:focus
+ {
+ text-decoration: none;
+ background-color: #F3D8D8;
+ border: 1px solid #D54747;
+ color: #D54747;
+ }
+
+*/
Index: /shared/old/css-prev5.7/extra.css
===================================================================
--- /shared/old/css-prev5.7/extra.css (revision 20)
+++ /shared/old/css-prev5.7/extra.css (revision 20)
@@ -0,0 +1,315 @@
+
+/*------------------------------------------*
+ * T E C H N I K U M 2 9 *
+ * Extrastylesheet *
+ * Ersatzstylesheet für screen.css mit *
+ * kleinerem banner (dazu etwas abgespeckt),*
+ * *nur* zu benutzen für Spezialseiten *
+ * (Details & Geräte) *
+ *------------------------------------------*/
+
+body {
+ margin: 0; padding: 0;
+ color: #000;
+ font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
+}
+
+.hidden {
+ display: none;
+}
+
+img {
+ border: none;
+}
+
+
+/***** HEAD *****/
+h1 {
+ margin: 0; padding: 0;
+ height: 47px; /* real height: 67px */
+ border-bottom: 1px solid #3A6198;
+ text-align: center;
+ background-color: #5E7FAD;
+
+ z-index: 12;
+}
+
+html > body h1 {
+ /* For intelligent browsers */
+ height: 47px;
+}
+
+h1 a {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -380px;
+ z-index: 11;
+ display: block;
+
+ /* background-image: see h1 a.[lang] */
+ background-position: top center;
+ background-repeat: no-repeat;
+ width: 760px;
+ height: 47px;
+}
+
+h1 a.de {
+ background-image: url(../img/banner/small.de.jpg);
+}
+
+h1 a.en {
+ background-image: url(../img/banner/small.en.jpg);
+}
+
+h1 a span {
+ display: none;
+}
+
+h1 span.d {
+ background-color: #0C377A;
+ display: block;
+ width: 50%;
+ height: 47px;
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 10;
+}
+
+h2 {
+ font: bold 140% Verdana,Arial,Helvetica,sans-serif;
+ margin: 10px 0 10px 0;
+ padding: 0;
+}
+
+/* Abstand zwischen h2 und h1 */
+.a {
+ height: 10px;
+ display: block;
+}
+
+
+#h1border {
+ /* border hilfsmittel */
+ background-color: #C8C8C8;
+ position: absolute; z-index: 10;
+/* border: 10px solid red; */
+ display: block;
+ height: 2px; width: 100%;
+ overflow: hidden;
+ margin: 0; padding: 0;
+}
+
+
+/* Seiteninhalt */
+
+#page {
+ margin: 40px 35px;
+}
+
+/* Seitenelemente */
+
+p {
+ text-align: justify;
+}
+
+a:link, a:visited {
+ color: #224B88;
+ text-decoration: underline;
+}
+
+a:hover, a:active, a:focus {
+ color: #882224;
+ text-decoration: underline;
+}
+
+
+.highlight {
+ color: #000E8C;
+ font-style: italic;
+}
+
+
+/*
+ Links mit Pfeilen: a.go & a.arrow:
+ Momentan noch kein IE-Workaround gefunden
+ (Bei mehrzeiligen Links pfeile im text)
+ Siehe auch Changelog (/CHANGELOG.txt)
+*/
+
+html>body a.arrow,
+html>body a.go {
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ padding-left: 13px;
+}
+
+html>body a.arrow:link,
+html>body a.arrow:visited,
+html>body a.go:link,
+html>body a.go:visited {
+ background-image: url(../img/double.a.png);
+}
+
+html>body a.arrow:hover,
+html>body a.arrow:active,
+html>body a.arrow:focus,
+html>body a.go:hover,
+html>body a.go:active,
+html>body a.go:focus {
+ background-image: url(../img/double-hot.a.png);
+}
+
+/* Definitionslisten */
+
+dt {
+ margin-top: 1.2em;
+ font-weight: bold;
+ display: block;
+}
+dd {
+ text-align: justify;
+ margin: 0; padding: 0;
+}
+
+
+/* Navigationsleisten mit Pfeilen: Auch
+ Benutzung für IE */
+
+
+ul.nav, ul#nav {
+ list-style: none;
+ padding: 0;
+}
+ul.nav li, ul#nav li {
+ margin: 0;
+ padding: 0;
+}
+ul.nav li a, ul#nav li a {
+ padding-left: 13px;
+ background-position: bottom left;
+ background-repeat: no-repeat;
+}
+
+ul.nav li a:link,
+ul#nav li a:link,
+ul.nav li a:visited,
+ul#nav li a:visited {
+ background-image: url(../img/double.a.png);
+}
+
+ul.nav li a:hover, ul#nav li a:hover,
+ul.nav li a:active, ul#nav li a:active,
+ul.nav li a:focus, ul#nav li a:focus {
+ background-image: url(../img/double-hot.a.png);
+}
+
+
+/****** IMAGES & MORE *****/
+
+p.bildtext {
+ /* Bildbeschreibung */
+ margin: 10px 10%;
+}
+
+div.bildtext {
+ /* Bildbeschreibung, die in irgendeiner
+ Art Spalte angezeigt wird, daher kein
+ relativer Rand (10%, siehe p.bildtext) */
+ text-align: justify;
+}
+
+.center {
+ /* bild über text, alles zentriert */
+ text-align: center;
+/* border: 1px solid #B6C6D4;
+ background-color: #F1FCFE; */
+ margin: 10px;
+}
+
+.center .boxleft {
+ /*
+ zentrierter inhalt mit .center
+ box mit bestimmter breite und
+ text-align: left;
+ */
+ text-align: left !important;
+}
+
+html>body .center .boxleft {
+ /* intelligent browsers only */
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+}
+
+.right {
+ /* Image -> left, text -> right */
+ margin: 10px;
+}
+
+.right img {
+ float: left;
+ margin: 1px;
+}
+
+.right p.bildtext {
+ padding: 5px;
+ margin: 0 15px 5px 15px;
+}
+
+.left {
+ /* Image -> right, text -> left */
+ margin: 10px;
+}
+
+.left img {
+ float: right;
+}
+
+.left p.bildtext {
+ padding: 5px;
+}
+
+.clear {
+ /* clearendes element, inhalt egal */
+ display: block;
+ clear: both;
+ height: 2px;
+ overflow: hidden;
+}
+
+blockquote {
+ margin: 5px 0px;
+ padding: 0px;
+ color: #2F319D;
+ text-align: justify;
+}
+
+
+/* spezialseitennavigation (kleine
) */
+ul#nav {
+ text-align: left;
+}
+
+
+/* Mehrspaltigkeit */
+
+
+.cols {
+ /* Mehrspaltiger Inhalt. */
+}
+
+.cols .leftcol,
+.cols .rightcol {
+ padding: 5px 10px;
+/* border: 3px dashed red;*/
+}
+
+.col .leftcol {
+ float: left; width: 43%;
+}
+
+.col .rightcol {
+ float: right; width: 43%;
+}
Index: /shared/old/css-prev5.7/print.css
===================================================================
--- /shared/old/css-prev5.7/print.css (revision 20)
+++ /shared/old/css-prev5.7/print.css (revision 20)
@@ -0,0 +1,76 @@
+
+ /**************************************************************\
+ * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 *
+ * T E C H H NN N I K K U U MM MM 2 2 9 9 *
+ * T EEE C HHHH N N N I KK U U M M M 2 99999 *
+ * T E C H H N NN I K K U U M M 2 9 *
+ * T EEEE CCCC H H N N III K K UUUU M M 22222 9 *
+ * *
+ * P R I N T C S S *
+ \**************************************************************/
+
+/*
+ v5 testing changes:
+ body: font: 12pt => 100%
+ a: links als solche unkenntlich gemacht
+ h1: experimentell: für intellgente Browser erheblich
+ erweiterten Anfang (technikum29 + Banner...)
+*/
+
+body {
+ margin: 1em; padding: 0;
+ color: #000;
+ font: 100% "Times New Roman",Times,serif;
+}
+
+.hidden {
+ display: none;
+}
+
+img {
+ border: none;
+}
+
+h1 {
+ margin: 0; padding: 6px 0;
+ border-bottom: 1px solid #AAA;
+ text-align: center;
+
+ font: 180% Arial,Verdana,Helvetica,sans-serif;
+}
+
+h1 a, h1 a span {
+ color: #AAA !important;
+ text-decoration: none !important;
+}
+
+h1 span.d:after {
+ content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
+}
+
+h1 span.d {
+ display: block;
+ font-size: 60%;
+}
+
+h2 {
+ font-size: 150%;
+ margin: 10px 0 10px 0;
+ padding: 0;
+}
+
+div#lang, #menu, #rel {
+ display: none;
+}
+
+/***** TEXT *****/
+
+p {
+ text-align: justify;
+ line-height: 110%;
+}
+
+a:link, a:visited {
+ color: #000;
+ text-decoration: none;
+}
Index: /shared/old/css-prev5.7/screen.css
===================================================================
--- /shared/old/css-prev5.7/screen.css (revision 20)
+++ /shared/old/css-prev5.7/screen.css (revision 20)
@@ -0,0 +1,477 @@
+
+ /**************************************************************\
+ * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 *
+ * T E C H H NN N I K K U U MM MM 2 2 9 9 *
+ * T EEE C HHHH N N N I KK U U M M M 2 99999 *
+ * T E C H H N NN I K K U U M M 2 9 *
+ * T EEEE CCCC H H N N III K K UUUU M M 22222 9 *
+ * *
+ * technikum29.de - Design *
+ * S C R E E N C S S *
+ \**************************************************************/
+
+body {
+ margin: 0; padding: 0; color: #000;
+ font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
+}
+
+.hidden { display: none; }
+img { border: none; }
+.center { text-align: center; }
+
+
+/***** HEAD *****/
+
+h1 {
+ margin: 0; padding: 0;
+ height: 67px; /* real height: 67px */
+ text-align: center;
+ background-color: #5E7FAD;
+
+ z-index: 12;
+}
+
+html > body h1 {
+ /* For intelligent browsers */
+ height: 67px;
+}
+
+h1 a {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -380px;
+ z-index: 11;
+ display: block;
+
+ /* background-image: multilangual, so look at h1.[lang] a */
+ background-position: top center;
+ background-repeat: no-repeat;
+ width: 760px;
+ height: 67px;
+}
+
+h1.de a {
+ /* Deutscher Banner */
+ background-image: url(../img/banner.de.jpg);
+}
+
+h1.en a {
+ /* English banner */
+ background-image: url(../img/banner.en.jpg);
+}
+
+h1.int a {
+ /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
+ background-image: url(../img/banner/int.jpg);
+}
+
+h1.none a {
+ /* Banner with no subtitle in any language */
+ /* Banner mit überhaupt keinem Subtitel */
+ background-image: url(../img/banner/logo.jpg);
+}
+
+h1 a span {
+ display: none;
+}
+
+h1 span.d {
+ background-color: #0C377A;
+ display: block;
+ width: 50%;
+ height: 67px;
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 10;
+}
+
+h2 {
+ font: bold 140% Verdana,Arial,Helvetica,sans-serif;
+ margin: 30px 0 10px 0;
+ padding: 0;
+}
+
+div#lang {
+ /*
made with ftplistings-tool
Index: /shared/old/css.old/kontakt.css
===================================================================
--- /shared/old/css.old/kontakt.css (revision 20)
+++ /shared/old/css.old/kontakt.css (revision 20)
@@ -0,0 +1,60 @@
+
+/*------------------------------------------*
+ * T E C H N I K U M 2 9 *
+ * Kontakt CSS *
+ *------------------------------------------*/
+
+ /* Stylesheet für das Kontaktformular */
+
+form label {
+ font: bold 12px Verdana;
+ width: 90px;
+ float: left;
+ display: block;
+}
+
+form div.input, form div.error {
+ margin-bottom: 3px;
+ margin-left: 90px;
+ max-width: 473px;
+}
+
+form div.error {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ background-color: #FFE6E6;
+}
+
+form div.error p {
+ margin: 0;
+ color: #F54548;
+}
+
+input.text, input.optional, textarea, input.error {
+ background-color: #F6F8FA;
+ border: 1px solid #3A6198;
+ font: 12px Verdana;
+ width: 470px;
+}
+
+input.optional {
+ color: #7090C0;
+}
+
+input.error {
+ border: 1px solid #B74860;
+ color: #B74860;
+}
+
+textarea {
+ height: 200px;
+}
+
+input.button {
+ font: 12px Verdana;
+ padding: 1px 3px;
+ border-width: 2px;
+ border-style: solid;
+ border-color: #FFFFFF #7090C0 #7090C0 #FFFFFF;
+ background-color: #BED0E5;
+}
Index: /shared/old/css.old/print.css
===================================================================
--- /shared/old/css.old/print.css (revision 20)
+++ /shared/old/css.old/print.css (revision 20)
@@ -0,0 +1,71 @@
+
+ /**************************************************************\
+ * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 *
+ * T E C H H NN N I K K U U MM MM 2 2 9 9 *
+ * T EEE C HHHH N N N I KK U U M M M 2 99999 *
+ * T E C H H N NN I K K U U M M 2 9 *
+ * T EEEE CCCC H H N N III K K UUUU M M 22222 9 *
+ * *
+ * P R I N T C S S *
+ \**************************************************************/
+
+
+body {
+ margin: 1em; padding: 0;
+ background-color: #fff;
+ color: #000;
+ font: 12pt "Times New Roman",Times,serif;
+}
+
+.hidden {
+ display: none;
+}
+
+img {
+ border: none;
+}
+
+h1 {
+ margin: 0; padding: 6px 0;
+ border-bottom: 1px solid #AAA;
+ text-align: center;
+
+ font: 18pt Arial,Verdana,Helvetica,sans-serif;
+}
+
+h1 a, h1 a span {
+ background-color: #fff;
+ color: #AAA !important;
+ text-decoration: none !important;
+}
+
+h1 span.d {
+ display: none;
+}
+
+h2 {
+ font-size: 150%;
+ margin: 10px 0 10px 0;
+ padding: 0;
+}
+
+div#lang, #menu, #rel {
+ display: none;
+}
+
+/***** TEXT *****/
+
+p {
+ text-align: justify;
+ line-height: 110%;
+}
+
+a:link, a:visited {
+ color: #224B88;
+ text-decoration: underline;
+}
+
+a:hover, a:active, a:focus {
+ color: #882224;
+ text-decoration: underline;
+}
Index: /shared/old/css.old/screen-v5.1.1.css
===================================================================
--- /shared/old/css.old/screen-v5.1.1.css (revision 20)
+++ /shared/old/css.old/screen-v5.1.1.css (revision 20)
@@ -0,0 +1,471 @@
+
+ /**************************************************************\
+ * TTTTT EEEE CCCC H H N N III K K U U M M 222 999 *
+ * T E C H H NN N I K K U U MM MM 2 2 9 9 *
+ * T EEE C HHHH N N N I KK U U M M M 2 99999 *
+ * T E C H H N NN I K K U U M M 2 9 *
+ * T EEEE CCCC H H N N III K K UUUU M M 22222 9 *
+ * *
+ * technikum29.de - Design *
+ * S C R E E N C S S *
+ \**************************************************************/
+
+body {
+ margin: 0; padding: 0;
+ color: #000;
+ font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
+}
+
+.hidden {
+ display: none;
+}
+
+img {
+ border: none;
+}
+
+
+/***** HEAD *****/
+
+h1 {
+ margin: 0; padding: 0;
+ height: 67px; /* real height: 67px */
+ border-bottom: 1px solid #3A6198;
+ text-align: center;
+ background-color: #5E7FAD;
+
+ z-index: 12;
+}
+
+html > body h1 {
+ /* For intelligent browsers */
+ height: 67px;
+}
+
+h1 a {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ margin-left: -380px;
+ z-index: 11;
+ display: block;
+
+ /* background-image: multilangual, so look at h1.[lang] a */
+ background-position: top center;
+ background-repeat: no-repeat;
+ width: 760px;
+ height: 67px;
+}
+
+h1.de a {
+ /* Deutscher Banner */
+ background-image: url(../img/banner.de.jpg);
+}
+
+h1.en a {
+ /* English banner */
+ background-image: url(../img/banner.en.jpg);
+}
+
+h1.int a {
+ /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
+ background-image: url(../img/banner/int.jpg);
+}
+
+h1.none a {
+ /* Banner with no subtitle in any language */
+ /* Banner mit überhaupt keinem Subtitel */
+ background-image: url(../img/banner/logo.jpg);
+}
+
+h1 a span {
+ display: none;
+}
+
+h1 span.d {
+ background-color: #0C377A;
+ display: block;
+ width: 50%;
+ height: 67px;
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 10;
+}
+
+h2 {
+ font: bold 140% Verdana,Arial,Helvetica,sans-serif;
+ margin: 10px 0 10px 0;
+ padding: 0;
+}
+
+div#lang {
+ /*
Hinweis: Diese Seite dient zur Übersicht über die vorhandenen Banner. Diese urheberrechtlich geschützten Grafiken dürfen ohne Zustimmung des Eigentümers des Webangebots nicht außerhalb der Homepage verwendet werden.
+
+ Umgestaltung des Photoverzeichnisses mit Version 5.5
+
+ * Bilder werden nach Kategorien in Ordner eingeteilt (z.B. Start, Rechnertechnik,
+ Kommunikationstechnik)
+
+ * Für Hersteller/Bildergalerien/etc., die viele Bilder umfassen, sollten
+ Unterordner geschaffen werden (z.B. UNIVAC, DEC, ...)
+
+ * einheitliches Format von Dateinamen:
+ (hersteller)_nameNummer.jpg oder ...-nameNummer.jpg
+ maximale Informationen und trotzdem kürzester Name
+
+ z.B. dec_pdp8.jpg telefunken_rat800.jpg eai180.jpg
+ wang2200.jpg hellfax_bs110.jpg loewe_ferrofon.jpg
+ aber auch funktionsschema.gif galvanometer.jpg
+ anita-anzeige.jpg
+
+ * einheitliches Format von Dateinamen zur Speicherung von Vorschaubildern
+ (Thumbnails):
+ (dateiname).thumb.jpg oder (dateiname).klein.jpg
+
+ * einheitlichs Format von Dateinamen zur Archivierung:
+ (dateiname).old.jpg (dateiname).old[X].jpg
+ wenn nötig auch: old.(dateiname).jpg
+
+
+ * prinzipiell natürlich:
+ * nur Kleinschreibung
+ * keine Leerzeichen, keine Sonderzeichen
+
+ * vor allem gilt auch:
+ * Niemals alte Versionen wegschmeißen, falls sie nicht trivial sind!
+
+
+
+ 13.04.2006/17:30 für Version 5.5
+
Die Kapazität der Kernspeicher wurde immer größer bei drastisch abnehmenden Volumen. Das Bild zeigt eine Ebene eines Speichers (Bj. ca. 1975-1978). Die Fläche entspricht der des 144-Bit-Speichers auf der vorhergehenden Seite. Die Kerne sind mit bloßem Auge nicht mehr zu erkennen. In dieser Ebene befinden sich über 16000 Kerne. Nur in einer Vergrößerung sind sie sichtbar. Der Speicherblock beinhaltet 16 Ebenen mit insgesamt ca. 256000 Kernen, er kann also 32 kB (Wortlänge 8 Bit) speichern. Dazu wurde ein Volumen von ca. 2,5 dm³ benötigt, das entspricht 2,5 Milchtüten! Damit sind die Grenzen und auch das Ende dieser Speicherära aufgezeigt.
+ Die Zugriffszeit sinkt mit der Verkleinerung des Ringkernes. Hier beträgt sie ca. 0,2 µs. Wird die Information eines Kerns (links- oder rechtsdrehender Magnetismus steht für "0" bzw. "1") ausgelesen, so wird er dadurch entmagnetisiert. Damit der Inhalt dieses Bits nicht verloren geht muß er sofort wieder magnetisiert werden. Diese gesamte Zykluszeit liegt bei ca. 0,5 µs. (Zum Vergleich: Bei einem 2 kB Laufzeitspeicher beträgt sie ca. 1 ms, also 2000 mal mehr! Bei einem Halbleiterspeicher von 1975 lag sie jedoch bereits unter 100 ns, war also 5 mal kleiner).
+
+
Kernspeicher haben einen entscheidenden Vorteil: Sie behalten ihr Gedächtnis. Man kann einen z.B. 1975 abgeschalteten Rechner heute wieder mit den Programmen starten, die zuletzt dort "abgelegt" wurden. Ein Booten ist nicht notwendig.
+ Noch lange nach der Zeit des Kernspeichers bezeichnete man den Arbeitsspeicher eines Rechners mit "Core" (Kern), obwohl längst Halbleiterchips verwendet wurden.
Dies ist ein Ausschnitt der Ziffernanzeige. Die gasgefüllten Nixieröhren (Prinzip einer Glimmlampe) kamen gerade rechtzeitig als Anzeigemedium auf den Markt.
+
+
+
+
Die obere Platine beinhaltet einen Ringzähler. Die gasgefüllten Glimmrelaisröhren (Thyratrons) sind sehr klein. Nur so konnte man ca. 190 Stück in einem relativ überschaubaren Gehäuse unterbringen. Diese Relaisröhren haben wie ein mechanisches Relais nur zwei Zustände. Im "durchgeschalteten" Zustand leuchten sie gut sichtbar rötlich. Das Innere des Rechners bietet damit ein Bild vieler leuchtender Röhren. Man kann das Rechnen beobachten.
+Zusätzlich befinden sich noch 11 Vakuumröhren (ECC 82, links im Bild) im Rechner.
+ Unten ist eine komplette Zähldekade mit einer Nixie-Anzeigeröhre abgebildet.
+
DIEHL Combitron. Dies ist der erste funktionsfähige programmierbare Tischrechner, der in Deutschland gebaut und vertrieben wurde. Rechts vorne steht der DIEHL Dilector (Lochstreifenleser) und rechts der DIEHL ELS 830 (Lochstreifenstanzer). Das System ist voll funktionsfähig. Als Speichermedium dient auch ein Laufzeitspeicher (Kapazität ca. 1000 Bit)
Auf ein waagrecht rotierendes Schreibband aus Kunststoff wird eine Zeile des Bildes mit Tinte geschrieben. Während es an der Papierrolle vorbeiläuft, die sich kontinuierlich bewegt, wird das Schreibband (sehr lautstark!) gegen diese gedrückt. So entsteht eine Zeile. Die auf dem Band verbliebene Tinte wird von einer entgegenlaufenden Löschpapierrolle abgenommen (Reinigung), dann die nächste Zeile placiert usw.
+ Typisch für diese technische Zeitepoche ist die absolute Transparenz der Funktion. Man kann sie sehen, hören, riechen und alle wesentliche Elemente anfassen.
Durch Magnetostriktion (kurzes Zusammenziehen eines Drahtes, wenn ihn ein starkes Magnetfeld umgibt) werden quasi Schallimpulse auf einen (zusammengerollten) Draht gegeben. Diese Information läuft mit der Schallgeschwindigkeit (des Materials) bis zum Ende und wird dort wieder in Stromimpulse umgewandelt. Jetzt wäre die Information verloren, wenn man sie nicht aufbereiten und wieder am Anfang des Drahtes eingeben würde.
+
Die Daten laufen damit permanent "im Kreis" und können, wenn sie den Draht verlassen, gelesen und verändert werden. Je länger der Draht ist, desto größer ist die Speicherkapazität.
+
Es handelt sich um einen flüchtigen Speicher mit relativ langer Zugriffszeit. Wird der Rechner abgeschaltet, sind alle Daten weg.
MINIVAC 6010
+ Offensichtlich in Anlehnung des den den 50iger Jahren gebauten Großrechners "UNIVAC" (Universal Automatic Computer) wurde dieser Spielzeutcomputer "Minivac" genannt.
+ Hersteller: Scientific Development Corporation, Massachusetts USA.
+ Dieses Gerät wurde 1962 in Zürich verkauft. Original Kabel (Programme werden gesteckt) sowie die Originalverpackung sind vorhanden, leider fehlt die Bedienungsanleitung. Für die damalige Zeit war ein solches Spielzeug abenteuerlich fortschrittlich und in Deutschland extrem selten.
Der erste Rechner mit integrierten Schaltungen von DEC war nicht gerade billig. Alleine die CPU (im Bild links, Mitte) ohne Peripherie kostete damals 27000 $. Bei dem Umrechnungskurs der 60iger Jahre entspricht das ca. 55000 Euro. Der Arbeitsspeicher hatte eine Kapazität von 8 kB. Während der Bearbeitung eines "größeren" Problems müssen eventuell fortwährend Files (Programme, Daten) auf ein Tape (Magnetband) ausgelagert und später wieder eingelesen werden. Um mit sowenig Arbeitsspeicher dennoch erstaunlich effektiv arbeiten zu können, wurde schon in diesen frühen Jahren ein ausgesprochen intelligentes Betriebssystem (OS/8) entwickelt! Es ist sehr interessant, dem Rechner bei seiner Arbeit zuzuschauen.
+
Für alle, die einen solchen Computer noch nie gesehen haben, sei angemerkt, dass dieser mit Plotter über 2m hoch ist und ein Gewicht von ca. 300 kg hat.
+
Die Peripherie besteht aus 2 x TU 55 (Bandlaufwerke), PC 04 (High speed Lochstreifenleser), Calcomp 563 Plotter (oben) und natürlich einer Teletype (hier nicht abgebildet).
Einiges zur Technik: 100fache Empfindlichkeit eines Einkreisers, 9 Kreise, Alloptik-Skala mit Lichtprojektion, Empfindlichkeits- , Feldstärke- und Bandbreitenanzeige. Ein solcher technischer Luxus war bisher unbekannt. Daher bezeichnete man das Gerät auch als "Übersuper". Im Bild rechts unten sind zwei Röhren AD 1 (Gegentaktendstufe), oben zwei Gleichrichterröhren RGN 1064 zu sehen. Die restlichen Röhren sind aus der A-Serie.
+ Die Leistungsaufnahme war mit 145 Watt beachtlich, genau wie der Verkaufspreis: Ein Ultramar kostete stolze 640 RM (Reichsmark).
Die Faszination dieser damals völlig neuen Technik geht aus folgendem Textauszug der Rückseite des Prospektes hervor:
+
+
+
WANDERER conti als erste der Welt - druckend - elektronisch - portabel - setzt neue Maßstäbe für Tischrechenmaschinen durch SCHNELLIGKEIT - EINFACHHEIT - SICHERHEIT - GERÄUSCHLOSIGKEIT DER ELEKTRONIK
+
Elektronischer Rechenkörper mit modernen Silizium-Transistoren
+3 freie elektronische Magnetkernspeicher
+Elektronische Schnelligkeit in Sekundenbruchteilen, völlig geräuschlos ....
+Vollendete, sichere Komma-Automatik
+Konstantenabruf
+Große Kapazität (14-stellig in Ein- und Ausgabe, jedoch 28-stellig im Elektronenrechner)
+Verblüffend einfach selbst bei schwierigsten Aufgabenstellungen
+Kompakte und handliche Form (50 x 40 x 20 cm), leicht an jeden Arbeitsplatz zu tragen...
Wang 2200
+ Abbildung des Orginal-Prospektes. Zu sehen ist nur das Terminal mit der BASIC-Tastatur. Die CPU befindet sich in einem separaten Koffer. Das Netzteil ist in einem eigenen Gehäuse untergebracht.
In diesem Verzeichnis befinden sich, auf Unterverzeichnisse verteilt, sämtliche inhaltliche
+Bilder der technikum29.de-Webpräsenz. Im Wesentlichen sind das JPG-komprimierte Photographien.
+ Umgestaltung des Photoverzeichnisses mit Version 5.5
+
+ * Bilder werden nach Kategorien in Ordner eingeteilt (z.B. Start, Rechnertechnik,
+ Kommunikationstechnik)
+
+ * Für Hersteller/Bildergalerien/etc., die viele Bilder umfassen, sollten
+ Unterordner geschaffen werden (z.B. UNIVAC, DEC, ...)
+
+ * einheitliches Format von Dateinamen:
+ (hersteller)_nameNummer.jpg oder ...-nameNummer.jpg
+ maximale Informationen und trotzdem kürzester Name
+
+ z.B. dec_pdp8.jpg telefunken_rat800.jpg eai180.jpg
+ wang2200.jpg hellfax_bs110.jpg loewe_ferrofon.jpg
+ aber auch funktionsschema.gif galvanometer.jpg
+ anita-anzeige.jpg
+
+ * einheitliches Format von Dateinamen zur Speicherung von Vorschaubildern
+ (Thumbnails):
+ (dateiname).thumb.jpg oder (dateiname).klein.jpg
+
+ * einheitlichs Format von Dateinamen zur Archivierung:
+ (dateiname).old.jpg (dateiname).old[X].jpg
+ wenn nötig auch: old.(dateiname).jpg
+
+
+ * prinzipiell natürlich:
+ * nur Kleinschreibung
+ * keine Leerzeichen, keine Sonderzeichen
+
+ * vor allem gilt auch:
+ * Niemals alte Versionen wegschmeißen, falls sie nicht trivial sind!
+
+
+ 13.04.2006/17:30 für Version 5.5
+
In diesem Verzeichnis befinden sich selbsterstellte Grafiken, die Themen der Kategorie
+Rechnertechnik betreffen.
+
+
Zur Erstellung
+
Diese Grafiken wurden als Vektorgrafiken (SVG) mit dem Open Source-Programm Inkscape erzeugt und anschließend gerendert und als stark komprimierte GIF-Dateien veröffentlicht. Die Quelldateien sind auf Anfrage erhältlich.