mit css Wortbestandteile unterschiedlich formatieren

[palos]

Hallo Leute,

kann mir jemand einen Tipp geben, wie ich mit css innerhalb eines Wortes seine Bestandteile unterschiedlich formatieren kann? z.B. Telefon möchte ich Tele fett haben und fon mit größerem Buchstabenabstand. Über eine Klasse als Selektor hat es bei mir bis jetzt nicht funktioniert.

Danke für eure Hilfe
Palos

[DDI-web]

Du kannst um Tele ein <b>-Tag setzen oder <strong>. Beide Tags für fette Formatierung. Oder Du legst eine Klasse .fett an die Du dann mit den css-Befehlen für fetten Text ausstattest. Dann setzt Du ein <span class=fett> um Tele.

Ich persönlich rate Dir aber davon ab. Warum ist Tele so wichtig? Wenn schon das ganze Wort fett setzten.

Gruß Dörthe

[palos]

Hallo Dörthe,

wenn ich Tags benutze, muss ich den ganzen HTML-Text durchkämmen und bei jedem Erscheinen des Wortes entsprechend markieren. Deshalb ist es am einfachsten, mit den Klassen zu arbeiten. Es gelingt mir aber nicht, innerhalb eines Elements zwei Klassen einzufügen. Ist dies möglich? Denn ich möchte unbedingt den zweiten Teil des Wortes mit größeren Buchstabenabständen haben (also mit dem css-Befehl letter-spacing). Es soll auf keinen Fall das ganze Wort fett markiert sein.

Danke Palos

[BlackBird]

Hä? Dörthe hat die Lösung doch schon gepostet...

<span class="fett">Tele</span><span class="spacing">fon</span>

.fett { font-weight: bold; }
.spacing { letter-spacing: ... }

[amanuen]

Für mich klingt es so, als will er das ganze ohne HTMLTags machen. Das ist nicht möglich, denn CSS prüft keinen Content. Du kannst allerdings auch ein Droplet bauen:

Code:

<?php return '<span class="fett">Tele</span><span class="spacing">fon</span>: '.$nummer;

Und dazu den CSS-Code von BlackBird in die Template-Css-Datei  packen oder

Code:

<?php return '<b>Tele</b><span style="letter-spacing: ...">fon</span>: '.$nummer;

Einbinden dann mit [[Telefonnummer?nummer=01424-1253]], wenn du das Droplet Telefonnummer nennst.

[BlackBird]

Gute Idee!

Ansonsten könnte man noch jQuery / JavaScript benutzen, um das Markup nachträglich einzufügen, was dann aber den Haken hat, daß es nicht funktioniert, wenn der Besucher JS im Browser deaktiviert hat. Da ist das mit dem Droplet wirklich die geschicktere Lösung!

[amanuen]

Geniale Leute => Geniale Lösungen 
*räusper*

Du könntest bei dem Droplet sogar noch ein explode bei - machen dann:

Telef o n:
 Vorwahl: 01424
 Anschluss: 1253

Oder was weiß ich..je nach dem..

[jacobi22]

na los... wenn man schon so "verrückt" ist 

wie wärs mit einer Vorlage für den Wysiwyg-Editor (One-Click-Lösung)?