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

Last change on this file since 31 was 20, checked in by sven, 16 years ago

Migrierung der Homepage in das Subversionsrepositorium
======================================================

Schritt 2: Import des /shared-Verzeichnisses. Jetzt richtig.

File size: 12.0 KB
Line 
1/***************************************************************\
2|       _         _         _                                   |
3|      /\ \     /\ \      / /\          technikum29.de          |
4|      \_\ \   /  \ \    / /  \         Common Styles           |
5|      /\__ \ / /\ \ \  / / /\ \        Version 5.7 ff          |
6|     / /_ \ \\/_/\ \ \/_/ /\ \ \                               |
7|    / / /\ \ \   / / /\ \ \_\ \ \      Alle "Spezialstyles"    |
8|   / / /  \/_/  / / /  \ \/__\ \ \     die in Inhaltsseiten    |
9|  / / /        / / /  _ \_____\ \ \    verwendet werden,       |
10| / / /        / / /_/\_\       \ \ \   koennen hier notiert    |
11|/_/ /        / /_____/ /        \ \ \  werden. Ausserdem ist   |
12|\_\/         \________/          \_\/  das ehemalige print.css |
13|                                       hier eingearbeitet.     |
14|                                                               |
15\***************************************************************/
16
17/* Changelog seit v5.7:
18**   v5.7FINAL: eingeführt
19**   v5.7.11:   Univac-Spezialstyle neu
20**   v5.7.14:   .desc-right zurück ins Leben gerufen
21**   v5.7.15:   .bordered zum allgemeineren Rahmenelement
22**
23*/
24
25/* Spezialstyle der neuen Startseite: */
26.startseiten-design div {
27    padding: 2em;
28    margin: 2em 0;
29    /*border: 1px solid blue;*/
30    background-color: #F5F5F5; /*#fafafa;*/
31    border: 1px solid #aaa;
32    background-image: url(../img/fresh.design/sidebar-stripe.gif);
33}
34
35.startseiten-design div h2 {
36    font-size: 126%;
37    color: #224B88; /* gleiche Farbe wie Navilinks rechts */
38}
39
40.startseiten-design div ul {
41    text-align: justify;
42    margin: 0;
43    padding-left: 1em;
44}
45
46.startseiten-design div.foto,
47#startseitenfoto-en {
48    /* #startseitenfoto-en für /en, da gibts kein .startseiten-design */
49    border: none;
50    padding: 0;
51    margin-left: auto;
52    margin-right: auto;
53    background: none;
54    width: 338px; height: 228px; /* Bildgrößen */
55    position: relative;
56}
57
58.startseiten-design .foto p,
59#startseitenfoto-en p {
60    position: absolute;
61    bottom: 0; right: 0;
62    margin: 0 3px 2px 0; 
63    text-align: right;
64    color: #fff;
65    font-size: 90%;
66    font-weight: bold;
67}
68
69#startseitenfoto-en {
70    float: right;
71    margin: 0 0 1em 2em;
72}
73
74/* Ursprüngliches völlig freies Spezialstyle der neuen Startseite,
75   letzendlich doch nicht mehr genutzt
76   weil nicht völlig unabhängig von der Schriftgröße.
77*/
78/*
79@media screen,projection { \* nicht drucken *\
80
81.startseite-freely {
82    position: relative;
83    height: 71em;
84    \*border: 1px solid red;*\
85}
86
87
88.startseite-freely .besonderes {
89    top: 0;
90    right: 35.3%; \* Damit Position von rechts fix ist, entspricht left: -1"em" *\
91    width: 60%;
92    max-width: 27em; \* Damit Zusammenhang mit .wo gegeben ist auf großem Monitor *\
93}
94
95.startseite-freely .wann {
96    right: -1%;
97    top: 6em;
98    width: 30%;
99}
100
101.startseite-freely .wo {
102    right: -1%;
103    top: 28.7em;
104    width: 77%;
105    height: 228px; \* Um bild zu fassen *\
106}
107
108.startseite-freely .wo h2, .startseite-freely .wo ul {
109    margin-right: 338px; \* Bild *\
110    padding-right: 1em;
111}
112
113.startseite-freely .wo .foto {
114    \* wird realtiv zu Vater .wo positioniert *\
115    right: 0;
116    top: 0;
117    background: none;
118    border: none;
119    z-index: 10;
120}
121
122.startseite-freely .wo .foto p {
123    position: absolute;
124    bottom: 2em;  \* kompensiert genau den .foto-padding *\
125    left: 2em;    \* und kommt (fast) direkt ins Foto *\
126    margin: 0 0 6px 0; \* ums nicht an die Bildkante zu packen *\
127    width: 329px; \* fast die bildbreite... *\
128    text-align: right; \* ...ergo nicht an den rechten Rand gepatscht *\
129    color: #fff;
130    font-size: 90%;
131    font-weight: bold;
132}
133
134.startseite-freely .wen {
135    top: 41em;
136    left: -4.5%;
137    width: 53%;
138}
139
140.startseite-freely .erwartung {
141    top: 46em;
142    right: -21.15%;
143    width: 57%;
144    z-index: 1; \* um über .homepage zu stehen *\
145}
146
147.startseite-freely .homepage {
148    top: 59em;
149    right: -28.2%;
150    width: 57%;
151}
152*\
153
154} \* media -> printausschluss *\
155*/
156
157
158/* ehemaliger Spezialstyle auf der Startseite,
159   jetzt genutzt nur auf der Lehrerinfo-Seite fuer Bildunterschrift. */
160div.desc-right {
161    /* rechts gefloatetes thumbnail mit Beschreibungstext */
162    float: right;
163    margin: 0pt 0pt 2em 2em;
164/*  width: 236px; */
165/*  border: 1px solid #7090C0;
166    background-color: #EBEBEB; */
167    border: 1px solid #094099;
168    padding: 1em;
169}
170
171div.desc-right img {
172}
173
174div.desc-right p {
175    /* Damit der Text nicht über die ganze Fensterbreite geht,
176       <p style="width: Bildbreite;"> nötig. */
177    margin: 1em 0 0 0; padding: 0;
178    font-size: 90%;
179    text-align: left;
180}
181
182/* Spezialstyle auf der Startseite: */
183/* "Neuzugaenge" */
184div.aktuell {
185    /* "Aktuelle Bilder"-Bereich */
186    border: 1px solid #7090C0;
187    /*margin-top: 2em;*/
188    padding: 1.5em;
189    clear: both;
190    /**  fuer rechts floatende Aktuell-Box: */
191    /* float: right; width: 300px; margin: 10px 0 20px 20px;*/
192}
193
194/* gegen kaputte Rahmen bei IEs, danke an Jeena */
195* html div.aktuell { position: relative;  }
196/* geht doch nicht --> er sieht es ploetzlich relativ zu der "Ausgansbrowsergroesse"  */
197
198div.aktuell h2 {
199    margin: 1px;
200    padding: 0;
201    color: #224B88; /* gleiche Farbe wie die ganzen anderen Boxen */
202    font-size: 126%;
203}
204
205div.aktuell .stand {
206    font-size: 80%;
207    text-align: center;
208    margin-top: 1px;
209}
210
211div.aktuell p {
212    margin: 20px 4px;
213/*  clear: both;*/
214}
215
216/* Ende aller Spezialstyles der Startseite */
217
218
219
220/* Spezialstyle bei IC-Technik: */
221/* Ueberschrift => Liste gleicher margin-left */
222p.h-ul { text-align: left; }
223ul.h-ul { margin: 0; padding: 1em; }
224/* wird nicht mehr gebraucht! Löschen. */
225
226
227/* Links floatende Bildergalerie, einfache Listenstruktur
228   gebraucht auf univac9400-Seite
229    ** seit 5.5.2 wegen Designkorrektur spezialisierung auf **
230    ** univac-Seite                                         **
231*/
232
233ul.univac-thumbs, ul.univac-thumbs li {
234   list-style: none;
235   margin: 0; padding: 0;
236}
237
238ul.univac-thumbs li {
239   float: left;
240   margin: 10px 50px 20px 0;
241   clear: left;
242}
243
244ul.univac-thumbs li img {
245   width: 238px; /* um unschönen textreinfließeffekt zu umgehen */
246}
247
248/* Univac-Seite seit 5.7.11: Menü unter Panoramabild
249   Quick&Dirty-Lösung, angelehnt an Navigationsleistenhintergrundrealisierungen */
250
251.univac #wrapper #menu {
252    margin-top: 520px; /* circa... */
253}
254
255
256
257
258
259/* Nur verwendet bei Faxtechnik und auf der Startseite: */
260/*
261    Mehrspaltiger Inhalt:
262    <div class="cols">
263        <div class="leftcol">linke spalte</div>
264        <div class="rightcol">rechte spalte</div>
265    </div>
266*/
267#content .cols {
268    /* Mehrspaltiger Inhalt. Nur genutzt in <faxtechnik> */
269}
270
271#content .cols .leftcol, #content .cols .rightcol {
272    padding: 5px 7px;
273/*  border: 3px dashed red;*/
274}
275
276#content .cols .leftcol {
277    float: left; width: 47%;
278}
279
280#content .cols .rightcol {
281    float: right; width: 47%;
282}
283
284#content blockquote, .content blockquote {
285    /* bis jetzt nur genutzt in <faxtechnik> */
286    /* Und <blockquote> auf einer WANG-Extraseite, Bedienungsanleitung */
287    margin: 5px 0px;
288    padding: 0px;
289    color: #2F319D;
290    text-align: justify;
291}
292
293
294
295/*
296** Bildboxen ("Imageboxen")
297** Das Bildboxen-Konzept wird auf ausnahmslos allen Inhalts- und Extraseiten
298** genutzt. Aufbau eines .right/.left/.center-Bildbeschreibungs-Gebildes:
299** <div class="[box] [links|rechts|center]"> (box für fakultativen Abstand oben/unten)
300**    <img ... />
301**    <[div|p] class="bildtext"> (Bildtextklasse nicht mehr zwingend nötig)
302**       <p>Viel Text...</p>
303**    </[div|p]>
304**    <div class="clear">&nbsp;</div> (Damit das Bild nicht weitergeht)
305** </div>
306** Dazu existieren Erweiterungen: img.nomargin-bottom bei weniger Text als Bild,
307** .center .bildtext-bildbreite, damit zentrale Texte genauso breit wie die
308** Bilder werden.
309*/
310
311#content .box, .content .box {
312    /* .box als allgemeine Klasse fuer abstandswuerdige */
313    /* Objekte (.center/.right/.left zum Beispiel) */
314    margin-top: 3em;
315    margin-bottom: 3em;
316}
317
318#content .left img, .content .left img {
319    /* Links ausgerichtetes Bild mit Abstand drumherum */
320    float: left;
321    margin: 0 2em 2em 0;
322}
323
324#content .right img, .content .right img {
325    /* Rechts ausgerichtetes Bild mit Abstand drumherum */
326    float: right;
327    margin: 0 0 2em 2em;
328}
329
330#content .center img, .content .center img {
331    /* Mittig ausgerichtetes Bild mit Abstand drunter */
332    margin: 0 0 0.3em 0;
333}
334
335#content img.nomargin, .content img.nomargin {
336    /* Links/rechts/mittig ausgerichtetes Bild mit exiplit keinem Abstand */
337    margin: 0;
338}
339
340#content .left img.nomargin-bottom, #content .right img.nomargin-bottom,
341.content .left img.nomargin-bottom, #content .right img.nomargin-bottom {
342    /* Zur absoluten Perfektion: Kein Abstand unter dem Bild bei links/rechts-fliessendem
343       (nur machbar, wenn der Text nicht umbrechen wird, weil er einfach zu kurz ist).
344       Dadurch wird der viel zu grosse Abstand unter einer .box verhindert, den ein
345       .clear dann erzeugt. */
346    margin-bottom: 0;
347}
348
349#content .left .bildtext, .content .left .bildtext,
350#content .right .bildtext, .content .right .bildtext {
351    /* p.bildtext oder div.bildtext: Kein Abstand! */
352    text-align: justify;
353    /* Im Endeffekt ist .bildtext hier unnoetig! */
354}
355
356#content .center .bildtext, .content .center .bildtext {
357    /* p.bildtext oder div.bildtext im center = Abgrenzung links/rechts */
358    text-align: justify;
359    margin-left: 10%;
360    margin-right: 10%;
361}
362
363#content .center .bildtext-bildbreite, .content .center .bildtext-bildbreite {
364    /* Text zentriert unter dem Bild in der Breite des Bildes */
365    text-align: justify;
366    margin-left: auto;
367    margin-right: auto;
368}
369
370/*
371   Mehr oder weniger "halboffizielle" Rahmen um class="box [right|left|center]"-Bilder.
372   Verwendung als Zusatzklasse zu box.
373*/
374
375#content .bordered, .content .bordered {
376    border: 1px solid #094099;
377        padding: 2em;
378}
379
380#content .bordered img, .content .bordered img {
381}
382
383
384
385@media print {
386     /**************************************************************\
387    *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
388    *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
389    *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
390    *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
391    *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
392    *                                                                *
393    *                        P R I N T    C S S                      *
394    *  ehemals in eigener print.css, jetzt aus perfomancegruenden    *
395    *              (ladezeit) in commons.css intigriert              *
396     \**************************************************************/
397
398    body {
399        margin: 1em; padding: 0;
400        color: #000;
401        font: 100% "Times New Roman",Times,serif;
402    }
403   
404    .hidden {
405        display: none;
406    }
407   
408    img {
409        border: none;
410        page-break-after: avoid; /* weil Bildtexte fast immer hinterm Bild stehen */
411    }
412   
413    h1 {
414        margin: 0; padding: 6px 0;
415        text-align: center;
416   
417        font: 180% Arial,Verdana,Helvetica,sans-serif;
418    }
419   
420    h1 a, h1 a span {
421        color: #AAA !important;
422        text-decoration: none !important;
423    }
424   
425    /*h1 span.old:after {
426        * jetzt durch #h1-subtitle auch im IE moeglich *
427        content: "Museum für Rechner-, Computer- und Kommunikationstechnik";
428    }*/
429   
430    #h1-subtitle {
431        display: block;
432        font-size: 108%;
433        border-bottom: 1px solid #AAA;
434        margin-bottom: 10px; margin-top: 0;
435        text-align: center;
436    }
437   
438    h2 {
439        font-size: 150%;
440        margin: 10px 0 10px 0;
441        padding: 0;
442        page-break-after: avoid;  /* auch wenn's nur Opera rafft ;) */
443    }
444   
445    #sidebar, #footer, #sidebar-footnote {
446        display: none;
447    }
448   
449    #copyright {
450        margin: 2em 0;
451        font-size: 80%;
452        text-align: center;
453    }
454   
455    /***** TEXT *****/
456   
457    p {
458        text-align: justify;
459        line-height: 110%;
460    }
461   
462    a:link, a:visited {
463        color: #000;
464        text-decoration: none;
465    }
466} /* end of @media print */
467
468/* 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