nicht angemeldet
Hallo,
Ist es so überhaupt möglich oder werde ich auf JavaScript zurückgreifen müssen?
Da wirst du um Javascript nicht rumkommen. Das ist auch im Sinne von Separation of Concerns nicht weiter schlimm, schließlich handelt es sich ja um eine Funktion/Verhalten, (if #outer width > 150px doSomething) das auch in Javascript abgebildet gehört.
Allerdings ist das Ganze ein bisschen frickelig umzusetzen, wenn es responsive und performant sein soll. Die Höhe deines Containers ändert sich ja beim resizen:
- Wenn du mehrerer solcher Container auf einer Seite hast solltest du das resize Event Debouncen/Throtteln.
- Weiters kannst du die Funktion, soll sie denn präzise sein, nicht bei document ready aufrufen, da zu diesem Zeitpunkt noch nicht sichergestellt ist, dass alle fonts geladen sind. Entweder window load, oder du schreibst dir ein script, das erkennt, wenn Fonts geladen sind.
Randbemerkung:
- in HTML5 brauchst du kein Attribut "type" mehr. <style></style> reicht.
- wenn das Overlay einfarbig (z.B.: Text ausgrauen) ist kannst du auch background-color: rgba(DEINEFARBE); wählen. Das spart dir u.U. einen Request.
- ich würde das Overlay mit einer CSS-Pseudoklasse ::before, oder ::after erstellen, anstatt dafür ein eigenes DIV herzunehmen. Das Overlay fällt für mich unter styling/Präsentation, nicht unter Struktur/Content.
lg ... und ja, mein Denglisch stört mich auch.
Gunnar Bittersmann