Text blinkend

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Text blinkend

Post by Cremling1 » Wed Feb 17, 2016 12:58 pm

Hallo,

ist es möglich, wenn ich etwas im Blog bekannt machen will, eine bestimmte Textstelle blinkend darzustellen?
Das einfache <blink></blink> wird nicht angenommen.

Gruß
Cremling1

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Wed Feb 17, 2016 1:56 pm

Cremling1 wrote:Das einfache <blink></blink> wird nicht angenommen.
Mit gutem Grund. <blink> ist ein veraltetes HTML-Element, das nicht mehr Bestandteil der HTML-Spezifikation ist. Konkret gesagt unterstützt es kein Browser mehr, u.a. weil es Auswirkungen auf Benutzer mit Epilepsie und kognitiven Einschränkungen haben kann. (Es gibt im Prinzip eine Möglichkeit, das gleiche mit einem <span>, einer Klasse und der CSS-Anweisung text-decoration zu erreichen, aber auch da gibt es bereits Browser, in denen der betreffende CSS-Wert wirkungslos bleibt.)

Ich empfehle, komplett darauf zu verzichten. Alles, was Du noch tun könntest, um mit Gewalt blinkenden Text zu erzwingen, ist übermäßig viel Aufwand und/oder in einer s9y-Umgebung nicht updatesicher umzusetzen (mal ganz davon abgesehen, dass es gute Gründe gegen blinkenden Text gibt). Es gibt andere native Möglichkeiten, Textpassagen hervorzuheben (z.B. die Elemente <em> und <strong>).

Eine gute Möglichkeit, das in einem Blog zu tun, ist natürlich ein Blogeintrag, am besten ein “sticky entry” (dafür brauchst Du das Plugin „Erweiterte Eigenschaften von Einträgen“), der längere Zeit als erster erscheint.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Wed Feb 17, 2016 5:04 pm

Danke für die schnelle Antwort.
Nur <strong> und <em> eignen sich nicht vorrangig, um etwas wirksam hervorzuheben, weil in einem Text des öfteren <strong> geschrieben wird.
Aber vielleicht probiere ich es mal mit einer "bunten" Schrift, vielleicht dann auch noch "strong" ;-).

Gruß
Cremling1

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Wed Feb 17, 2016 9:06 pm

Cremling1 wrote:Aber vielleicht probiere ich es mal mit einer "bunten" Schrift, vielleicht dann auch noch "strong" ;-).
Wird gemeinhin nicht empfohlen, farbiger Text (im Fließtext) sollte Hyperlinks vorbehalten sein. That being said – Du kannst natürlich sowas machen wie <strong class="announcement">…</strong> und dem dann z.B. Farbe geben usw.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Thu Feb 18, 2016 10:50 am

Also ich habe das Problem jetzt so gelöst:
<span style="font-size: 12px; color: rgb(255, 0, 0);">Text</span>
und es ist zufriedenstellend. :D
Danke für die Tipps. :idea:

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Thu Feb 18, 2016 3:12 pm

Cremling1 wrote:Also ich habe das Problem jetzt so gelöst:
<span style="font-size: 12px; color: rgb(255, 0, 0);">Text</span>
und es ist zufriedenstellend. :D
Das Ergebnis mag zufriedenstellend sein, der Weg dahin ist, nun ja, suboptimal.

1. font-size in px ist zwar heute unproblematischer als noch vor ein paar Jahren, als es noch mehr Browser gab, die in px gesetzte Schrift nicht vergrößern konnten, aber es ist trotzdem empfehlenswert, Schriftgrößen in relativen Einheiten (rem, em, %) zu setzen. (In den meisten Browsern und Themes sind 12px = .75em.)
2. Eine simple Farbe wie rot als rgb-Farbwert anzugeben, wo #f00 gereicht hätte, naja …
3. Dann musst Du jedes Mal, wenn Du diesen Text verwendest (ich ahne schon die Antwort „Das brauch ich ja nur einmal!“), all das da tippen. Simpler wäre eine CSS-Klasse, die Du immer wieder und auch an anderen Stellen verwenden kannst.

