CSS - Angepinnte Beiträge direkt mit Zeichen

1 Simon

a.threadPinnedLink:link {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:visited {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:hover {text-decoration:none; color:#FF0000;}
a.threadPinnedLink:active {text-decoration:underline; color:#FF0000;}

Ich brauche einen Code, den ich ins CSS einbauen kann, dass direkt, wenn man ein angepinntes Thema (wichtiges Thema) eröffnet wird, dass dann auch dort ein "Icon" auftaucht, also direkt Links neben dem Titel, muss man einfach bei "text-decoration" z.B. ein .gif einsetzten ?

2 Jörg Kruse

Hallo Simon,

du kannst das Icon als Hintergrundbild einbinden, also mit der CSS-Eigenschaft background-image. Damit die Grafik nicht überdeckt wird, sollte zusätzlich ein padding-left definiert werden in mindestens der Breite des Icons. Beispiel:

a.threadPinnedLink:link {text-decoration:none; color:#0000FF; background-image:url(bilder/icon.gif);padding-left:15px;}

3 Simon

Super, also das mit dem .gif klappt schon mal :) Nur es ist jalt über bzw. unter dem Titel des Threads, wo soll ich den Code einsetzten aus deinem Link ??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-image</title>
</head><body style="background-image:url(background1.gif)">

<div style="background-image:url(background2.gif); margin:0px; padding:10px">
<h1 style="text-align:center;color:#FFFFCC">Willkommen im Reich der Texturen!</h1>

<div style="background-image:url(background3.jpg); margin:30px; padding:10px">
<h2 style="text-align:center;color:#804000">Willkommen im Reich der Texturen!</h2>

</div></div>

</body></html>

4 Jörg Kruse

Wenn du die Überschriften mit dem Icon versehen möchtest, dann müssen h1 bzw. h2 diese Eigenschaften erhalten. Also z.B.:

<h1 style="text-align:center;color:#FFFFCC; background-image:url(icon.gif);padding-left:15px;">Willkommen im Reich der Texturen!</h1>

5 Simon

Aber wo genau muss ich das einsetzten, ich hab einmal den CSS und einmal den Forencode (getrennt) ??

6 Jörg Kruse

Du meinst, das CSS ist in einer externen CSS-Datei eingebunden?

Du kannst dies auch zentral definieren:

h1 {
background-image:url(icon.gif);
padding-left:15px;
}

Allerdings werden dann alle h1 so formatiert. Wenn nur ein Teil der h1 so formatiert werden soll, muss hierfür eine Klasse definiert werden, z.B.:

<h1 style="text-align:center;color:#FFFFCC" class="pinned">Willkommen im Reich der Texturen!</h1>

h1.pinned {
background-image:url(icon.gif);
padding-left:15px;
}

nach oben

CSS - Angepinnte Beiträge direkt mit Zeichen

Beitrag schreiben (als Gast)