Zur Navigation

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 ?

15.12.2007 14:04 | geändert: 15.12.2007 14:05

2 Jörg

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;}

15.12.2007 14:25 | geändert: 15.12.2007 14:26

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>

15.12.2007 14:41

4 Jörg

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>

15.12.2007 15:06 | geändert: 15.12.2007 15:06

5 Simon

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

17.12.2007 17:42

6 Jörg

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;
}

17.12.2007 18:12 | geändert: 17.12.2007 18:13

Beitrag schreiben (als Gast)





[BBCode-Hilfe]