Code: Select all

.anncouncement {
    color: #f00;
    font-size: .75em;
}
Und dann halt <span class="announcement">…</span>.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Thu Feb 18, 2016 6:17 pm

Besten Dank für die Tipps !!

Beste Grüße
Cremling1

PS: noch eine kurze Frage, gibt es eine einfache Möglichkeit, auf einer statischen Seite so eine Art Adressverzeichnis (vlt. 30 Adressen) anzulegen? Vielleicht sogar ein PlugIn ?? Oder nur mit einer Tabelle, was doch etwas umständlich ist.

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Thu Feb 18, 2016 7:47 pm

Cremling1 wrote:gibt es eine einfache Möglichkeit, auf einer statischen Seite so eine Art Adressverzeichnis (vlt. 30 Adressen) anzulegen? Vielleicht sogar ein PlugIn ?? Oder nur mit einer Tabelle, was doch etwas umständlich ist.
Nicht dass ich wüsste. Das ist halt keine übliche Anwendung für ein Blog, und wir neigen in der Entwicklung (nicht nur von Plugins) dazu, uns auf typische Anwendungen zu konzentrieren.

Theoretisch kannst Du natürlich in statischen Seiten im Inhaltsbereich alles machen, was mit HTML und/oder einem WYSIWYG-Editor (falls Du einen benutzt) geht. Aber auch da gibt es kein „bequemes“ Element für sowas. Eventuell ist eine description list da praktischer als eine Tabelle, weil man etwas weniger Markup schreiben muss, aber dafür sind die Möglichkeiten, wie man das gestalten kann, ggf. limitiert.

Code: Select all

<dl>
<dt>Max Mustermann</dt>
<dd>Musterstraße 1</dd>
<dd>23456 Musterstadt</dd>
<dt>Moritz Mustermann</dt>
<dd>Musterweg 12</dd>
<dd>67890 Musterhausen</dd>
<dl>
(Ja, zu einem dt dürfen mehrere dd zugewiesen sein.)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Fri Feb 19, 2016 8:19 am

Danke, für die optisch ansprechende Lösung.
Nur sie hat einen Nachteil, nämlich bei 30 oder vlt. noch ein paar mehr Adressen wird sie relativ lang nach "unten" und in der Horizontalen "verschenke" ich den Platz, wenn Du weißt, was ich meine.
Besser wäre eine Lösung, eine Adresse mit Telefonnummer in eine Zeile und die nächste Adresse in eine nächste Zeile vielleicht mit leicht geänderten Hintergrund, so dass es wie "gestreifte" Zeilen aussieht.
Aber ich denke, dass ist ein zu großer Aufwand. So werde ich es wohl auf irgendeine "unbequeme" ;-) Weise machen müssen.
Ich danke Dir, war ja auch nur eine Frage!
Gruß
Cremling1

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Fri Feb 19, 2016 12:29 pm

Cremling1 wrote:Nur sie hat einen Nachteil, nämlich bei 30 oder vlt. noch ein paar mehr Adressen wird sie relativ lang nach "unten" und in der Horizontalen "verschenke" ich den Platz, wenn Du weißt, was ich meine.
Wusstest Du, dass Du mittels CSS dafür sorgen kannst, dass eine description list exakt wie eine Tabelle aussieht? :)

Die Wahl des HTML-Elementes hat praktisch nichts damit zu tun, wie es aussehen soll, bestenfalls damit, wie es „ab Werk“ aussieht, weil der Browser und/oder das Theme des Blogs bestimmte Basisstyles liefern.

Die Wahl des HTML-Elementes sollte sich stets nach der Semantik richten, also sehr vereinfacht gesagt danach, welches Elemente die Bedeutung und/oder Struktur der darzustellenden Daten am besten abbildet. Beispiel: Wenn Du die Mitglieder eines Teams aufzählen möchtest, bietet sich eine ungeordnete Liste (<ul>) an, weil es sich eben um eine Liste von Namen handelt, in der die Reihenfolge evtl. keine Rolle spielt. Natürlich kann man für diese Liste auch eine Tabelle nehmen oder das berüchtigte (bitte nicht nachmachen!) <p>…<br>…<br>…<br>…</p> – aber damit nimmst Du eben den Geräten, Programmen und Menschen, die ggf. auf diese Daten zugreifen, die Möglichkeiten, die semantisch korrektes Markup ggf. mit sich bringt.

