nicht angemeldet
Zeige background-image nur wenn, wenn min-height ausgenutzt wird?
0 0 
Gunnar Bittersmann
Zeige background-image nur wenn, wenn min-height ausgenutzt wird?
Guten Abend,
ich möchte gerne ein Overlay erstellen für Inhalte die zu groß werden. Die erste Idee war, die Texte einfach auf 150 Zeichen zu kürzen, was aufgrund von BBCodes aber nicht so gut funktioniert. Eine weitere Idee war, einfach ein Overlay drüber zu legen, wenn die Box 150px Höhe erreicht hat. Leider funktioniert mein Ansatz nicht, da das Hintergrundbild unten ist, selbst wenn es nicht die Höhe erreich hat.
Mein Ansatz:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#outer, #overlay {
max-height: 200px;
}
#outer {
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(overlay.png);
background-position: bottom;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="outer">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
<div id="overlay">
</div>
</div>
</body>
</html>
Ist es so überhaupt möglich oder werde ich auf JavaScript zurückgreifen müssen?
Besten Dank Christian
-
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.
-
... es stellt sich mir überhaupt die Frage, ob dein Vorhaben sinnvoll ist, wenn das Ganze responsive sein soll. Dann hast du's ja je nach viewport width mit anderen Abmessungen des Containers zu tun. Wahrscheinlich ist es dann besser du gehst auf die Textlänge. Da ersparst du dir auch jede Menge Javascript Schnickschnack.
Und ... es besteht ja noch die Möglichkeit, dass ich dich vollkommen falsch verstanden habe :)
-
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.
Es geht primär darum, dass auf dem mobilen Entgerät 4 Boxen angezeigt werden sollen, Antworten für ein Quiz. Allerdings will ich das gerne Einschränken, sobald man anfangen muss zu scrollen. Meine Idee war, wenn eine bestimmte Höhe erreicht wird, dann soll es gekürzt werden. Leider nutze ich ein LaTeX-Framework sowie BB-Codes, welche etwas schwieriger sind zu kürzen. Leider. Hmm...
Randbemerkung:
- in HTML5 brauchst du kein Attribut "type" mehr. <style></style> reicht.
SublimeText hat mir das generiert. g Aber du hast natürlich Recht! :) Danke
- 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.
Mein Overlay hier ist ein Bild was vom Transparenten zum Weißen übergeht.
- 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.
Ja, sehr gute Idee! Ich hatte bisher noch nicht so viel mit before und after gemacht, das ist aber eine sehr gute Idee!
-
@@Christian
Meine Idee war, wenn eine bestimmte Höhe erreicht wird, dann soll es gekürzt werden.
CSS:
max-height.Mein Overlay hier ist ein Bild was vom Transparenten zum Weißen übergeht.
Meinst du sowas in der Art? Pure CSS scrolling shadows with
background-attachment: localLLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
@@Christian
Meine Idee war, wenn eine bestimmte Höhe erreicht wird, dann soll es gekürzt werden.
CSS:
max-height.Öm, das habe ich doch gemacht? :D
Meinst du sowas in der Art? Pure CSS scrolling shadows with
background-attachment: localDas sieht sehr gut aus! Danke für den Link, ich kannte local noch nicht.
Lebe lang und in Frieden!
-
-
@@Christian Thomas
Guten Abend,
ich möchte gerne ein Overlay erstellen für Inhalte die zu groß werden.
Ich kann mir darunter nichts vorstellen. Kannst du nochmal beschreiben oder aufmalen, wie’s aussehen soll: bei Inhalt, der in die Box passt und bei Inhalt, der nicht reinpasst?
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Ich kann mir darunter nichts vorstellen. Kannst du nochmal beschreiben oder aufmalen, wie’s aussehen soll: bei Inhalt, der in die Box passt und bei Inhalt, der nicht reinpasst?
Schau dir das mal an: http://imgur.com/a/gV55P
Mein Problem ist einfach, dass ich sonst LaTeX-Formeln oder Code-Tags anschneiden könnte, daher möchte ich es gerne mit so einem Overlay machen.
-
Schau dir das mal an: http://imgur.com/a/gV55P
Ok, wenn das so aussehen soll, dann ist meine Antwort hinfällig. Ich hab dich falsch verstanden. Dann geht's auch mit CSS und so, wie Gunnar es beschrieben hat.
-
-