Changeset 33 in t29-www for shared/css/fresh.css
- Timestamp:
- Aug 22, 2008, 3:38:18 AM (16 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
shared/css/fresh.css
-
Property
svn:keywords
set to
Id
Revision
Author
Date
r32 r33 1 /***************************************************************************\ 2 | _ _ _ | 3 | /\ \ /\ \ / /\ technikum29.de | 4 | \_\ \ / \ \ / / \ Screendesign der Version 5.7 | 5 | /\__ \ / /\ \ \ / / /\ \ | 6 | / /_ \ \\/_/\ \ \/_/ /\ \ \ Seit Version 5.7 default-css fuer | 7 | / / /\ \ \ / / /\ \ \_\ \ \ die Homepage. screen.css steht | 8 | / / / \/_/ / / / \ \/__\ \ \ jedoch immer noch als gleichwertige | 9 | / / / / / / _ \_____\ \ \ Alternative zur Verfuegung. | 10 | / / / / / /_/\_\ \ \ \ | 11 |/_/ / / /_____/ / \ \ \ Alle "Spezialstyles" fuer einzelne | 12 |\_\/ \________/ \_\/ Inhaltsseiten sind in common.css | 13 | mit dem ehemal. print.css | 14 | zusammengefasst. | 15 | | 16 | $Id:: $ | 17 | | 18 | IE6-Workarounds sind hauptsaechlich in fresh-iefixing.css festgehalten! | 19 \***************************************************************************/ 20 21 /* 22 ** Changelog seit v5.7: 23 ** v5.7FINAL: eingeführt 24 ** v5.7.1: Schriftgröße runtergesetzt, Menü l3 nun ständig angezeigt 25 ** v5.7.5: Kosmetische Verbesserungen (Sourcecode), Verallgemeinerungen 26 ** für Textabstand zu links floatenden Bildern, Restrukturierung 27 ** Navibereich, Transfer von allgemeinen Teilen (bildboxen) zu 28 ** common.css, Styleswticher, etc. 29 ** v5.7.6: opacity:.99; für Safari2-Bug 30 ** v5.7.21: Seitenmindesthöhe vergrößert 31 ** v5.8.0: Extraseitenstyles hinzugefügt. 32 ** 33 ** 34 ** 35 */ 36 37 38 /* 39 ** "fresh" -- das klingt nach Freiheit, Frische, Vitalitaet, ein Design, was 40 ** alte Zoepfe abschneidet trotzdem aestetisch schoen ist. So oder so aehnlich 41 ** war es auch in der ersten Version geplant -- was in dieser hier vorliegenden 42 ** Endfassung davon uebrig geblieben ist, haben viele Leute unabhaengig von- 43 ** einander auf den Punkt gebracht: Konservativ. Jedes einzige der "frischen" 44 ** Elemente wurde in einer zaehen, langen Woche Stueck fuer Stueck entfernt 45 ** und durch etwas ersetzt, was in seiner Ganzheit nun von einigen Leuten als 46 ** schlichtweg "haesslich", von anderen als "konservativ" und "altbacken" be- 47 ** zeichnet wird. Eigentlich trifft nur eins zu: Es trifft vermutl. im Grossen 48 ** und ganzen die Vorstellungen des "Kunden", wenn auch jede Hoffnung auf das, 49 ** was man von einem "Redesign" erhoffen koennte, weitgehend gestorben ist. 50 ** So bleibt nur noch der Name, den ich - entgegen jedem Frust - aus Hoffnung 51 ** heraus nicht in "conservative.css" geaendert habe. Denn auch Rueckschritt 52 ** kann Frische bringen, und, um mit den Worten der Leute zu schliessen, die 53 ** das Design als "neutral" und "nicht schlecht" empfunden haben, es passt doch 54 ** zu einem Museum auch ein bisschen. 55 ** In diesem Sinne viel Spass beim Lesen eines Stylesheets, was meinem Empfinden 56 ** nach fuer ein solches Aussehen ueberpropertional umfangreich ist. 57 ** -- Sven, 15.07.2007 23:00 58 */ 59 1 /***********************************************************************************\ 2 ** ,---.-, ** 3 ** ___ ,----, ' ,' '. technikum29.de ** 4 ** ,--.'|_ .' .' \ / / \ Screendesign der Version 5.8 ** 5 ** | | :,' ,----,' |. ; ,/. : ** 6 ** : : ' : | : . ;' | | : ; Seit Version 5.7 ist fresh.css das ** 7 ** .;__,' / ; |.' / ' | ./ : Standarddesign der Homepage. ** 8 ** | | | `----'/ ; | : , screen.css steht jedoch immer noch ** 9 ** :__,'| : / ; / \ \ | als gleichwertige Alternative zur ** 10 ** ' : |__ ; / /-, `---`--- ; Verfuegung. ** 11 ** | | '.'| / / /.`| | | | ** 12 ** ; : ;./__; : ' : ; "Spezialstyles" fuer einzelne ** 13 ** | , / | : .' | | ' Inhaltsseiten sind in common.css ** 14 ** ---`-' ; | .' ; |.' zusammengefasst. ** 15 ** `---' '---' ** 16 ** Workarounds fuer den IE6 sind haupt- ** 17 ** saechlich in fresh-iefixing.css ** 18 ** This is $Revision:: $ from festgehalten, fuer den IE7 hier. ** 19 ** $Author:: $, latest change at ** 20 ** $Date:: 2006-07-22 21:42:37 -0700 (Sat, Jul 2006)$ ** 21 ** ** 22 ** Alle technikum29-CSS sind valide CSS3: http://tinyurl.com/t29-css-valid ** 23 ** ** 24 ************************************************************************************* 25 ** ** 26 ** Changelog seit v5.7 ** 27 ** ** 28 ** v5.7FINAL: eingeführt ** 29 ** v5.7.1: Schriftgröße runtergesetzt, Menü l3 nun ständig angezeigt ** 30 ** v5.7.5: Kosmetische Verbesserungen (Sourcecode), Verallgemeinerungen ** 31 ** für Textabstand zu links floatenden Bildern, Restrukturierung ** 32 ** Navibereich, Transfer von allgemeinen Teilen (bildboxen) zu ** 33 ** common.css, Styleswticher, etc. ** 34 ** v5.7.6: opacity:.99; für Safari2-Bug ** 35 ** v5.7.21: Seitenmindesthöhe vergrößert ** 36 ** v5.8.0: Extraseiten-Hintergründe hinzugefügt. Generalüberholung des ** 37 ** gesamten Stylesheets, Kommentare aufgeräumt, Menünavigation ** 38 ** verschönert (:focus-Effekt jetzt identisch zu :hover). Neuer ** 39 ** Beginn des Stylesheets, Neues Design fuer Sprachlinks ** 40 ** (Registerkartenimitate) ** 41 ** ** 42 ************************************************************************************* 43 ** ** 44 ** Ueber dieses Design ** 45 ** ** 46 ** Dieses Design hat seit der Idee viele Veränderungen durchgemacht. So wundert ** 47 ** wenig, wie ich damals davon gesprochen habe: ** 48 ** ** 49 *** "fresh" -- das klingt nach Freiheit, Frische, Vitalitaet, ein Design, was ** 50 *** alte Zoepfe abschneidet trotzdem aestetisch schoen ist. So oder so aehnlich ** 51 *** war es auch in der ersten Version geplant -- was in dieser hier vorliegenden ** 52 *** Endfassung davon uebrig geblieben ist, haben viele Leute unabhaengig von- ** 53 *** einander auf den Punkt gebracht: Konservativ. Jedes einzige der "frischen" ** 54 *** Elemente wurde in einer zaehen, langen Woche Stueck fuer Stueck entfernt ** 55 *** und durch etwas ersetzt, was in seiner Ganzheit nun von einigen Leuten als ** 56 *** schlichtweg "haesslich", von anderen als "konservativ" und "altbacken" be- ** 57 *** zeichnet wird. Eigentlich trifft nur eins zu: Es trifft vermutl. im Grossen ** 58 *** und ganzen die Vorstellungen des "Kunden", wenn auch jede Hoffnung auf das, ** 59 *** was man von einem "Redesign" erhoffen koennte, weitgehend gestorben ist. ** 60 *** So bleibt nur noch der Name, den ich - entgegen jedem Frust - aus Hoffnung ** 61 *** heraus nicht in "conservative.css" geaendert habe. Denn auch Rueckschritt ** 62 *** kann Frische bringen, und, um mit den Worten der Leute zu schliessen, die ** 63 *** das Design als "neutral" und "nicht schlecht" empfunden haben, es passt doch ** 64 *** zu einem Museum auch ein bisschen. ** 65 *** In diesem Sinne viel Spass beim Lesen eines Stylesheets, was meinem Empfinden ** 66 *** nach fuer ein solches Aussehen ueberpropertional umfangreich ist. ** 67 *** -- Sven, 15.07.2007 23:00 ** 68 ** ** 69 ** ** 70 ************************************************************************************* 71 ** ** 72 ** Table of contents ** 73 ** ** 74 ** Da dieses CSS recht lang ist (dieser aussergewoehnlich lange Kommentar am ** 75 ** Anfang tut dazu sein uebriges), wurde es in verschiedene nummerierte Abschnitte ** 76 ** eingeteilt: (typische tags) ** 77 ** ** 78 ** 1. banner (h1, #h1-subtitle) ** 79 ** 2. general (#wrapper, #page, #sidebar, #footer) ** 80 ** 3. sidebar (#sidebar, #lang) ** 81 ** 4. menu (#menu, #menu ul.l[123].a, #menu li em, ...) ** 82 ** 4. content (h2, p, a, a:hover, a:focus, ul.nav) ** 83 ** 5. footer (#footer, #footer li a, #copyright) ** 84 ** ** 85 \***********************************************************************************/ 60 86 61 87 body { … … 75 101 height: 2px; overflow: hidden; } 76 102 77 /* 78 ** Table of contents: 79 ** 1. Banner 80 ** 2. General page layout (#wrapper, #page, #menu, #content,...) 81 ** 3. Sidebar (Menu, language link,...) 82 ** 4. Common content 83 ** 5. Footer (Relations, copyright) 84 ** 85 */ 86 87 88 /****************************************************************************** 89 ** 1. Banner 90 */ 103 104 /***********************************************************************************\ 105 ** _ _ Der Banner besteht aus dem System ** 106 ** /| | | |__ __ _ _ __ _ __ ___ _ __ <h1><a class="[lang]" href="...> ** 107 ** | | | '_ \ / _` | '_ \| '_ \ / _ \ '__| <span>technikum29</span></a></h1> ** 108 ** | |_ | |_) | (_| | | | | | | | __/ | und ggf. weiteren Elementen wie ** 109 ** |_(_) |_.__/ \__,_|_| |_|_| |_|\___|_| einem Folgenden #subtitle. ** 110 ** [lang] besteht aus (de,en,dev,none) ** 111 \***********************************************************************************/ 91 112 92 113 h1 { 93 114 margin: 0; padding: 0; 94 height: 98px;115 height: 110px; /* vor schattenversuch: 98px */ 95 116 text-align: center; 96 background-color: #5E7FAD; 117 /*background-color: #5E7FAD;*/ /* war gesetzt vor schattenversuch */ 118 /* Schatten (seit v5.8): 119 Der reale Banner ist nur 96px hoch, px 97 bis 110 sind transparent auslaufender 120 Schatten. Per Z-Index koennen Elemente (siehe Sprachlink) mit diesem Schatten 121 arbeiten. 122 */ 97 123 background-repeat: repeat-x; 98 background-image: url(../img/fresh.design/freshbanner.bg.png); 99 } 124 background-image: url(../img/fresh.design/freshbanner-shaded.bg.png); 125 position: relative; /* fuer z-index */ 126 /* IE6 und 7 haben einen z-index-Bug, der das Layout unmoeglich macht. 127 z-index bei h1 nicht setzen is eine Kompromissloesung */ 128 } 129 130 /* CSS-Hack: Alle modernen Browser ausser IE7 */ 131 html>/**/body h1 { z-index: 3; } 132 100 133 101 134 h1 a { … … 149 182 } 150 183 151 152 /****************************************************************************** 153 ** 2. General Page Layout (#sidebar, #content, #page,...) 154 ** 155 ** An dieser Stelle nur allgemeine grundlegende Bereiche beschreiben, kein 156 ** Design. 157 */ 184 /***********************************************************************************\ 185 ** ____ _ Das General Page Layout um- ** 186 ** |___ \ __ _ ___ _ __ ___ _ __ __ _| | schliesst #sidebar, #content, ** 187 ** __) | / _` |/ _ \ '_ \ / _ \ '__/ _` | | #page, ..., also allgemeine ** 188 ** / __/ _ | (_| | __/ | | | __/ | | (_| | | grundlegende Seitenbereiche, die ** 189 ** |_____(_) \__, |\___|_| |_|\___|_| \__,_|_| positioniert werden. Hier werden ** 190 ** |___/ auch Navigationsleistenhinter- ** 191 ** gruende definiert. ** 192 \***********************************************************************************/ 158 193 159 194 #wrapper { … … 244 279 */ 245 280 position: absolute; 246 right: 0; top: 98px; 281 /* Der Banner ohne Schatten ist 97px lang. */ 282 right: 0; top: 97px; 247 283 width: 210px; 248 padding: 10px20px 0 0;284 padding: 0 20px 0 0; 249 285 } 250 286 … … 255 291 /* problematishce Sache. VOrher stand font-size:105% ausgeklammert, d.h. 100% wurde genutzt. 256 292 Afaik soll sogar ein Schriftwechsler implementiert werden. 257 258 293 */ 259 294 line-height: 125%; /* 1.5em sieht auch nett aus */ … … 273 308 } 274 309 275 html>body #content { height: auto; }276 277 310 .extra #wrapper #content { 278 311 /* Extraseiten: Keine Mindesthoehe! */ 279 312 min-height: inherit; 280 height: inherit; 313 height: 50px; /* IE7 bug: inherit geht nicht. */ 314 } 315 316 html>body #content, html>body .extra #wrapper #content { 317 height: auto; 281 318 } 282 319 … … 287 324 } 288 325 289 /****************************************************************************** 290 ** 3. Sidebar: Menue, Languagelink, Footnote 291 */ 326 /************************************************************************************\ 327 ** _____ _ _ _ In diesem Abschnitt werden Elemente ** 328 ** |___ / ___(_) __| | ___| |__ __ _ _ __ der Sidebar ausgezeichnet, u.a. das ** 329 ** |_ \ / __| |/ _` |/ _ \ '_ \ / _` | '__| Sprachlinksystem sowie die ** 330 ** ___) | \__ \ | (_| | __/ |_) | (_| | | Fussnoten. ** 331 ** |____(_) |___/_|\__,_|\___|_.__/ \__,_|_| Das Menü ist erst Bestandteil von ** 332 ** Punkt 4. ** 333 \************************************************************************************/ 292 334 293 335 #sidebar { 336 /* Fuer Positionsangaben siehe #sidebar weiter oben unter 2.content */ 294 337 font-size: 12px; 295 338 /*background-color: #fafafa; geregelt als img für #wrapper */ … … 297 340 } 298 341 299 /* Sprachlink */ 342 /* Sprachlink-Box */ 343 #lang { 344 position: relative; /* fuer absolute Positioniereung drinnen */ 345 height: 41px; 346 } 347 348 /* Zugängliche ausgeschriebene Kommentare ausblenden */ 349 #lang span { 350 display: none; 351 } 352 353 /* Sprachlink-Liste, nur der Semantik wegen eine Liste */ 300 354 #lang ul, #lang li { 301 355 list-style: none; … … 304 358 } 305 359 306 #lang { 307 /* Link auf englische/deutsche Version, auffällig */ 308 margin: 12px 0 20px 0; 309 } 310 360 /* Sprachlink- sowie Anzeige der jetzigen Sprache: */ 361 #lang a, #lang strong { 362 /* Dimensionen fuer den Link + Schriftformatierung */ 363 display: block; 364 position: absolute; 365 width: 108px; 366 /* Höhe beträgt 41px, aber damit Schrift nicht wegen der 6px 367 (in den Banner geschoben) blöd aussieht, diese 6px in der 368 Box wieder kompensieren: */ 369 height: 35px; /* Eigentlich 41, -6px padding = 35px */ 370 line-height: 35px; 371 372 text-align: center; 373 background-position: bottom right; 374 background-repeat: no-repeat; 375 } 376 377 /* englischsprachige(r) Link/Anzeige: */ 378 #lang .en { 379 /* rechts neben dem deutschsprachigen */ 380 left: 102px; 381 } 382 383 /* Anzeige der jetzigen Sprache: */ 384 #lang strong { 385 /* In den Banner "reinschieben", damit Tab-Aussehen zustande kommt */ 386 top: -6px; 387 left: 0px; 388 z-index: 4; /* ueber <h1> darstellen, also ueber Schatten */ 389 390 /* Das blaue Bild hat die Höhe 41px, davon sind 6px im Banner. 391 Damit Text auch mittig ist: */ 392 padding-top: 6px; 393 394 color: white; 395 background-image: url(../img/fresh.design/langbg-on.menu.png); 396 } 397 398 /* Link auf andere Sprache: */ 399 #lang a { 400 top: 0; left: 0; 401 z-index: 2; /* unter <h1> darstellen, also unter Schatten */ 402 background-image: url(../img/fresh.design/langbg.menu.png); 403 404 text-decoration: none; 405 color: black; 406 } 407 408 /* Geehoverter Link auf andere Sprache: */ 409 #lang a:hover { 410 background-image: url(../img/fresh.design/langbg-hot.menu.png); 411 z-index: 5; /* nach ganz oben. */ 412 } 413 414 415 /* 311 416 #lang a, #lang span { 312 417 display: block; … … 314 419 padding: 5px 12px 5px 20px; 315 420 background-color: #fff; 316 /*background-image: url(../img/fresh.design/langbg.menu.png);*/421 **background-image: url(../img/fresh.design/langbg.menu.png);** 317 422 text-decoration: none; 318 423 border: 1px solid #5D7EAB; 319 }320 321 #lang span {322 /* Bevor Entscheidung fuer Sprachlinkdesign getroffen wurde, ausblenden */323 display: none;324 424 } 325 425 … … 329 429 background: #f0c194 url(../img/fresh.design/orangebg.menu.png) repeat-x; 330 430 } 431 */ 331 432 332 433 /* Schriftgroesseneinstellung/Styleswitcher */ … … 348 449 } 349 450 350 351 352 /* Menue */ 451 /* Fussnote fuer die Sidebar*/ 452 453 #sidebar-footnote { 454 /* Container, der in #content steckt und rechts in der Seitenleiste 455 angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund 456 einzugehen. */ 457 position: absolute; 458 /* Position relativ zum inneren padding von #content! */ 459 bottom: 0; 460 right: -230px; 461 width: 230px; 462 } 463 464 #sidebar-footnote a { 465 display: block; 466 padding: 1em; 467 text-align: center; 468 } 469 470 /***********************************************************************************\ 471 ** _ _ ** 472 ** | || | _ __ ___ ___ _ __ _ _ Das Menue mit allen Submenues, den ** 473 ** | || |_ | '_ ` _ \ / _ \ '_ \| | | | aktiven/inaktiven Seiten und Menues ** 474 ** |__ _| | | | | | | __/ | | | |_| | wird an dieser Stelle ausgezeichnet. ** 475 ** |_|(_) |_| |_| |_|\___|_| |_|\__,_| ** 476 ** ** 477 \***********************************************************************************/ 478 479 /* Menü level 1 (Hauptmenü) */ 353 480 #menu ul.l1, #menu li { 354 /* Menue Level1, Hauptmenue */355 481 list-style: none; 356 482 margin: 0; padding: 0; … … 365 491 } 366 492 367 /* Beschreibung aller allgemeinen Links */ 493 /* Beschreibung aller allgemeinen Links. Das simple Linkschema lautet: 494 a = echter link 495 em = Kategorienüberschrift 496 a.on = Seite, auf der man ist (kein Link) 497 */ 368 498 #menu a, #menu em { 369 /* a=link, em=Kategorieueberschrift, a.on=hier ist man */370 499 text-decoration: none; 371 500 display: block; … … 374 503 } 375 504 376 /* Beschreibung der Elemente der Hauptkategorie */ 505 /*111111111111111111111111111111111111111111111111111111111111111111111111111111111*\ 506 **11 HAUPT_KATEGORIE -- MENU LEVEL 1 11** 507 \*111111111111111111111111111111111111111111111111111111111111111111111111111111111*/ 508 509 /* Beschreibung der Elemente der Hauptkategorie. 510 Diese umfassen die Überschriften für Unterkategorien (l2), also em.l2, 511 sowie alle Links auf der Ebene der Hauptkategorie (l1), also li.l1 a. 512 li.l1 a.on bzw. #menu a.on wird hier "nur wegen der margin-top-dominanz" 513 aufgelistet bzw. "muss das hier teilweise überschreiben, siehe weiter unten". 514 */ 377 515 #menu em.l2, #menu li.l1 a:link, #menu li.l1 a:visited, #menu li.l1 a.on { 378 /* die zwei Ueberschriften fuer Hauptunterkategorien & ^--- a.on nur wegen margin-top-dominanz!379 Ausserdem die Links der Hauptkategorie380 Achtung: #menu a.on muss das hier teilweise ueberschreiben, siehe381 weiter unten382 */383 516 margin-top: 15px !important; /* wird sonst von #menu a:link ueberschrieben */ 384 517 /*text-align: right;*/ … … 396 529 397 530 /* Allgemeiner Orange-Hover-Effekt (muss unter li.l1 a stehen) */ 398 #menu a:hover, #menu li.l1 a:hover {531 #menu a:hover, #menu li.l1 a:hover, #menu a:focus, #menu li.l1 a:focus, #menu li.l1 a:active { 399 532 /* alle gehoverten Links */ 400 533 background-color: #F0C494; /*#f0d994*/ … … 406 539 } 407 540 408 #menu li.l1 a:hover { 541 /* Für Links aus der Hauptkategorie: */ 542 #menu li.l1 a:hover, #menu li.l1 a:focus { 409 543 /* Um 1px Rahmen wieder zu ueberschreiben */ 410 544 border-width: 2px; … … 413 547 } 414 548 415 #menu li.long a:hover, #menu li.long3 a:hover { 416 /* fuer mehrzeilige (lange) Links langer Hintergrund */ 417 /* long3 wird zwar bis jetzt nicht mehr genutzt, aber egal.*/549 /* Für mehrzeilige (lange) Links: */ 550 #menu li.long a:hover, #menu li.long3 a:hover, #menu li.long3 a:focus { 551 /* (in der Höhe) langer Hintergrund: */ 418 552 background-image: url(../img/fresh.design/orangebg-long.menu.png); 419 553 } 420 554 555 /*222222222222222222222222222222222222222222222222222222222222222222222222222222222*\ 556 **22 UNTER_KATEGORIE -- MENU LEVEL 2 22** 557 \*222222222222222222222222222222222222222222222222222222222222222222222222222222222*/ 558 559 560 /* Hauptunterkategorie bzw. erstes Unterkategorienlevel bzw. "level 2": */ 421 561 #menu ul.l2 { 422 /* Erstes Unterkategorielevel Abstand von erstem Link 423 kompensieren um direkten Anschluss an die Ueberschrift 424 zu gewaehrleisten */ 562 /* Abstand von erstem Link kompensieren um direkten Anschluss 563 an die Ueberschrift zu gewaehrleisten */ 425 564 /*margin-top: -2px;*/ 426 565 padding: 7px 0; 427 566 } 428 567 568 /* Gehoverte und/oder aktive (=da ist man) Hauptunterkategorie: */ 429 569 #menu li.l2:hover ul.l2, #menu li div.on ul.l2 { 430 /* Unterkategorien gehovert/aktiv - allgemein - Hintergrundfarbe*/570 /* Hintergrundfarbe (halbtransparent): */ 431 571 /*background-color: #DEE5EE;*/ 432 572 background-image: url(../img/fresh.design/catl1-bg.menu.png); 433 573 } 434 574 575 /* Links in der ersten Hauptunterkategorie (Links vom "level 2"): */ 435 576 #menu ul.l2 a { 436 /* Ein bisschen Abstand fuer normale Links*/577 /* Mehr Abstand oben und unten: */ 437 578 margin-top: 1px; 438 579 margin-bottom: 1px; 439 580 } 440 581 582 /* "Besuchte-Seiten-Haeckchen" -- einfaches, aber mächtiges Feature, 583 war leider nicht gewollt. */ 441 584 /* 442 Besuchte-Seiten-Haeckchen letzendlich voellig entfernt :(443 585 #menu ul.l2 a:visited span { 444 586 * Link-Span fuer Haeckchen fuer bereits besuchte … … 454 596 */ 455 597 598 /* Erzeugung der allgemeinen Listenpfeilchen aller Links in Level 2 und 3: */ 456 599 #menu ul.l2 a:link span, #menu ul.l2 a:visited span, #menu li.l3 em span { 457 /* Allgemeine Listenpunkte (kleine blaue Pfeile)*/600 /* kleine blaue Pfeile: */ 458 601 display: block; 459 602 position: absolute; … … 466 609 } 467 610 468 html>body #menu ul.l2 a:hover span { /* IE darf nicht mitmachen, der positioniert anders */ 469 /* position:absolute geht nach border, und der ist jetzt 1px breit */ 611 /* Gehoverte Links: Position der Listenpfeilchen */ 612 html>body #menu ul.l2 a:hover span, html>body #menu ul.l2 a:focus span { 613 /* position:absolute geht nach border, und der ist jetzt 1px breit. 614 Also muss die Position beim Hovern korrigiert werden. Der IE 615 sieht das anders, für ihn also nicht korrigieren. */ 470 616 top: -1px; left: -1px; 471 617 } 472 618 619 /* nicht mehr Pfeil, also stehen lassen. *//* 473 620 #menu ul.l2 a:focus span { 474 /* Ausblenden bei focus -> da kommt der schwarze grosse Pfeil */621 ** Ausblenden bei focus -> da kommt der schwarze grosse Pfeil ** 475 622 display: none; 476 } 477 478 /* Beschreibung der Elemente zur 3. Unterkategorie */ 623 }*/ 624 625 /*333333333333333333333333333333333333333333333333333333333333333333333333333333333*\ 626 **33 UNTER_UNTER_KATEGORIE -- MENU LEVEL 3 33** 627 \*333333333333333333333333333333333333333333333333333333333333333333333333333333333*/ 628 629 630 /* Beschreibung der Elemente zur UnterUnterkategorie (level 3): */ 479 631 #menu li.l3 div { 480 /* Abstand 3. Unterkategorie zu anderen Punkten*/632 /* Abstand der 3. Unterkategorie zu anderen Punkten: */ 481 633 margin: 10px 0; 482 634 } 483 635 636 /* Überschriften der UnterUnterkategorie (level 3): */ 484 637 #menu li.l3 em { 485 /* Ueberschriften der Unterkategorien Level3 */486 638 font-weight: bold; 487 639 font-style: normal; 488 640 color: #224B88; 489 /* siehe auch z.317 direkt hier drueber wegen allgemeinen Listenpunkten */ 490 /* -> nein. keine allgemeinen Listenpunkte mehr. Nur noch runtergehende */ 491 } 492 641 background-image: url(../img/fresh.design/catl2-bg.menu.png); 642 } 643 644 /* Gehoverte oder aktive (=da ist man) Überschrift der UnterUnterkategorie (level 3)*/ 645 #menu li.l3:hover em, #menu li.l3 div.on em { 646 /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */ 647 /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */ 648 background-image: url(../img/fresh.design/headl2-bg.menu.png); 649 color: #000; 650 } 651 652 /* Erzeugung der Runterpfeilchen für Überschriften des level 3: */ 653 #menu li.l3 em span, #menu li.l3 div.on em span { 654 /* Siehe Erzeugung der allgemeinen Listenpfeilchen -- diese Eigenschaften 655 werden hier geerbt. */ 656 /* Icon ist immer runtergefahren */ 657 background-image: url(../img/fresh.design/subarrow.menu.png); 658 background-position: 4px 10px; 659 } 660 661 /* Beschreibung des Blocks der UnterUnterkategorie (level 3): */ 493 662 #menu li.l3 ul { 494 /* Unterkategorien Level3 */495 663 display: block; 496 664 /*margin-top: -2px;*/ … … 502 670 } 503 671 672 /* Gehoverter oder aktiver (=da ist man) Block der UnterUnterkategorie (level 3): */ 504 673 #menu li.l3:hover ul, #menu li.l3 div.on ul { 505 opacity: .99; /* Safari2-Bug: opacity:1 blendet das Ding komplett aus! */ 506 } 507 508 #menu li.l3 em { 509 background-image: url(../img/fresh.design/catl2-bg.menu.png); 510 } 511 512 #menu li.l3:hover em, #menu li.l3 div.on em { 513 /* Ueberschrift der Unterkategorien Level3 -- gehovert oder aktiv */ 514 /*border-bottom: 1px solid #d4d4d4;*/ /* Border ruckelt -- wozu zum Teufel border? */ 515 background-image: url(../img/fresh.design/headl2-bg.menu.png); 516 color: #000; 517 } 518 519 #menu li.l3 em span, #menu li.l3 div.on em span { 520 /* Icon ist immer runtergefahren */ 521 background-image: url(../img/fresh.design/subarrow.menu.png); 522 background-position: 4px 10px; 523 } 524 525 #menu a.on, #menu a.on:hover, #menu a:focus, #menu li.l1 a.on, #menu li.l1 a:focus { /* #menu a.on.l1, #menu a.on.l1:hover */ 674 /* Beim hovern komplett darstellen. */ 675 opacity: .99; 676 /* 99% = Workaround um Safari2-Bug: opacity:1 blendet das Ding komplett aus! */ 677 } 678 679 /*<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<==<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=<=*\ 680 **=> SCHWARZE PFEILE BEI AKTIVEN SEITEN <=** 681 \*=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=>=*/ 682 683 /* hier entfernt: #menu a:focus, #menu li.l1 a:focus, bei Focus nicht Pfeil 684 anzeigen (wegen unterschiedlichen Höhen!) sondern bei dem orangen bg bleiben. */ 685 #menu a.on, #menu a.on:hover, #menu li.l1 a.on { 526 686 /* Formatierung des Dings, wo man gerade ist */ 527 687 /* Dort soll ein schwarzer Pfeil links raushaengen */ … … 535 695 height: 19px; 536 696 /* gegen allgemeines #menu a:hover */ 537 background-color: inherit !important;697 background-color: transparent !important; /* IE7 bug: inherit geht nicht. */ 538 698 border: none !important; 539 699 } 540 700 541 #menu li.long a.on, #menu li.long a.on:hover , #menu li.long a:focus {701 #menu li.long a.on, #menu li.long a.on:hover { /*, #menu li.long a:focus {*/ 542 702 /* Zweizeilige oder dreizeilige Elemente */ 543 703 background-image: url(../img/fresh.design/blackarrow-long.menu.png); … … 547 707 } 548 708 549 #menu li.long3 a.on, #menu li.long3 a.on:hover , #menu li.long3 a:focus {709 #menu li.long3 a.on, #menu li.long3 a.on:hover { /*, #menu li.long3 a:focus { */ 550 710 /* Dreizeilige Elemente */ 551 711 background-image: url(../img/fresh.design/blackarrow-long3.menu.png); … … 553 713 } 554 714 555 #sidebar-footnote { 556 /* Container, der in #content steckt und rechts in der Seitenleiste 557 angeordnet wird und z.B. benutzt werden kann, um auf den Hintergrund 558 einzugehen. */ 559 position: absolute; 560 /* Position relativ zum inneren padding von #content! */ 561 bottom: 0; 562 right: -230px; 563 width: 230px; 564 } 565 566 #sidebar-footnote a { 567 display: block; 568 padding: 1em; 569 text-align: center; 570 } 571 572 573 /****************************************************************************** 574 ** 4. Common Content 575 */ 715 /***********************************************************************************\ 716 ** ____ _ _ Alle Auszeichnungen, die den Inhalt ** 717 ** | ___| ___ ___ _ __ | |_ ___ _ __ | |_ (#content, #page oder .content) ** 718 ** |___ \ / __/ _ \| '_ \| __/ _ \ '_ \| __ betreffen und (nur) dort gelten, ** 719 ** ___) | (_| (_) | | | | || __/ | | | |_ werden in dem folgenden Bereich ** 720 ** |____(_)___\___/|_| |_|\__\___|_| |_|\__| notiert. ** 721 ** ** 722 \***********************************************************************************/ 576 723 577 724 h2 { … … 595 742 } 596 743 597 /* 598 Links mit Pfeilen: a.go & a.arrow 599 entweder mit Bildern oder mit »-Dooppelpfeil 600 */ 601 744 /*>> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> *\ 745 **>> DOPPEL-PFEILCHEN BEI LINKS UND LISTEN <<** 746 **>> a.go & a.arrow <<** 747 \* << << << << << << << << << << << << << << << << << << << << << << << << << << <<*/ 748 749 /* Alternative Form, Bilder sehen aber schöner aus: */ 602 750 /*a.arrow:before, a.go:before { 603 751 content: "»"; … … 637 785 638 786 /* Navigationslisten: <ul class="nav">/<ul id="nav"> 639 werden im Prinzip nur von Extraseiten (/de/geraete) verwendet 787 werden im Prinzip nur von Extraseiten (/de/geraete) verwendet, 788 und da es seit v5.8 auch die in dem Sinne nicht mehr gibt, sind 789 diese Listen OBSOLET. 640 790 */ 641 791 … … 667 817 } 668 818 669 670 /****************************************************************************** 671 ** 5. FOOTER, COPYRIGHT 672 */ 673 819 /***********************************************************************************\ 820 ** __ __ _ ** 821 ** / /_ / _| ___ ___ | |_ ___ _ __ Der Footer (#footer) sowie der ** 822 ** | '_ \ | |_ / _ \ / _ \| __/ _ \ '__| obligatorische Copyright-Hinweis werden ** 823 ** | (_) || _| (_) | (_) | || __/ | hier ausgezeichnet. Der Footer kann seit ** 824 ** \___(_)_| \___/ \___/ \__\___|_| v5.8 mehrere Backlinks enthalten. ** 825 ** ** 826 \***********************************************************************************/ 827 828 /* Seitenrelationenleiste ganz unten: */ 674 829 #footer { 675 /* Seitenrelationenleiste ganz unten */676 830 clear: both; padding: 0; 677 831 font-size: 12px; … … 693 847 * html #footer { height: 58px; } /* Damit IE keinen Quatsch macht */ 694 848 695 #footer .border { 696 /* Legacy zwecks Kompatibilitaet zu screen.css */ 849 /* .border: Legacy zwecks Kompatibilitaet zu screen.css 850 span: Dummyelement für IE6-Kompatibilität (vgl. fresh-iefixing.css) */ 851 #footer .border, #footer span { 697 852 display: none; 698 853 } 699 854 700 855 #footer ul, #footer li { 856 /* Alle Listen-Eigenschaften abschalten. */ 701 857 list-style: none; 702 858 margin: 0; padding: 0; … … 749 905 } 750 906 751 #footer span { 752 /* Dummyelement für IE6-Kompatibilität */ 753 display: none; 754 } 755 907 /* Copyright-Hinweis. */ 756 908 #copyright { 757 909 background-color: #fff; /* um bodybg auszublenden */ … … 765 917 } 766 918 767 768 /* EOF */ 919 /***********************************************************************************\ 920 ** __ ** 921 ** ___ ___ / _| eof -- end of file. ** 922 ** / _ \/ _ \| |_ Bitte beachten sie: Das technikum29-Design unterliegt dem ** 923 ** | __/ (_) | _| Copyright. Wenden sie sich bei Anfrage auf Benutzung bitte ** 924 ** \___|\___/|_| an development $$ technikum29.de ($$ durch ein @ ersetzen) ** 925 ** ** 926 \***********************************************************************************/ -
Property
svn:keywords
set to
Note: See TracChangeset
for help on using the changeset viewer.