Absatzes übernommen wird ! */ color: inherit; /* Sonst wird sie einfach nicht geerbt wenn 'fett' oder 'kursiv' gesetzt !!?? */ } body { background-color: rgb(230,250,255); margin-top: 6px; margin-right: 12px; margin-bottom: 6px; margin-left: 12px; } button:hover { /* Für alle Buttons, z.B. für die Wahl einer Unterseite */ font-weight: bold; } select:hover { /* Für alle Dropdowns, z.B. für die Wahl einer Sammlung */ font-weight: bold; } input:hover { /* Für alle Eingabe-Felder, z.B. für die Anzahl Bilder pro Seite */ font-weight: bold; } input[type=checkbox]:hover { /* Für alle Checkbox-Eingaben, z.B. für das 'JavaScript zulassen' */ transform: scale(1.5, 1.5); /* da keinen Text => vergrössern */ } input[type=radio]:hover { /* Für alle Radiobutton-Eingaben, z.B. ... noch nicht benutzt ... */ transform: scale(1.5, 1.5); /* da keinen Text => vergrössern */ } a:hover { /* Für alle Links, z.B. für die Wahl der 'Pagination'-Bilder */ font-weight: bold; } a > img:hover { /* Für alle Links mit Bild, z.B. für Bild rückwärts/vorwärts */ transform: scale(1.15, 1.15); /* ">" is a 'CSS combinator', it is the 'child selector' */ } .dk-h1-span { font-size: 130%; font-style: italic; text-shadow: 2px 2px 2px grey; color: white; background-color: rgb(210,230,255); padding: 10px; } .dk-h2-div { font-size: 120%; width: 72%; background-color: rgb(210,230,255); padding: 0px 1px 0px 1px; } .dk-table-div { padding: 5px; border: 2px solid #DDDDDD; margin-right: 5px; margin-bottom: 5px; display: inline-block } table { border: 2px solid #DDDDDD; border-collapse: collapse } th { padding: 5px; text-align: left; background-color: #DDDDDD } td { padding-left: 5px; border-bottom: 1px solid #DDDDDD } /* Für das Dropdown und die Checkboxes der 'Configbar' */ .dk-div-configbar { float: right; background-color: rgb(255,230,250); margin: 4px 0px 4px 18px; border: 1px solid; border-color: #DDDDDD; padding: 8px; } .dk-div-configbar-login { float: right; background-color: rgb(250,250,170); margin: 4px 0px 4px 18px; border: 1px solid; border-color: #DDDDDD; padding: 8px; } /* Für die Butttons der 'Navigbar' */ .dk-btn-navigbar { float: left; background-color: rgb(255,230,250); margin: 4px 18px 4px 0px; padding: 8px; } .dk-btn-navigbar-infos { float: left; background-color: rgb(220,255,220); margin: 4px 18px 4px 0px; padding: 8px; } .dk-btn-navigbar-close { float: left; background-color: rgb(220,220,220); margin: 4px 18px 4px 0px; padding: 8px; } /* Für die Paginationsbereiche */ .dk-txt-pagination-normal { float: left; margin: 4px 10px 4px 0px; padding: 4px; } .dk-txt-pagination-marker { float: left; margin: 4px 10px 4px 0px; padding: 4px; background-color: rgb(190,210,255); } /* Die kleinen Bilder, die 'aufblasen' (siehe auch übernächste Definition) */ .dk-img-small-blowup { float: left; height: 100px; position: relative; margin-right: 12px; margin-bottom: 9px; cursor: pointer; opacity: 0.9; } .dk-img-small-blowup:hover { transition: 0.3s ease; transform: scale(1.15, 1.15); opacity: 1; } .dk-img-small-border-light { border: 1px solid gray; } .dk-img-small-border-strong { border: 3px solid rgb(127,0,255); } .dk-div-small-for-pdf { float: left; height: 94px; width: 120px; background-color: rgb(255,255,250); padding: 3px; word-break: break-all; } .dk-div-small-for-url { float: left; height: 94px; width: 120px; background-color: rgb(250,255,255); padding: 3px; word-break: break-all; } .dk-div-small-for-3D { float: left; height: 94px; width: 120px; background-color: rgb(255,250,255); padding: 3px; word-break: break-all; } /* Das Haupt-Div für das grosse Bild soll 80% des Bildschirms belegen */ .dk-div-main-block { display: inline-block; float: left; text-align: center; /* width: 80%; */ height: auto; } /* @media screen and (min-width: 1000px) */ /* @media screen and (min-aspect-ratio: 16/9) */ /* @media screen and (orientation: landscape) */ /* http://www.w3.org/TR/css3-mediaqueries/#orientation */ @media screen and (min-width: 1000px) { .dk-div-main-block { width: 80%; } } /* @media screen and (max-width: 1000px) */ /* @media screen and (max-aspect-ratio: 16/9) */ /* @media screen and (orientation: portrait) */ /* http://www.w3.org/TR/css3-mediaqueries/#orientation */ @media screen and (max-width: 1000px) { .dk-div-main-block { width: 100%; } } /* Das Bild selber soll 80% von den 80% des 'Main'-Divs belegen => ~64% (0.80*0.80) des Bildschirms bzw. 80% von den 100% des 'Main'-Divs belegen => ~80% (0.80*1.00) des Bildschirms */ .dk-div-image-block { display: inline-block; vertical-align: middle; width: 80%; height: auto; } /* Die Pfeile links und rechts sollen jeweils 9% von den 80% des 'Main'-Divs belegen => ~7% (0.09*0.80) des Bildschirms bzw. jeweils 9% von den 100% des 'Main'-Divs belegen => ~9% (0.09*1.00) des Bildschirms */ .dk-div-arrow-block { display: inline-block; vertical-align: middle; width: 9%; height: auto; } /* Für die 'Landscape'-Bilder (es entspricht dem 'normal' Fall) soll die "width" angegeben werden, */ /* nicht die "max-width", sonst werden die Bilder schmaller wenn die Höhe verkleinert wird. */ /* Für die 'Portrait'-Bilder sollen die Breite und die Höhe angegeben werden, damit das Bild durch */ /* die gegebene Breite (98%) nicht zu hoch wird. Aber Achtung, wenn für ein Bild die Breite */ /* und die Höhe angegeben werden sollen, müssen beide Werte als 'max' formuliert werden, also */ /* "max-width" und "max-height", sonst wird das Bild verzerrt beim vergrössern / verkleinern. */ /* Für die 'PDF' und die 'URL' muss die "width" angegeben werden, nicht die "max-width", sonst ist */ /* das was im Browser angezeigt wird sehr schmall; siehe weiter unten noch ".dk-img-large-height". */ /* Das Haupt-Bild soll das 'Image'-Div komplett füllen (98% anstatt 100% damit es mit den Rändern trotzdem zentriert ist) */ .dk-img-large-basis { /* height: auto; */ /* 'auto' ist Default; wenn es nicht explizit angegeben wird, kann es noch überschrieben werden */ vertical-align: middle; margin-top: 6px; margin-bottom: 6px; border: 2px solid; border-color: #2020FF; border-radius: 2%; } .dk-img-large-normal { /* Für Bilder entspricht es 'Landscape' */ width: 98%; } .dk-img-large-portrait { max-width: 98%; max-height: 90vh; } /* Die Höhe für 'PDF' und 'URL' kann leider nicht in "%" angegeben werden, funktioniert nicht ... */ /* Sie kann aber in "%" vom 'Viewport' (Browser Window Size) angegeben werden -> viewport height (vh) */ .dk-img-large-pdfurl { width: 98%; height: 90vh; } /* Die Höhe bei 'i-frames' ist nicht wie bei einem Bild abhängig von der Breite, sie soll explizit */ /* angegeben werden ... Ich habe es mit verschiedenen Varianten probiert: */ /* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */ /* 1. Variante: Mit '@media' und 'Viewport' der Höhe -> viewport height (vh) */ /* ----------- => die Höhe des 'i-frame'-Fensters ändert nicht proportional zur Breite */ /* des 'i-frame'-Fensters, sie ist immer propotional zur Bildschirmhöhe. */ @media screen and (orientation: landscape) { .dk-img-large-iframe { width: 98%; height: 78vh; } } @media screen and (orientation: portrait) { .dk-img-large-iframe { width: 98%; height: 32vh; } } /* 2. Variante: Mit 'Viewport' der Breite -> viewport width (vw) */ /* ----------- => die Höhe des 'i-frame'-Fensters ändert proportional zur Breite aber der 'div' mit */ /* dem Text ist, abhängig von der Bildschirmbreite, entweder nebenan oder darunter, */ /* was dazu führt, dass es nicht bei jeder Breite derselben Proportion entspricht. */ /* .dk-img-large-iframe { width: 98%; height: 38vw; } */ /* 3. Variante: Mit einem zusätzlichen Behälter 'div', der richtig dimensioniert ist und welcher */ /* ----------- dann das 'i-frame' beinhlatet. */ /* => Es ist es mir nicht gelungen, das 'div' vollständig mit dem 'i-frame' zu füllen !? */ /* Anscheinend funktioniert es nur mit einem internen 'div', der in einem externen */ /* 'div' ist aber nicht mit einem internen 'i-frame' in einem externen 'div' ... */ /* -> Externes 'div':