Noch ein einfaches Beispiel: Alle Welt wundert sich immer, wieso man Überschriften (<h1>-<h6>) nutzen soll, wenn man doch das Gleiche mit z.B. <span class="h1"> etc. erreichen kann, die man entsprechend gestaltet? Nun, weil nicht jede Form, diese Inhalte zu verarbeiten, visueller Natur ist und weil diese „eigenen“ Elemente nicht standardisiert sind. Ein Skript, das aus dem Text ein Inhaltsverzeichnis erstellen soll, kann das einfacher bzw. nur tun, wenn standardisierte Elemente verwendet wurden, die es kennt. Gleiches gilt z.B. für einen Screenreader, der Überschriften als Sprungmarken ausliest.

Andererseits kannst Du für Deine Adressenliste auch eine Tabelle verwenden, so lange Du vernünftiges Markup für tabellarische Daten verwendest, also z.B. jeder Spalte eine Kopfzeile zuordnen kannst, was hier ja völlig problemlos geht.

Nur: Diese Tabelle „funktioniert“ auch nur da, wo die Breite des Layouts genug Platz bereit stellt, um alle Spalten nebeneinander auszugeben. Was machst Du auf kleinen Bildschirmen, z.B. Smartphones?

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Fri Feb 19, 2016 1:11 pm

Ja, Du hast recht, es ist eine Liste der "Team-Mitglieder". Dort sollen die Adressen, nebst Tel-Nr. und email-Adresse aufgelistet sein. Ich habe es angefangen mit einer Tabelle (siehe Anlage). Nur das hat den Nachteil, das wenn ich einen Namen mal dazwischen setzten muß, weil neu dazu gekommen, ist das mit der Tabellenhintergrundfarbe bzw. Zeilenhintergrundfarbe wieder durcheinander. Deshalb habe ich nach einer Möglichkeit gefragt.
Und leider kenne ich die Möglichkeiten, die Du erwähnst nicht. CSS ist mir zwar ein Begriff, aber richtig gearbeitet habe ich damit noch nicht.
Kannst Du mir einen Tipp geben, wo ich dafür eine "leicht verständliche" ;-) Anleitung finde.
Denn ich muß diese Liste erstellen, weiß aber leider keinen "guten" Weg.

Upps, das Bild ist etwas zu groß geraten, sorry.
Attachments
Kontakte.jpg
Kontakte.jpg (28.17 KiB) Viewed 4380 times

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Sat Feb 20, 2016 10:14 pm

Cremling1 wrote:Ich habe es angefangen mit einer Tabelle (siehe Anlage). Nur das hat den Nachteil, das wenn ich einen Namen mal dazwischen setzten muß, weil neu dazu gekommen, ist das mit der Tabellenhintergrundfarbe bzw. Zeilenhintergrundfarbe wieder durcheinander.
Joah, das kommt halt dabei raus, wenn man seine Styles ins Markup schreibt (nehme ich mal an).

Mit CSS kannst Du z.B. sowas machen:

Code: Select all

tr:nth-child(odd) {
    background: #eee;
}
Übersetzt: Setze für jede Tabellenreihe (tr), die ein ungerade Kind ist (:nth-child(odd)) die Hintergrundfarbe auf ein sehr helles Grau. Sprich: Die Reihen 1, 3, 5 usw. sind immer grau, und wenn man Reihen hinzufügt, „rutscht“ die Färbung mit.
Cremling1 wrote:Kannst Du mir einen Tipp geben, wo ich dafür eine "leicht verständliche" ;-) Anleitung finde.
So ziemlich die beste Lektüre zu HTML/CSS ist Little Boxes. MDN ist gut, aber noch nicht komplett übersetzt und vielleicht etwas weniger einsteigerfreundlich. Gleiches gilt auch für die Web Platform Docs.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Sun Feb 21, 2016 12:24 am

