nicht angemeldet
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
Gunnar Bittersmann