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