/***************************************************************\ | _ _ _ | | /\ \ /\ \ / /\ technikum29.de | | \_\ \ / \ \ / / \ Common Styles | | /\__ \ / /\ \ \ / / /\ \ Version 5.7 ff | | / /_ \ \\/_/\ \ \/_/ /\ \ \ | | / / /\ \ \ / / /\ \ \_\ \ \ Alle "Spezialstyles" | | / / / \/_/ / / / \ \/__\ \ \ die in Inhaltsseiten | | / / / / / / _ \_____\ \ \ verwendet werden, | | / / / / / /_/\_\ \ \ \ koennen hier notiert | |/_/ / / /_____/ / \ \ \ werden. Ausserdem ist | |\_\/ \________/ \_\/ das ehemalige print.css | | hier eingearbeitet. | | | \***************************************************************/ /* Changelog seit v5.7: ** v5.7FINAL: eingeführt ** v5.7.11: Univac-Spezialstyle neu ** v5.7.14: .desc-right zurück ins Leben gerufen ** v5.7.15: .bordered zum allgemeineren Rahmenelement ** */ /* Spezialstyle der neuen Startseite: */ .startseiten-design div { padding: 2em; margin: 2em 0; /*border: 1px solid blue;*/ background-color: #F5F5F5; /*#fafafa;*/ border: 1px solid #aaa; background-image: url(../img/fresh.design/sidebar-stripe.gif); } .startseiten-design div h2 { font-size: 126%; color: #224B88; /* gleiche Farbe wie Navilinks rechts */ } .startseiten-design div ul { text-align: justify; margin: 0; padding-left: 1em; } .startseiten-design div.foto, #startseitenfoto-en { /* #startseitenfoto-en für /en, da gibts kein .startseiten-design */ border: none; padding: 0; margin-left: auto; margin-right: auto; background: none; width: 338px; height: 228px; /* Bildgrößen */ position: relative; } .startseiten-design .foto p, #startseitenfoto-en p { position: absolute; bottom: 0; right: 0; margin: 0 3px 2px 0; text-align: right; color: #fff; font-size: 90%; font-weight: bold; } #startseitenfoto-en { float: right; margin: 0 0 1em 2em; } /* Ursprüngliches völlig freies Spezialstyle der neuen Startseite, letzendlich doch nicht mehr genutzt weil nicht völlig unabhängig von der Schriftgröße. */ /* @media screen,projection { \* nicht drucken *\ .startseite-freely { position: relative; height: 71em; \*border: 1px solid red;*\ } .startseite-freely .besonderes { top: 0; right: 35.3%; \* Damit Position von rechts fix ist, entspricht left: -1"em" *\ width: 60%; max-width: 27em; \* Damit Zusammenhang mit .wo gegeben ist auf großem Monitor *\ } .startseite-freely .wann { right: -1%; top: 6em; width: 30%; } .startseite-freely .wo { right: -1%; top: 28.7em; width: 77%; height: 228px; \* Um bild zu fassen *\ } .startseite-freely .wo h2, .startseite-freely .wo ul { margin-right: 338px; \* Bild *\ padding-right: 1em; } .startseite-freely .wo .foto { \* wird realtiv zu Vater .wo positioniert *\ right: 0; top: 0; background: none; border: none; z-index: 10; } .startseite-freely .wo .foto p { position: absolute; bottom: 2em; \* kompensiert genau den .foto-padding *\ left: 2em; \* und kommt (fast) direkt ins Foto *\ margin: 0 0 6px 0; \* ums nicht an die Bildkante zu packen *\ width: 329px; \* fast die bildbreite... *\ text-align: right; \* ...ergo nicht an den rechten Rand gepatscht *\ color: #fff; font-size: 90%; font-weight: bold; } .startseite-freely .wen { top: 41em; left: -4.5%; width: 53%; } .startseite-freely .erwartung { top: 46em; right: -21.15%; width: 57%; z-index: 1; \* um über .homepage zu stehen *\ } .startseite-freely .homepage { top: 59em; right: -28.2%; width: 57%; } *\ } \* media -> printausschluss *\ */ /* ehemaliger Spezialstyle auf der Startseite, jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */ div.desc-right { /* rechts gefloatetes thumbnail mit Beschreibungstext */ float: right; margin: 0pt 0pt 2em 2em; /* width: 236px; */ /* border: 1px solid #7090C0; background-color: #EBEBEB; */ border: 1px solid #094099; padding: 1em; } div.desc-right img { } div.desc-right p { /* Damit der Text nicht über die ganze Fensterbreite geht,
nötig. */ margin: 1em 0 0 0; padding: 0; font-size: 90%; text-align: left; } /* Spezialstyle auf der Startseite: */ /* "Neuzugaenge" */ div.aktuell { /* "Aktuelle Bilder"-Bereich */ border: 1px solid #7090C0; /*margin-top: 2em;*/ padding: 1.5em; clear: both; /** fuer rechts floatende Aktuell-Box: */ /* float: right; width: 300px; margin: 10px 0 20px 20px;*/ } /* gegen kaputte Rahmen bei IEs, danke an Jeena */ * html div.aktuell { position: relative; } /* geht doch nicht --> er sieht es ploetzlich relativ zu der "Ausgansbrowsergroesse" */ div.aktuell h2 { margin: 1px; padding: 0; color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */ font-size: 126%; } div.aktuell .stand { font-size: 80%; text-align: center; margin-top: 1px; } div.aktuell p { margin: 20px 4px; /* clear: both;*/ } /* Ende aller Spezialstyles der Startseite */ /* Spezialstyle bei IC-Technik: */ /* Ueberschrift => Liste gleicher margin-left */ p.h-ul { text-align: left; } ul.h-ul { margin: 0; padding: 1em; } /* wird nicht mehr gebraucht! Löschen. */ /* Links floatende Bildergalerie, einfache Listenstruktur gebraucht auf univac9400-Seite ** seit 5.5.2 wegen Designkorrektur spezialisierung auf ** ** univac-Seite ** */ ul.univac-thumbs, ul.univac-thumbs li { list-style: none; margin: 0; padding: 0; } ul.univac-thumbs li { float: left; margin: 10px 50px 20px 0; clear: left; } ul.univac-thumbs li img { width: 238px; /* um unschönen textreinfließeffekt zu umgehen */ } /* Univac-Seite seit 5.7.11: Menü unter Panoramabild Quick&Dirty-Lösung, angelehnt an Navigationsleistenhintergrundrealisierungen */ .univac #wrapper #menu { margin-top: 520px; /* circa... */ } /* Nur verwendet bei Faxtechnik und auf der Startseite: */ /* Mehrspaltiger Inhalt:
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) **** 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 */Viel Text...
** [div|p]> **(Damit das Bild nicht weitergeht) **