Nur erstmal kurz:
Dazu kann ich noch nichts sagen, ich meine zu Deinen CSS-Code. So einfach kopiert hat es nicht geklappt. Ich denke, da muß ich mich erstmal näher mit befassen.
Danke für die "Lektüre-Tipps"

Gruß
Cremling1

Cremling1
Regular
Posts: 26
Joined: Sat Nov 14, 2015 5:31 am

Re: Text blinkend

Post by Cremling1 » Mon Feb 22, 2016 6:58 am

yellowled wrote: Mit CSS kannst Du z.B. sowas machen:

Code: Select all

tr:nth-child(odd) {
    background: #eee;
}
ok, diesen Code habe ich jetzt schon öffters in Internet gefunden. Aber sorry: Mir erschließt es sich leider noch nicht, wo ich den platzieren muß, damit ich das tabellenwirksam hinbekomme.
Ich habe folgenden Aufbau und wo ich ihn auch platziert habe, bekam ich keine Wirkung:

<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Text blinkend

Post by yellowled » Mon Feb 22, 2016 10:15 am

Cremling1 wrote:Mir erschließt es sich leider noch nicht, wo ich den platzieren muß, damit ich das tabellenwirksam hinbekomme.
Grundsätzlich: In eine (passende) Stylesheet-Datei. In s9y-Themes heißt das Theme-Stylesheet üblicherweise (aber nicht immer) style.css und findet sich in /templates/<NAME_DEINES_THEMES>/. Aber mindestens wenn Du ein Theme nutzt, das zum s9y-Kern kommt, evtl. auch bei Themes, die auf Spartacus liegen, ist das nicht updatesicher (weil die style.css im Fall eines Updates von s9y überschrieben wird). Du kannst aber einfach in diesem Verzeichnis eine Datei namens user.css anlegen und die CSS-Anweisungen dort ablegen – diese Datei wird ebenfalls (seit s9y 2.x) ausgelesen und eingebunden wird, zudem ist sie updatesicher (da sie immer vom Benutzer angelegt wird).
Cremling1 wrote:Ich habe folgenden Aufbau und wo ich ihn auch platziert habe, bekam ich keine Wirkung:
Ohne Livebeispiel (URL wäre gut, falls möglich) nicht glasklar zu diagnostizieren, aber zunächst mal solltest Du die Inline-Styles entfernen, um Dich nicht „selbst zu überschreiben“. Statt:

Code: Select all

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">
reicht

Code: Select all

<table>
Alles andere ist nicht mehr nötig bzw. kann rein mit CSS im Stylesheet gelöst werden. Das restliche Tabellenmarkup ist völlig richtig. Du solltest aber mindestens

Code: Select all

table {
    border: 1px solid #000;
    text-align: left;
    width: 100%;
}
ins Stylesheet übernehmen (und wahrscheinlich die Rahmenfarbe ändern).

Zweitens (und ich nehme an, das wird's sein) kann es sein, dass Dir der Browsercache einen Streich spielt. (Es kann z.B. auch sein, dass Du vergessen hast zu speichern, aber das wollen wir mal nicht annehmen. :wink:) Sprich: Der Browser nimmt noch die unveränderte Version des Stylesheets aus seinem Cache. Wie Du das umgehst, kommt ein wenig auf den Browser und das OS an; von Windows ausgehend ist es Ctrl + F5 oder Shift + F5 in Chrome, Shift + F5 sollte auch in Firefox funktionieren. Im Prinzip reicht es auch ein paar mal Reload zu klicken, aber das ist halt nervig.

Falls es damit immer noch nicht „ankommt“, hast Du vermutlich ein Problem mit der sogenannten Spezifität. Das ist jetzt nicht in 2 Sätzen umfassend zu erklären, aber vereinfacht: CSS hat ein Gewichtungssystem, um festzulegen, welche Anweisung gilt, wenn mehrere Anweisungen für dasselbe Element greifen. Um da helfen zu können, muss ich eine URL zum Liveblog haben, alles andere ist Glaskugelei.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply