source: t29-www/shared/css/common.css @ 233

Last change on this file since 233 was 233, checked in by sven, 13 years ago

Noch mal Detailverbesserungen zum fruehe-computer.shtm-Design.

  • fruehe-computer.shtm: jetzt auch auf deutsch, early-computers.shtm: Details
  • common.css: .desc-*.borderless sowie seitenspezifische Anpassungen
  • tools.js: auch desc-left auf auto-bildbreite setzen

-- sven @ workstation7

  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 30.7 KB
Line 
1/**********************************************************************\
2|       _         _         _                                          |
3|      /\ \     /\ \      / /\          technikum29.de  Common Styles  |
4|      \_\ \   /  \ \    / /  \         Version 5.8                    |
5|      /\__ \ / /\ \ \  / / /\ \                                       |
6|     / /_ \ \\/_/\ \ \/_/ /\ \ \       Diese CSS-Datei implementiert  |
7|    / / /\ \ \   / / /\ \ \_\ \ \      das Konzept, alle "Spezial-    |
8|   / / /  \/_/  / / /  \ \/__\ \ \     styles" von alen Seiten an     |
9|  / / /        / / /  _ \_____\ \ \    einer Stelle zu sammeln. Das   |
10| / / /        / / /_/\_\       \ \ \   erhöht die Ladezeit der Seiten |
11|/_/ /        / /_____/ /        \ \ \  nur minimal, vermindert den    |
12|\_\/         \________/          \_\/  Wartungsaufwand aber enorm.    |
13|                                       Dieses Konzept wurde seit      |
14| Version 5.7 erfolgreich angewandt. Mittlerweile sind alle anderen    |
15| Zusatz-Stylesheets hier migriert, und zwar extra.css, details.css    |
16| sowie print.css.                                                     |
17|                                                                      |
18| $Id:: common.css 233 2011-01-29 21:45:30Z sven                     $ |
19|                                                                      |
20+----------------------------------------------------------------------+
21|                                                                      |
22| Changelog seit v5.7:                                                 |
23|                                                                      |
24|   v5.7FINAL: eingeführt                                              |
25|   v5.7.11:   Univac-Spezialstyle neu                                 |
26|   v5.7.14:   .desc-right zurück ins Leben gerufen                    |
27|   v5.7.15:   .bordered zum allgemeineren Rahmenelement               |
28|   v5.8.0:    Erheblich aufgeräumt, details.css migriert, umgestellt. |
29|              Zu jedem Spezialstyle gibt es jetzt einen Pflicht-      |
30|              kasten, der ausgefüllt werden soll, der Übersicht       |
31|              halber.                                                 |
32|                                                                      |
33\**********************************************************************/
34
35
36/**********************************************************************\
37| SPEZIAL STYLE                                                        |
38+----------------------------------------------------------------------+
39| Für:                 Neue Startseiten, (de|en)/index.shtml           |
40| In Benutzung seit:   v5.7 (Redesign)                                 |
41| Besonderheiten:      Zweispaltiges Design mit Boxen                  |
42| Zuletzt geändert:    v5.7                                            |
43|                                                                      |
44\**********************************************************************/
45
46
47/* Spezialstyle der neuen Startseite: */
48.startseiten-design div {
49    padding: 2em;
50    margin: 2em 0;
51    /*border: 1px solid blue;*/
52    background-color: #F5F5F5; /*#fafafa;*/
53    border: 1px solid #aaa;
54    background-image: url(../img/fresh.design/sidebar-stripe.gif);
55}
56
57#content .startseiten-design div h2, /* id zur Bedeutungssteigerung */
58.startseiten-design div h2 {
59    font-weight: bold;
60    font-size: 113%;
61    font-family: inherit; /* 04.01.10: Neue Header-Styles */
62    border: none;         /*           neutralisieren     */
63    color: #224B88; /* gleiche Farbe wie Navilinks rechts */
64}
65
66.startseiten-design div ul {
67    text-align: justify;
68    margin: 0;
69    padding-left: 1em;
70}
71
72.startseiten-design div.foto,
73#startseitenfoto-en {
74    /* #startseitenfoto-en für /en, da gibts kein .startseiten-design */
75    border: none;
76    padding: 0;
77    margin-left: auto;
78    margin-right: auto;
79    background: none;
80    width: 338px; height: 228px; /* Bildgrößen */
81    position: relative;
82}
83
84.startseiten-design .foto p {
85    position: absolute;
86    bottom: 0; right: 0;
87    margin: 0 3px 2px 0; 
88    text-align: right;
89    color: #fff;
90    font-size: 90%;
91    font-weight: bold;
92}
93
94/* Spezialstyle auf der Startseite: */
95/* "Neuzugaenge" (wurde aufgeloest zugunsten eigener Seite)  */
96/* (d.h. die folgenden Styles werden nicht mehr gebraucht!) */
97div.aktuell {
98    /* "Aktuelle Bilder"-Bereich */
99    border: 1px solid #7090C0;
100    /*margin-top: 2em;*/
101    padding: 1.5em;
102    clear: both;
103    /**  fuer rechts floatende Aktuell-Box: */
104    /* float: right; width: 300px; margin: 10px 0 20px 20px;*/
105}
106
107/* gegen kaputte Rahmen bei IEs, danke an Jeena */
108* html div.aktuell { position: relative;  }
109/* geht doch nicht --> er sieht es ploetzlich relativ zu der "Ausgansbrowsergroesse"  */
110
111div.aktuell h2 {
112    margin: 1px;
113    padding: 0;
114    color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */
115    font-size: 126%;
116}
117
118div.aktuell .stand {
119    font-size: 80%;
120    text-align: center;
121    margin-top: 1px;
122}
123
124div.aktuell p {
125    margin: 20px 4px;
126/*  clear: both;*/
127}
128
129
130/* Ursprüngliches völlig freies Spezialstyle der neuen Startseite,
131   letzendlich doch nicht mehr genutzt
132   weil nicht völlig unabhängig von der Schriftgröße.
133*/
134/*
135@media screen,projection { \* nicht drucken *\
136
137.startseite-freely {
138    position: relative;
139    height: 71em;
140    \*border: 1px solid red;*\
141}
142
143
144.startseite-freely .besonderes {
145    top: 0;
146    right: 35.3%; \* Damit Position von rechts fix ist, entspricht left: -1"em" *\
147    width: 60%;
148    max-width: 27em; \* Damit Zusammenhang mit .wo gegeben ist auf großem Monitor *\
149}
150
151.startseite-freely .wann {
152    right: -1%;
153    top: 6em;
154    width: 30%;
155}
156
157.startseite-freely .wo {
158    right: -1%;
159    top: 28.7em;
160    width: 77%;
161    height: 228px; \* Um bild zu fassen *\
162}
163
164.startseite-freely .wo h2, .startseite-freely .wo ul {
165    margin-right: 338px; \* Bild *\
166    padding-right: 1em;
167}
168
169.startseite-freely .wo .foto {
170    \* wird realtiv zu Vater .wo positioniert *\
171    right: 0;
172    top: 0;
173    background: none;
174    border: none;
175    z-index: 10;
176}
177
178.startseite-freely .wo .foto p {
179    position: absolute;
180    bottom: 2em;  \* kompensiert genau den .foto-padding *\
181    left: 2em;    \* und kommt (fast) direkt ins Foto *\
182    margin: 0 0 6px 0; \* ums nicht an die Bildkante zu packen *\
183    width: 329px; \* fast die bildbreite... *\
184    text-align: right; \* ...ergo nicht an den rechten Rand gepatscht *\
185    color: #fff;
186    font-size: 90%;
187    font-weight: bold;
188}
189
190.startseite-freely .wen {
191    top: 41em;
192    left: -4.5%;
193    width: 53%;
194}
195
196.startseite-freely .erwartung {
197    top: 46em;
198    right: -21.15%;
199    width: 57%;
200    z-index: 1; \* um über .homepage zu stehen *\
201}
202
203.startseite-freely .homepage {
204    top: 59em;
205    right: -28.2%;
206    width: 57%;
207}
208*\
209
210} \* media -> printausschluss *\
211*/
212
213/* Ende aller Spezialstyles der Startseite */
214
215
216/**********************************************************************\
217| SPEZIAL STYLE                                                        |
218+----------------------------------------------------------------------+
219| Für:                 IC-Technik, /de/rechnertechnik/ic-technik.shtm  |
220| In Benutzung seit:   v5.7 oder so (quick and dirty)                  |
221| Besonderheiten:      Floatendes Bild links und <ul> daneben, das     |
222|                      macht haessliche Effekte. Diese Quick & Dirt-   |
223|                      Lösung sollte eigentlich gar nicht mehr in      |
224|                      Benutzung sein, ist es aber trotzdem irgendwie  |
225|                      noch.                                           |
226| Zuletzt geändert:    v5.7 oder so.                                   |
227|                                                                      |
228\**********************************************************************/
229
230p.h-ul  { text-align: left; }
231ul.h-ul { margin: 0; margin-left: 380px; }
232
233
234/**********************************************************************\
235| SPEZIAL STYLE                                                        |
236+----------------------------------------------------------------------+
237| Für:                 UNIVAC 9400-Gebiet:                             |
238|                         /de/rechnertechnik/univac9400.shtm           |
239|                         /de/geraete/univac9400/                      |
240| In Benutzung seit:   v5.5.2 wegen Designkorrektur, Spezialisierung   |
241|                      auf der Univac-Seite                            |
242|                      Teile später in v5.7 und v5.8 hinzugekommen     |
243| Besonderheiten:      Auf der Univac-Hauptseite:                      |
244|                      Links floatende Bildergalerie, einfache Listen- |
245|                      struktur gebraucht, zudem einmalig.             |
246|                      Außerdem: Panoramabildmenüverschiebung.         |
247| Zuletzt geändert:    v5.7.11                                         |
248|                                                                      |
249\**********************************************************************/
250
251ul.univac-thumbs, ul.univac-thumbs li {
252   list-style: none;
253   margin: 0; padding: 0;
254   float: left; /* beseitigt Bug mit class="box left/right" im Text. */
255}
256
257ul.univac-thumbs li {
258   float: left;
259   margin: 10px 50px 20px 0;
260   clear: left;
261}
262
263ul.univac-thumbs li img {
264   width: 238px; /* um unschönen textreinfließeffekt zu umgehen */
265}
266
267/* Univac-Seite seit 5.7.11: Menü unter Panoramabild
268   Quick&Dirty-Lösung, angelehnt an Navigationsleistenhintergrundrealisierungen */
269.univac #wrapper #menu {
270    margin-top: 520px; /* circa... */
271}
272
273/* Seit 08.08.2010: Per Javascript-Anpassung */
274body.greater1280 .univac #wrapper #menu { margin-top: 0; }
275
276/* Univac-Kosten-Seite seit v5.8.0: Ein absolut positioniertes Bild
277   (Illustration, soll an Seitennavigation klatschen) am Ende der
278   #content-Box, daher dieser künstliche Rand: */
279.univac-kosten #content {
280    min-height: inherit;
281    margin-bottom: 5px;
282    padding-bottom: 348px;
283}
284
285/* Rand links, damit Liste im Univac-Artikel ordentlich aussieht (Jan 2010) */
286.univac li {
287        margin-left: 270px;
288}
289
290
291/**********************************************************************\
292| SPEZIAL STYLE                                                        |
293+----------------------------------------------------------------------+
294| Für:                 Fax- und Schreibtechnik, Startseite,            |
295|                      DEC-Geschichte                                  |
296|                         /de/kommunikationstechnik/faxtechnik.shtm    |
297|                         /de/index.shtml                              |
298|                         /de/geraete/dec-geschichte.shtm              |
299|                         /en/devices/dec-history.shtm                 |
300| In Benutzung seit:   Prinzipiell seit Ewigkeiten (v5.0?)             |
301|                      Startseite nutzt Stil mit seit v5.7             |
302| Besonderheiten:      Mehrspaltiger Inhalt (Originalzitat), nach      |
303|                      dem simplen Schema:                             |
304|                                                                      |
305|   <div class="cols">                                                 |
306|       <div class="leftcol">linke spalte</div>                        |
307|       <div class="rightcol">rechte spalte</div>                      |
308|   </div>                                                             |
309|                                                                      |
310| Zuletzt geändert:    zur v5.7 vielleicht                             |
311|                                                                      |
312\**********************************************************************/
313
314#content .cols {
315    /* Mehrspaltiger Inhalt. */
316}
317
318#content .cols .leftcol, #content .cols .rightcol {
319    padding: 5px 7px;
320/*  border: 3px dashed red;*/
321}
322
323#content .cols .leftcol {
324    float: left; width: 47%;
325}
326
327#content .cols .rightcol {
328    float: right; width: 47%;
329}
330
331#content blockquote, .content blockquote {
332    /* bis jetzt nur genutzt in <faxtechnik> */
333    /* Und <blockquote> auf einer WANG-Extraseite, Bedienungsanleitung */
334    margin: 5px 0px;
335    padding: 0px;
336    color: #2F319D;
337    text-align: justify;
338}
339
340/**********************************************************************\
341| SPEZIAL STYLE                                                        |
342+----------------------------------------------------------------------+
343| Für:                 DEC-Geschichte                                  |
344|                         /de/geraete/dec-geschichte.shtm              |
345|                         /en/devices/dec-history.shtm                 |
346| In Benutzung seit:   Wohl schon recht lange.     (v5.0?)             |
347| Besonderheiten:      Definitionslisten ohne Einschub und mit dick-   |
348|                      gedrucktem <dt>.                                |
349|                                                                      |
350| Zuletzt geändert:    zur v5.7 vielleicht                             |
351|                                                                      |
352\**********************************************************************/
353
354#content dt {
355    margin-top: 1.2em;
356    font-weight: bold;
357    display: block;
358}
359
360#content dd {
361    text-align: justify;
362    margin: 0; padding: 0;
363}
364
365/**********************************************************************\
366| SPEZIAL STYLE                                                        |
367+----------------------------------------------------------------------+
368| Für:                 Telefunken T40W-Extraseite, die Javascript-     |
369|                      Einblendeffekt bietet - Absolute Positionierung |
370|                      von Bildern uebereinander mit dynamischer       |
371|                      opacity.                                        |
372|                         /de/geraete/telefunken_t40w.shtm             |
373|                         /en/devices/telefunken_t40w.shtm             |
374| In Benutzung seit:   Maerz 2009                                      |
375| Besonderheiten:      Absolut spezifisch fuer die aktuellen           |
376|                      Gegebenheiten.                                  |
377|                                                                      |
378\**********************************************************************/
379
380.telefunkent40w #rel,
381.telefunkent40w #zu,
382.telefunkent40w #offen {
383    position: absolute;
384    width: 930px;
385    height: 569px;
386    top: 0; left: 0;
387}
388
389.telefunkent40w #beschriftung {
390    position: absolute;
391    top: -53px;
392    left: -36px;
393}
394
395.telefunkent40w #zu           { z-index: 3 }
396.telefunkent40w #beschriftung { z-index: 2; }
397.telefunkent40w #offen        { z-index: 1; }
398.telefunkent40w #rel          {
399     position: relative;
400     margin-bottom: 80px;
401     margin-top: 60px;
402}
403
404
405/**********************************************************************\
406| SPEZIAL STYLE                                                        |
407+----------------------------------------------------------------------+
408| Für:                 "Was gibt es neues?"-Seite, komisches Listen-   |
409|                      Aussehen.                                       |
410|                         /de/news.shtm                                |
411|                         /en/news.shtm                                |
412| In Benutzung seit:   Juli 2009                                       |
413| Besonderheiten:      Nicht sonderlich originell, nur eben etwas      |
414|                      spezifisch.                                     |
415|                                                                      |
416\**********************************************************************/
417
418ul.news-feed li {
419    margin-bottom: 1.2em;
420}
421
422#content ul.news-feed h3 { /* Id zur Bedeutungssteigerung */
423   margin: 0; padding: 0; border: none;
424   font-family: inherit;
425   font-weight: normal;
426   font-size: 100%;
427   font-style: italic;
428}
429
430/**********************************************************************\
431| CENTRAL COMMON STYLES: TABLE LAYOUT FROM details.css                 |
432+----------------------------------------------------------------------+
433| Hier ist das Tabellenlayout der ehemaligen details.css. Es wird      |
434| (basismäßig) mittlerweile auch auf anderen Seiten genutzt, unter     |
435| anderem die Univac9400-Kosten-Seite (seit v5.8).                     |
436|                                                                      |
437| Begrenzt auf #content, damit andere Seiten in dev.t29.de oder        |
438| ähnlichem verschont bleiben.                                         |
439|                                                                      |
440| Das CSS ist uralt (stammt wohl noch von v5.0 und vorher) und wurde   |
441| seit dem nie verändert (wie die Details-Seiten ;-) )                 |
442|                                                                      |
443\**********************************************************************/
444
445
446#content td, #content table, #content tr {
447    font: 12px Verdana;
448}
449
450#content table p {
451    text-align: justify;
452    line-height: 120%;
453}
454
455#content table p.center {
456    margin: 5px 0px;
457    text-align: center;
458}
459
460#content td b {
461    display: block;
462}
463
464#content td.b, #content td.b a {
465    font-weight: bold;
466}
467
468#content table {
469    background-color: #7090C0;
470}
471
472#content td {
473    padding: 2px;
474    vertical-align: middle;
475    text-align: center;
476    background-color: #F7FDFF;
477}
478
479#content th {
480    padding: 2px;
481    text-align: center;
482    background-color: #BED0E5;
483}
484
485#content .bemerkungen {
486    vertical-align: middle;
487    text-align: justify;
488}
489
490
491/**********************************************************************\
492| SPEZIAL STYLE                                                        |
493+----------------------------------------------------------------------+
494| Für:                 Lernprojekte-Uebersichtsseite                   |
495|                         /de/lernprojekte/index.shtml                 |
496| In Benutzung seit:   04.10.2009 (Einbindung der Seite in die         |
497|                      Homepage)
498| Besonderheiten:      Spezialisierung des allgemeinen Tabellen-       |
499|                      designs mit sehr grosser Schrift.               |
500|                                                                      |
501\**********************************************************************/
502
503
504.lernprojekte #content table {
505        width: 100%;
506        border-collapse: collapse;
507        margin-top: 1.5em;
508}
509
510.lernprojekte #content td,
511.lernprojekte #content th {
512        font-size: 130%;
513        border: 1px solid #888;
514        line-height: 150%;
515        padding: 11px;
516        text-align: left !important;
517}
518
519.lernprojekte #content th { width: 20%; }
520.lernprojekte #content td { color: #555; }
521
522
523/**********************************************************************\
524| SPEZIAL STYLE                                                        |
525+----------------------------------------------------------------------+
526| Für:                 Efzet-Bildergalerie                             |
527|                         /de/geraete/efzet.shtm                       |
528| In Benutzung seit:   30.07.2010                                      |
529| Besonderheiten:      Erste jQuery-Anwendung in der Homepage          |
530|                                                                      |
531\**********************************************************************/
532
533.efzet #content .gallery {
534        width: 830px;
535        margin: 0px auto;
536}
537
538.efzet #content .thumbnails a {
539        display: block;
540        float: right;
541        margin: 15px; padding: 0;
542        clear: right;
543        outline: none;
544}
545
546.efzet #content .thumbnails img {
547        width: 120px;
548        display: block; /* um keinen komischen weissen rand drunter zu kriegen */
549}
550
551.efzet #content .thumbnails a:hover {
552        border: 3px solid #7090C0;
553        margin: 12px;
554}
555
556.efzet #content .thumbnails a.active,
557.efzet #content .thumbnails a.active:hover {
558        border: 5px solid #7090C0;
559        margin: 10px;
560}
561
562.efzet #content .full {
563        text-align: center;
564        padding-top: 13px;
565}
566
567/**********************************************************************\
568| SPEZIAL STYLE                                                        |
569+----------------------------------------------------------------------+
570| Für:                 Wissenschaftliche Rechner                       |
571|                         /de/rechnertechnik/fruehe-computer.shtm      |
572| In Benutzung seit:   29.01.2011                                      |
573| Besonderheiten:      Sieht beschissen aus                            |
574|                                                                      |
575\**********************************************************************/
576
577.fruehe-computer #content .small,
578.fruehe-computer #content dl {
579        font-size: 80%;
580        line-height: 130%;
581}
582
583.fruehe-computer #content dt {
584        /* folgende Zeile nicht auskommentieren, wenn die Definitionsterme (dt)
585                nicht dick erscheinen sollen */
586        /* font-weight: normal; */
587}
588
589.fruehe-computer #content dd {
590        margin-left: 2em;
591}
592
593/**********************************************************************\
594| SPEZIAL STYLE                                                        |
595+----------------------------------------------------------------------+
596| Für:                 Impressum                                       |
597| In Benutzung seit:   September 2010                                  |
598| Besonderheiten:      Frueher einfach address{font-style:italic;},    |
599|                      jetzt Formatierung mit vcard                    |
600|                                                                      |
601\**********************************************************************/
602
603.impressum #content .vcard {
604        font-style: italic;
605}
606
607/**********************************************************************\
608| CENTRAL COMMON STYLES: Copyright boxes for pictures                  |
609+----------------------------------------------------------------------+
610| Diese CSS-Anweidungen formatieren dynamisch erzeugten HTML-Code      |
611| durch das neue copyright-boxes-system (licensing.js)                 |
612| Eingefuehrt August 2010.                                             |
613\**********************************************************************/
614
615#img-license-tag  {
616        display: none;
617        position: absolute;
618        /*background-color: rgba(0,0,0, 0.5);*//* Fuer CSS3 ist die Zeit noch nicht reif */
619        background-image: url(/shared/img/fresh.design/bg.copyright-box.png);
620        color: white;
621}
622
623#img-license-tag p {
624        margin: 0;
625        padding: 1em;
626        text-align: center;
627}
628
629#img-license-tag:hover {
630        display: block;
631        background-color: black;
632}
633
634#img-license-tag a:link, #img-license-tag a:visited {
635        color: #eee;
636}
637
638#img-license-tag a:hover, #img-license-tag a:active {
639        color: white;
640}
641
642/**********************************************************************\
643| CENTRAL COMMON STYLES: Heading anchors (Javascript driven)           |
644+----------------------------------------------------------------------+
645| Eingefuehrt August 2010.                                             |
646\**********************************************************************/
647#content h2 a.anchor, #content h3 a.anchor {
648        text-decoration: none;
649        color: #ddd;
650        visibility: hidden;
651}
652
653#content h2:hover a.anchor, #content h3:hover a.anchor {
654        visibility: visible;
655}
656
657/**********************************************************************\
658| CENTRAL COMMON STYLES: BILDBOXEN ("Imageboxen")                      |
659+----------------------------------------------------------------------+
660|
661** Bildboxen ("Imageboxen")
662** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
663** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
664** <div class="[box] [links|rechts|center]"> (box für fakultativen Abstand oben/unten)
665**    <img ... />
666**    <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
667**       <p>Viel Text...</p>
668**    </[div|p]>
669**    <div class="clear">&nbsp;</div> (Damit das Bild nicht weitergeht)
670** </div>
671** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
672** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
673** Bilder werden.
674|
675\**********************************************************************/
676
677#content .box, .content .box {
678    /* .box als allgemeine Klasse fuer abstandswuerdige */
679    /* Objekte (.center/.right/.left zum Beispiel) */
680    margin-top: 3em;
681    margin-bottom: 3em;
682}
683
684#content .left img, .content .left img {
685    /* Links ausgerichtetes Bild mit Abstand drumherum */
686    float: left;
687    margin: 0 2em 2em 0;
688}
689
690#content .right img, .content .right img {
691    /* Rechts ausgerichtetes Bild mit Abstand drumherum */
692    float: right;
693    margin: 0 0 2em 2em;
694}
695
696#content .center img, .content .center img {
697    /* Mittig ausgerichtetes Bild mit Abstand drunter */
698    margin: 0 0 0.3em 0;
699}
700
701#content img.nomargin, .content img.nomargin {
702    /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
703    margin: 0;
704}
705
706#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
707.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
708    /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
709       (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
710       Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
711       .clear dann erzeugt. */
712    margin-bottom: 0;
713}
714
715#content .left .bildtext, .content .left .bildtext,
716#content .right .bildtext, .content .right .bildtext {
717    /* p.bildtext oder div.bildtext: Kein Abstand! */
718    text-align: justify;
719    /* Im Endeffekt ist .bildtext hier unnoetig! */
720}
721
722#content .center .bildtext, .content .center .bildtext {
723    /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
724    text-align: justify;
725    margin-left: 10%;
726    margin-right: 10%;
727}
728
729#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
730    /* Text zentriert unter dem Bild in der Breite des Bildes */
731    text-align: justify;
732    margin-left: auto;
733    margin-right: auto;
734}
735
736/*
737    03. Januar 2010: Erweiterung des Konzeptes um automatische Bildbreiten (fuer .box.center),
738    Breiten der Bilder werden zur Laufzeit durch /shared/js/auto-bildbreite.js ausgelesen.
739*/
740
741#content .auto-bildbreite, #content .manuelle-bildbreite {
742        /* manuell etwa auf der Gamma 10 Seite, wo mehrere Bilder nebeneinandergepfuscht sind */
743        margin-left: auto;
744        margin-right: auto;
745}
746
747#content .auto-bildbreite  p.bildtext, #content .manuelle-bildbreite  p.bildtext,
748#content .auto-bildbreite  div.bildtext , #content .manuelle-bildbreite div.bildtext {
749        /* Saemtliche Abstaende abschalten, weil Breite des gesamten <div class="box">-Elements
750       durch ein JavaScript geregelt wird */
751        margin-left: 0;
752        margin-right: 0;
753}
754
755/*
756    03. Januar 2010: In Konstrukten wie
757          <div class="box left">
758             <img ... />
759                 <p class="bildtext">foo bar</p>
760                 <div class="clear">&nbsp;</div>
761          </div>
762        kann ab sofort das clear-Element weggelassen werden zugunsten einer einfachen Klasse
763          <div class="box left clear-after">
764             <img .../>
765                 <p class="bildtext">foo bar</p>
766          </div>
767        Realisiert wird das ueber einen kruden CSS-Hack. Muss noch getestet werden, ob der ueberall
768        laeuft.
769*/
770
771#content .clear-after {
772        display: inline-table;
773        /* CSS-Hack to hide from IE-mac \*/
774        height: 1%;
775        display: block;
776        /* IE mac is wayne, isn't it!? */
777}
778
779html>body #content .clear-after {
780        height: auto;
781}
782
783#content .clear-after:after {
784        content: ".";
785        display: block;
786        height: 0;
787        clear: both;
788        visibility: hidden;
789}
790
791
792
793
794
795
796/*
797   Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
798   Verwendung als Zusatzklasse zu box.
799   
800   Feststellung 04.10.2009: Box-Modell zu speziell, um Rahmen hinzuzufuegen
801*/
802
803#content .bordered, .content .bordered {
804    border: 1px solid #094099;
805        padding: 2em;
806}
807
808#content .bordered img, .content .bordered img {
809}
810
811/* ehemaliger Spezialstyle auf der Startseite,
812   jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
813div.desc-right, div.desc-left {
814    /* rechts gefloatetes thumbnail mit Beschreibungstext */
815    float: right;
816    margin: 0pt 0pt 2em 2em;
817/*  width: 236px; */
818/*  border: 1px solid #7090C0;
819    background-color: #EBEBEB; */
820    border: 1px solid #094099;
821    padding: 1em;
822}
823
824div.desc-left {
825        float: left;
826        margin: 0pt 2em 2em 0pt;
827}
828
829div.desc-right img {
830}
831
832div.desc-right p, div.desc-left p {
833    /* Damit der Text nicht über die ganze Fensterbreite geht,
834       <p style="width: Bildbreite;"> nötig. */
835    margin: 1em 0 0 0; padding: 0;
836    font-size: 90%;
837    text-align: left;
838}
839
840div.desc-right.borderless, div.desc-left.borderless {
841        border: none; /* ja, ziemlich bescheuert sorum */
842}
843
844
845@media print {
846     /**************************************************************\
847    *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
848    *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
849    *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
850    *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
851    *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
852    *                                                                *
853    *                        P R I N T    C S S                      *
854    *  ehemals in eigener print.css, jetzt aus perfomancegruenden    *
855    *              (ladezeit) in commons.css intigriert              *
856     \**************************************************************/
857
858    body {
859        margin: 1em; padding: 0;
860        color: #000;
861        font: 100% "Times New Roman",Times,serif;
862    }
863   
864    .hidden {
865        display: none;
866    }
867   
868    img {
869        border: none;
870        page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
871    }
872   
873    h1 {
874        margin: 0; padding: 6px 0;
875        text-align: center;
876   
877        font: 180% Arial,Verdana,Helvetica,sans-serif;
878    }
879   
880    h1 a, h1 a span {
881        display: inline !important; /* falls screen/fresh versehentlich angewandtfalls screen/fresh versehentlich angewandt */
882        color: #AAA !important;
883        text-decoration: none !important;
884    }
885   
886    /*h1 span.old:after {
887        * jetzt durch #h1-subtitle auch im IE moeglich *
888        content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
889    }*/
890   
891    #h1-subtitle {
892        display: block;
893        font-size: 108%;
894        border-bottom: 1px solid #AAA;
895        margin-bottom: 10px; margin-top: 0;
896        text-align: center;
897    }
898   
899    h2 {
900        font-size: 150%;
901        margin: 10px 0 10px 0;
902        padding: 0;
903        page-break-after: avoid;  /* auch wenn's nur Opera rafft ;) */
904    }
905   
906    #sidebar, #footer, #sidebar-footnote {
907        display: none;
908    }
909   
910    #copyright {
911        margin: 2em 0;
912        font-size: 80%;
913        text-align: center;
914    }
915   
916    /***** TEXT *****/
917   
918    p {
919        text-align: justify;
920        line-height: 110%;
921    }
922   
923    a:link, a:visited {
924        color: #000;
925        text-decoration: none;
926    }
927} /* end of @media print */
928
929/* EOF */
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License