source: t29-www/shared/css/screen.css @ 207

Last change on this file since 207 was 187, checked in by sven, 14 years ago

Erste Vollversion des Mitmachsystems zur Verbesserung der englischen Homepage, zwecks Testing auf incubator.technikum29.de. Das System laeuft unter /en/dev/translation.

  • shared/css/fresh.css: Navigationsboxen-System eingefuehrt zur systematischen Verwendung von zusaetzlichen Boxen in der Navigationsleiste
  • shared/js/tools.js: Img-License-System ausschaltbar gemacht
  • Property svn:keywords set to
    Id
    Revision
    Author
    Date
File size: 10.9 KB
Line 
1
2  /**************************************************************\
3 *  TTTTT EEEE CCCC H  H N   N III K  K U  U M   M    222   999   *
4 *    T   E    C    H  H NN  N  I  K K  U  U MM MM   2   2 9   9  *
5 *    T   EEE  C    HHHH N N N  I  KK   U  U M M M      2  99999  *
6 *    T   E    C    H  H N  NN  I  K K  U  U M   M     2      9   *
7 *    T   EEEE CCCC H  H N   N III K  K UUUU M   M   22222   9    *
8 *                                                                *
9 *                     technikum29.de - Design                    *
10 *                       S C R E E N    C S S                     *
11 *                                                                *
12 *  ab Version v5.7 ist fresh.css das neue Standardcss fuer Bild- *
13 *  schirmanzeige. Das Screen-Design ist zwar fuer "kleine"       *
14 *  Anzeigebereiche (Breite < 900px) besser geeignet, soll jedoch *
15 *  nicht mehr benutzt werden. Trotzdem steht es als mehr oder    *
16 *  weniger "gleichwertige" Alternative dank XHTML-Quelltext-     *
17 *  kompatibilitaet zur Verfuegung und laesst sich mit der        *
18 *  Browserfunktion zum CSS-Wechseln aktivieren.                  *
19 *  Internet Explorer der Version 5 werden automatisch auf dieses *
20 *  Design umgestellt (Anteil der IE5s im Jahr 2008 an den        *
21 *  Homepagebesuchern: 0% IE5 25% IE6, 25% IE7).                  *
22 *                                                                *
23 *  fuer v5.7 wurde diese Datei so angepasst, dass sie sowohl fuer*
24 *  alte Quelltexte als auch neue gleichzeitig nutzbar ist. In der*
25 *  Uebergangsphase, wo /en noch alt ist, war dies noetig.        *
26 *                                       12.07.07 2:15 v5.7BETA   *
27 *  $Id:: screen.css 187 2010-09-03 03:09:34Z sven             $  *
28  \**************************************************************/
29
30/*
31** Changelog seit v5.7:
32**   v5.7FINAL: Changelog gestartet
33**   v5.7.5:    Diverse Anpassungen für besseres Aussehen
34**   v5.8:      Einige Fixes, damit das Design zumindest noch
35**              benutzbar waere.
36**
37**
38**
39*/
40
41body {
42    margin: 0; padding: 0; color: #000;
43    font: 13px Verdana,Tahoma,Helvetica,Arial,sans-serif;
44}
45
46.hidden { display: none; }
47img     { border: none; }
48.center { text-align: center; }
49.left   { text-align: left; }
50.block, .justify  { text-align: justify; }
51.clear  { /* clearendes element, inhalt egal */
52          display: block; clear: both;
53          height: 2px; overflow: hidden; }
54
55/***** HEAD *****/
56
57h1 {
58    margin: 0; padding: 0;
59    height: 67px; /* real height: 67px */
60    text-align: center;
61    background-color: #5E7FAD;
62
63    z-index: 12;
64}
65
66html > body h1 {
67    /* For intelligent browsers */
68    height: 67px;
69}
70
71h1 a {
72    position: absolute;
73    top: 0;
74    left: 50%;
75    margin-left: -380px;
76    z-index: 11;
77    display: block;
78
79    /* background-image: multilangual, so look at h1.[lang] a */   
80    background-position: top center;
81    background-repeat: no-repeat;
82    width: 760px;
83    height: 67px;
84}
85
86h1.de a {
87    /* Deutscher Banner */
88    background-image: url(../img/banner/big.de-old.jpg);
89}
90
91h1.en a {
92    /* English banner */
93    background-image: url(../img/banner/big.en-old.jpg);
94}
95
96h1.int a {
97    /* International banner (Deutsch grosse Schrift, englisch klein drunter) */
98    background-image: url(../img/banner/int.jpg);
99}
100
101h1.none a {
102    /* Banner with no subtitle in any language */
103    /* Banner mit ueberhaupt keinem Subtitel */
104    background-image: url(../img/banner/logo.jpg);
105}
106
107h1 a span {
108    display: none;
109}
110
111h1 span.old, h1 span.d {
112    /* span.d war der alte Name, span.old ist der neue */
113    background-color: #0C377A;
114    display: block;
115    width: 50%;
116    height: 67px;
117    position: absolute;
118    top: 0; left: 0;
119    z-index: 10;
120}
121
122h2 {
123    font: bold 140% Verdana,Arial,Helvetica,sans-serif;
124    margin: 30px 0 10px 0;
125    padding: 0;
126}
127
128div#lang a {
129    /* <div> mit Sprachauswahl (z.b. "englische Version") */
130    position: absolute;
131    top: 70px; left: 0;
132    display: block; text-align: center;
133    width: 160px; height: 13px;
134    margin: 0; padding: 1px;
135}
136
137div#lang ul, div#lang li {
138    list-style: none;
139    display: inline;
140    margin: 0;
141    padding: 0;
142}
143
144div#lang span, div#lang strong {
145    display: none;
146}
147
148div#lang a {
149    color: #416397;
150    font-size: 90%;
151}
152
153div#lang a .de, div#lang a br {
154    display: none;
155}
156
157#h1-subtitle {
158    /* <h1> border-hilfsmittel, ehemals #h1border */
159    background-color: #C8C8C8;
160    color: #C8C8C8; /* damit beschriftung nicht stoert */
161    position: absolute; z-index: 10;
162    border-top: 1px solid #3A6198;
163    top: 67px; left: 0;
164    display: block; overflow: hidden;
165    height: 3px; /* fuer IE: 2px inhalt + 1px rahmen */
166    width: 100%;
167    margin: 0; padding: 0;
168}
169
170/* fuer intelligente browser: 2px inhalt + rahmen */
171html>body #h1-subtitle { height: 2px; }
172
173
174
175/***** GENERAL *****/
176
177#menu {
178    /* Menue-<div> */
179    position: absolute;
180    left: 0; top: 81px;
181    width: 160px;
182    padding-top: 10px;
183}
184
185#content {
186    /* Inhalt (nur in Zusammenhang mit #menu nutzen!) */
187    margin-left: 160px;
188    padding: 10px;
189
190    min-height: 900px;
191    height: 900px; /* IE workaround */
192    overflow: visible;
193}
194
195html>body #content { height: auto; }
196
197#page {
198    /* Fuer seiten ohne #menu */
199    margin: 10px;
200}
201
202
203/***** MENU *****/
204
205#menu ul, #menu li {
206    list-style: none;
207    margin: 0; padding: 0;
208    display: inline;
209    line-height: 100%;
210}
211
212#menu a {
213    text-decoration: none;
214}
215
216#menu a span {
217    /* <span>&nbsp;</span>-Teile, die in screen.css nicht gebraucht werden */
218    display: none;
219}
220
221#menu em.l1 span.hidden {
222    /* kleine Notloesung, um "Kommunikations-<br/>technik" mit screen.css
223       darzustellen, mit fresh.css aber nur "Kommunikationstechnik" */
224    display: inline;
225}
226
227/* oben: Name mit alten quelltexten, unten Kompatibilitaet */
228#menu li .t,
229#menu li.l1 a, #menu li em { /* #menu li a.on */
230    /* Meneintrag obersten Levels */
231    color: #000;
232    margin: 1.1em 0 2px 1px;
233    display: block;
234    border-width: 1px 1px 1px 0;
235    border-style: solid;
236    border-color: #305992;
237    padding: 1px 1px 1px 3px;
238    text-align: center;
239    font-style: normal;
240}
241
242#menu li a.t:link, #menu li a.t:visited,
243#menu li.l1 a:link, #menu li.l1 a:visited {
244    color: #92A2B9; border-color: #97ABC8;
245}
246
247#menu li a.t:hover, #menu li a.t:active, #menu li a.t:focus,
248#menu li.l1 a:hover, #menu li.l1 a:active, #menu li.l1 a:focus {
249    color: #000; border-color: #305992;
250}
251
252#menu li.on a.t, #menu li.on span.t,
253#menu li.l1 a.on, #menu li em {
254    /* Meneintrag oberstes Level, das selektiert ist */
255    color: #000; border-color: #305992;
256    /* Achtung wegen Ueberschreibung unten... */
257}
258
259#menu li li a {
260    /* Submenueeintraege */
261    display: block;
262    margin: 10px 10px 1px 10px;
263    color: #224B88;
264
265    background-position: 0 2px;
266    background-repeat: no-repeat;
267    padding-left: 13px;
268}
269
270#menu li li a:link, #menu li li a:visited {
271    background-image: url(../img/double.a.png);
272}
273
274#menu li li a:hover {
275    color: #882224;
276    background-image: url(../img/double-hot.a.png);
277}
278
279#menu li li a.on {
280    /* selektierter Submenueneintrag */
281    color: #112544;
282    background-image: url(../img/screen.design/square.a.png) !important;
283    border: none;
284}
285
286/* Es folgen kurze Loesungen fuer die zweite (dritte) Gliederungsebene */
287#menu li.l3 ul a {
288    margin-left: 20px;
289}
290
291#menu li.l3 em {
292    border-left-width: 1px;
293    margin-left: 10px;
294}
295
296#sidebar-footnote , #menu .box {
297    /* Fußnoten, die eigentlich nur das freshdesign betreffen sollten */
298        /* Und ueberhaupt sollen solche neuen Elemente nicht in nostalgischen Designs */
299        /* verwendet werden */
300    display: none;
301}
302
303
304/***** CONTENT *****/
305
306p { text-align: justify; }
307p.text-left { text-align: left; }
308
309ul.text-left li, li.text-left { text-align: left; }
310
311a:link, a:visited {
312    color: #224B88;
313    text-decoration: underline;
314}
315
316a:hover, a:active, a:focus {
317    color: #882224;
318    text-decoration: underline;
319}
320
321/*
322  Links mit Pfeilen: a.go & a.arrow:
323  Momentan noch kein IE-Workaround gefunden
324  (Bei mehrzeiligen Links pfeile im text) -
325  daher momentan nur intelligenten Browsern
326  vorenthalten
327  Siehe auch /CHANGELOG, /TODO
328*/
329
330html>body a.arrow,
331html>body a.go {
332    background-position: bottom left;
333    background-repeat: no-repeat;
334    padding-left: 13px;
335}
336
337html>body a.arrow:link,
338html>body a.arrow:visited,
339html>body a.go:link,
340html>body a.go:visited {
341    background-image: url(../img/double.a.png);
342}
343
344html>body a.arrow:hover,
345html>body a.arrow:active,
346html>body a.arrow:focus,
347html>body a.go:hover,
348html>body a.go:active,
349html>body a.go:focus {
350    background-image: url(../img/double-hot.a.png);
351}
352
353/*  Navigationslisten: <ul class="nav">/<ul id="nav"> */
354
355ul.nav, ul#nav {
356    list-style: none;
357    padding: 0;
358}
359
360ul.nav li, ul#nav li {
361    margin: 0; padding: 0;
362}
363
364ul.nav li a, ul#nav li a {
365    padding-left: 13px;
366    background-position: bottom left;
367    background-repeat: no-repeat;
368}
369
370ul.nav li a:link, ul#nav li a:link,
371ul.nav li a:visited, ul#nav li a:visited {
372    background-image: url(../img/double.a.png);
373}
374
375ul.nav li a:hover, ul#nav li a:hover,
376ul.nav li a:active, ul#nav li a:active,
377ul.nav li a:focus, ul#nav li a:focus {
378    background-image: url(../img/double-hot.a.png);
379}
380
381/* Definitionslisten */
382dt { font-weight: bold; }
383dt em, dt i { font-weight: normal; }
384
385
386
387
388/****** FOOTER *****/
389
390/* Kompatibiltaet: Alt #rel, neu #footer! */
391#footer {
392    /* seitenrelationenleiste ganz unten */
393    clear: both; padding: 0;
394    height: 40px;
395    position: relative; /* für IEs #footer .border */
396
397    border-top: 2px solid #C8C8C8; color: #eee;
398    background: #5F80AE url(../img/screen.design/body.bg.png) repeat-y top left;
399}
400
401#footer .border {
402    /* Rahmen-hilfsmittel, welches als Doppelfunktion das ehemalige .space
403       übernimmt, um IE eine richtige Höhe anzuzeigen  */
404    border-top: 1px solid #3A6198;
405    overflow: hidden; height: 1px;
406}
407
408* html #footer .border {
409    position: absolute;
410    width: 100%; height: 40px;
411}
412
413#footer b {
414    font-weight: normal; /* Kompensierung des neuen Fettdrucks */
415    text-decoration: underline; /* Nur die erste Zeile war damals Link */
416}
417
418div#footer ul, div#footer li {
419    list-style: none;
420    margin: 0; padding: 0;
421}
422
423div#footer li a {
424    color: #FFF;
425    text-decoration: none;
426}
427
428div#footer li {
429    background-repeat: no-repeat;
430}
431
432div#footer li.up, div#footer li.prev {
433    background-position: 0 5px;
434    padding-left: 13px;
435}
436
437div#footer li.up {
438    float: left; width: 160px; margin: 1px;
439    background-image: url(../img/screen.design/up.rel.gif);
440}
441
442div#footer li.next {
443    float: right; width: 30%;
444    text-align: right;
445    padding-right: 13px;
446    background-image: url(../img/screen.design/next.rel.gif);
447    background-position: right top;
448/*  background-position: right 2px; nicht valide? */
449}
450
451div#footer li.prev {
452    float: left; width: 30%;
453    text-align: left;
454    background-image: url(../img/screen.design/prev.rel.gif);
455}
456
457#copyright {
458    /* Wer wirklich auf Screen umschaltet, ist kein Idiot, der einen Copyright-Vermerk braucht */
459    display: none;
460}
461
462/* 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