nicht angemeldet
:before Grafiken "skalieren" ?
Gunnar BittersmannHi,
auf der Suche nach Möglichkeiten um kleine Grafiken vor bestimmte Elemente zu platzieren habe ich gerade :before (und :after) kennengelernt.
Die Größe dieser Grafiken ist wohl aber bestimmt durch die Zeilenhöhe?
Lässt sich die Größe nur dieser Grafik, bzw. die Anzeige irgendwie korrekt beeinflussen?
-
Hallo,
auf der Suche nach Möglichkeiten um kleine Grafiken vor bestimmte Elemente zu platzieren habe ich gerade :before (und :after) kennengelernt.
Die Größe dieser Grafiken ist wohl aber bestimmt durch die Zeilenhöhe?
Nein.
Lässt sich die Größe nur dieser Grafik, bzw. die Anzeige irgendwie korrekt beeinflussen?
Elemente, die mit :before und :after eingefügt werden, sind keine IMG-Elemente, auch wenn sie Bilder zum Inhalt haben. Der Inhalt wird deshalb auch nicht, wie bei IMG-Elementen, skaliert, wenn man die Größe dieser Elemente ändert. Man kann aber die Größe der Elemente durchaus ändern, soweit die display-Eigenschaft das Interpretieren der width- und height-Eigenschaften zulässt. Nur wird das Bild eben dadurch nicht skaliert, sondern verhält sich eher wie ein Hintergrundbild.
Die display-Eigenschaft erhalten per :before und :after eingefügte Elemente aus ihrem Kontext. Das das meist inline-Kontexte sind, muss man die display-Eigenschaft eben explizit setzten, wenn man keine inline-Elemente möchte.
Die initiale Größe der Elemente ergibt sich aus dem Inhalt. Bei Bildern ist das Element dann also erst Mal so groß wie das Bild. Ändert man die Größe, wird dadurch zwar die Elementgröße geändert, nicht aber die Inhaltsgröße. Bei entsprechender Einstellung von overflow (visible) ist der Inhalt deshalb ggf. auch außerhalb der Elementbegrenzungen sichtbar.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>:before mit content Bild</title> <style type="text/css"> * { margin:0; padding:0 } p:before { content:url(http://src.selfhtml.org/logo.gif); display:inline-block; vertical-align:middle; /* width:50px; height:50px; */ /* overflow:hidden; */ } </style> </head> <body> <h1>Test</h1> <p>Test<br>Test</p> <h2>Test</h2> </body> </html>UM zu sehen, was ich oben beschreiben habe, bitte zu erst die Auskommentierung von width, height entfernen und das Ergebnis betrachten, dann den Kommentar um overflow entferen.
viele Grüße
Axel
-
Hallo,
auf der Suche nach Möglichkeiten um kleine Grafiken vor bestimmte Elemente zu platzieren habe ich gerade :before (und :after) kennengelernt.
Die Größe dieser Grafiken ist wohl aber bestimmt durch die Zeilenhöhe?
Nein.Lässt sich die Größe nur dieser Grafik, bzw. die Anzeige irgendwie korrekt beeinflussen?
Elemente, die mit :before und :after eingefügt werden, sind keine IMG-Elemente, auch wenn sie Bilder zum Inhalt haben. Der Inhalt wird deshalb auch nicht, wie bei IMG-Elementen, skaliert, wenn man die Größe dieser Elemente ändert. Man kann aber die Größe der Elemente durchaus ändern, soweit die display-Eigenschaft das Interpretieren der width- und height-Eigenschaften zulässt. Nur wird das Bild eben dadurch nicht skaliert, sondern verhält sich eher wie ein Hintergrundbild.Die display-Eigenschaft erhalten per :before und :after eingefügte Elemente aus ihrem Kontext. Das das meist inline-Kontexte sind, muss man die display-Eigenschaft eben explizit setzten, wenn man keine inline-Elemente möchte.
Die initiale Größe der Elemente ergibt sich aus dem Inhalt. Bei Bildern ist das Element dann also erst Mal so groß wie das Bild. Ändert man die Größe, wird dadurch zwar die Elementgröße geändert, nicht aber die Inhaltsgröße. Bei entsprechender Einstellung von overflow (visible) ist der Inhalt deshalb ggf. auch außerhalb der Elementbegrenzungen sichtbar.
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>:before mit content Bild</title>
<style type="text/css">- { margin:0; padding:0 }
p:before {
content:url(http://src.selfhtml.org/logo.gif);
display:inline-block;
vertical-align:middle;
/*
width:50px;
height:50px;
/
/
overflow:hidden;
*/
}
</style>
</head>
<body>
<h1>Test</h1>
<p>Test<br>Test</p>
<h2>Test</h2>
</body>
</html>> > UM zu sehen, was ich oben beschreiben habe, bitte zu erst die Auskommentierung von width, height entfernen und das Ergebnis betrachten, dann den Kommentar um overflow entferen. > > viele Grüße > > Axel Hallo, super Erklärung! Vielen Dank!
-
-
@@uliII:
nuqneH
Lässt sich die Größe nur dieser Grafik, bzw. die Anzeige irgendwie korrekt beeinflussen?
Ja. Du gibst als Wert für die 'content'-Eigenschaft nicht den URI der Grafik an, sondern ein NBSP als CSS-Escape: "\A0 " (damit das '::before'- bzw. '::after'-Pseudoelement überhaupt dargestellt wird).
Damit 'width' und 'height' wirken, 'display' wie gehabt auf einen geeigneten Wert setzen.
Die Grafik setzst du als Hintergrundbild des Pseudoelements, dann können sie moderne Browser auch sklalieren. [CSS3-BACKGROUND §3.9]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)