Gitarrenakkorde mit CSS

in CSS, von mts

Lieder zu veröffentlichen, wenn man es denn darf ist schon schwer genug. Noch dazu dann, wenn man die Gitarrenakkorde dazu schreiben mag. Oder einfach mal ein Bild. Hier ist eine von vielen möglichen Lösungen.

Muckel mag Gitarrenakkorde tippen, daher fragte er im WordPress.de Forum nach. Außerdem sollte die Lösung einfachst zu tippen sein, da sehr unerfahrene dies tun werden.

Ich habe ein Lösung, die mit Quicktags funktioniert. Denn den What You See Is What You Get Editor verwende ich einfach nicht.

Benötigt wird ein Plugin, um die Quicktags zu ergänzen. Die style.css des verwendeten Themes und ein bisschen tricksen beim Schreiben.

Wie immer, es gibt sicher noch mehr Lösungen und sicher auch bessere, wenn dann bitte einfach mir schreiben. Ich veröffentliche gerne mit Credit

Zuerst hier das Beispiel:Gitarrenakkorde mit CSS

NehDmt Abschied, BrAüder, unghewiss ist Galle Wiederkehr,

die DZukunft liegt Ain Finsternish und mGacht das HeDrz uns schwer.

Hier der Quellcode des Beispieles Gitarrenakkorde mit CSS

<div class="noten">
 
Neh<span class="hoch">D</span>mt Abschied, Br<span class="hoch">A</span>üder, ung<span class="hoch">h</span>ewiss ist <span class="hoch">G</span>alle Wiederkehr,
 
die <span class="hoch">D</span>Zukunft liegt <span class="hoch">A</span>in Finsternis<span class="hoch">h</span> und m<span class="hoch">G</span>acht das He<span class="hoch">D</span>rz uns schwer.
 
</div>

Eintrag in die style.css sieht so aus:

.noten{line-height:3.2em;position:relative;top:2px;margin-top:2em;margin-bottom:3em;}
.noten p{height:3em;}
.hoch {position:absolute;margin-top:-1.7em; }

Zwei Quicktags sind nötig, bei meinem Plan:

Einer für das nötige div, dem ich die class noten gab.

Der Zweite für das span, dem ich die class hoch gab.

Zuerst alles tippen, dann den ganzen Text markieren und auf auf den Quicktag für das div klicken. Dann den Cursor dorthin setzen wo der erste Gitarrenakkord hinsoll und auf den Quicktag für das span klicken – Akkord tippen- Element schließen klicken usw..

Ich habe diese Lösung mit dem IE, dem Opera und dem Firefox getestet. Die Abstände zum Text sind unterschiedlich.

mts

Basis Know-how CSS
Internetmarketing

Top

5 zu : Gitarrenakkorde mit CSS

5 Kommentare

Muckel

1
Danke Danke Danke

Ich werde deine Idee die Tage auch mal testen. Denke aber, es würde noch eine leichtere möglichkeit geben, dazu muss ich aber noch bissel Zeit finden, um die zu schreiben – aber so hört es sich shconmal ganz gut an.

Gruß Muckel

07.11.06 um 18:47
Muckel

2
Hm,

eine frage, wenn Sie gestattet ist – haber versucht, dies quicktag plugin zu aktivieren. Datei runter geladen, umbenanntn und in den Ordner verschoben – aber leider taucht das plugin unter plugins nicht auf – woran kann das liegen?

Gruß und danke,
Muckel

07.11.06 um 19:01
mts

3
Hi Muckel

ich habe ehrlichst keine Ahnung.
1. weil ich es nicht verwende.
2. weil ich es nicht verwende

3. Stimmt auch der Pfad und wieso musste es umbenannt werden

4. hast Du auch refresht nach dem Upload?

5. einfach beim Autor des Plugins nachfragen.

lg

07.11.06 um 19:50
Muckel

4
Guten Tag zusammen,

es ist nun über zwei Jahre her, aber deine Idee funktioniert aktuell auch noch. Habe das CSS ein wenig angepasst und würde es Dir zukommen lassen, wenn Du es hier veröffentlichen möchtest.

Habe die größen nochmal kontrolliert und so die höhen definiert:

Schriftgröße Noten + Schriftgröße Akkord + Freiraum = Zeilenhöhe.

Und ein paar kleine änderungen, die nur dafür sorgen, dass es im Internet Explorer (6.0) und dem aktuellen Firefox gleicher ist. Mit Opera und dem aktuellen InternetExplorer kann ich es nach’m Feierabend kontrollieren.

Liebe Grüße
Muckel

P.S. Darf ich mir dein “Karo Hintergrundbild” klauen ?

03.03.09 um 15:16
mts

5
ja darfst Du gerne ..meine Email
mts und dann diesen Domainnamen hier

… da kannst mir über Deine E-Mail client files zusenden, weil mein E-Mail Formular dies aus Sicherheitsgründen filtert

lg

03.03.09 um 18:17