Text punktgenau markieren

Ein Befehl reicht im Grunde


Der Artikel besteht aus 357 Wörtern. Geschätzte Lesezeit: 01:25 Minuten

wordpress-Bildschirm

Ich hatte ja vor kurzer Zeit geschrieben, das ich Euch jetzt über eine Anzeige in der Sidebar sowie auf der Index- und der jeweiligen Artikelseite darüber informieren lasse, wenn - und wann - ein Artikel geändert wurde.

Was mich dabei allerdings gestört hat, war die Tatsache, das ich in der style.css bei der Formartierung einen festen width-Wert für die Länge der Markierung meinte angeben zu müssen.

Mein Wissen reichte gerade einmal, um folgenden Code zu basteln:

.aktualisiert {font-size:14px; width:260px; background:#f5f4f0; text-decoration:underline;}

den ich dann in die index.php eingebaut habe:

Das sah dann wie folgt aus:

Der Hinweis, das ein Artikel aktualisiert wurde, ist kürzer als die Markierung
Die Markierung für den Hinweis zur Artikel-Aktualisierung ragt über den Textbereich für die Datumsangabe hinaus

Man kann glaube ich sehr gut erkennen, das der Text oben die Markierung fast ganz ausfüllt während die Markierung im unteren Beispiel schon doppelt so weit über den Text hinaus ragt! Dieser Umstand hat mich mit der Zeit durchaus tierisch genervt! Also fragte ich mal kurzerhand bei den Jungs von Seitenreport nach, ob man den Wert nicht variabel gestalten könnte. Schließlich hatten die mir nicht erst einmal ordentlich unter die Arme gegriffen beim Versuch zu Programmieren!

Und in der Tat: Man kann die Markierung variabel an die Ausgabe anpassen! Mit dem folgenden Befehl erledigt man die Sache im Handumdrehen: In die style.css fügt man folgenden Befehl ein:

.dateFormatter{ width: 40px // || 100% }

Die Ausgabe wird mit diesem Befehl ergänzt, respektive das 'div class' damit ersetzt:

.aktualisiert{font-size:14px; width:260px; background:#xyz; text-decoration:underline;}

(wobei xyz natürlich durch die Farbe ersetzt werden muss, in der man die Markierung haben möchte.), so das sich jetzt folgende Befehlszeile ergibt:

...

Und schon hat man eine Ausgabe die sich der Länge der Ausgabe anpasst!

Hinweismarkierung passt sich dem Text an
Die Markierung ist Deckungsgleich mit dem Text

Ich hoffe, das ich dem einen oder anderen damit einen Denkanstoß geben oder auch weiterhelfen konnte, sofern er denn vor der selben Fragestellung stand oder steht wie ich!

Marcus
Über Marcus 707 Artikel
Ich freue mich über Deinen Besuch auf meinem Blog! Wenn Dir der Artikel gefallen hat, teile ihn doch mit anderen und hinterlasse Deine Meinung. Mehr über mich gibt es hier zu lesen

2 Kommentare

  1. Hab ich mir mal unter meinen Tutorials abgespeichert.
    Vor ein paar Wochen hätte ich das mal brauchen können, weiß aber nicht mehr wofür, hat sich also scheinbar erledigt 🙂

Kommentar hinterlassen

E-Mail Adresse wird nicht veröffentlicht.


*


CommentLuv - verlinke einen deiner Blog-Artikel