Voranstellung einer Grafik bei beliebigen Buchstaben

[Enrico]

Hallo und guten Abend,

ich möchte eine css-Klasse definieren, die mir bei einzelnen Buchstaben, die dieser Klasse zugeordnet sind, eine kleine Grafik voranstellt, um so beispielsweise - neben einem Zeilenumbruch - einen neuen Absatz optisch aufzuwerten.

Die anzuzeigende Grafik soll ein wenig oberhalb des Textes "sitzen", darf aber den weiteren Textverlauf nicht zerreissen oder zu Lücken im Text führen.

Google brachte mir "css text-verzierung" keine Ergebnisse, die auch nur annähernd in meine Richtung gegangen wären.

Ich suche aber nicht nach einer Technik, Initialien über css umzusetzen.

Klingt vielleicht seltsam, aber wonach suche ich?

Könnt ihr mir hier Quellen nennen, die mir entsprechende Einblicke in die gewünschte Technik geben?

Vielen Dank und Gruß
Enrico

[bleicher]

Grüße,
:before - google danach
MFG
bleicher

[bleicher]

Grüße,
aber eigentlich tut es auch background-grafik (je nachdem was GENAU du jetzt machen willst)
MFG
bleicher

[Gunnar Bittersmann]

@@Enrico:

nuqneH

ich möchte eine css-Klasse definieren

Das wird dir nicht gelingen. So etwas gibt es nicht.

Klingt vielleicht seltsam, aber wonach suche ich?

Nach 'p:before { content: url(foo.png) }'?

Nach 'p { background: url(foo.png); text-indent: 42px }'?

Qapla'

[MudGuard]

Hi,

ich möchte eine css-Klasse definieren,

Du willst unmögliches.

die mir bei einzelnen Buchstaben, die dieser Klasse zugeordnet sind, eine kleine Grafik voranstellt, um so beispielsweise - neben einem Zeilenumbruch - einen neuen Absatz optisch aufzuwerten.

Meinst Du sowas wie
p::before { content: url(absatzmarker.png); }

Wenn ja: wozu dann mit Klassen arbeiten?

cu,
Andreas

[Enrico]

Hallo an alle :-)

Wow, so viele Antworten auf so kurze Zeit, freut mich :-)

Skizziert will ich folgendes Umsetzen:

+---+
|   |
| Hier beginnt der Text, der dann ganz normal
+-weitergeführt wird und sich durch die Grafik
  nicht aus dem Konzept bringen lässt.

Ich habe gerade gegoogelt und ":before" scheint genau das zu sein, wonach ich gesucht habe. Jetzt muß ich es nur noch richtig einbinden.

Vielen Dank für eure Unterstützung.

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Skizziert will ich folgendes Umsetzen:

+---+
|   |
| Hier beginnt der Text, der dann ganz normal
+-weitergeführt wird und sich durch die Grafik
  nicht aus dem Konzept bringen lässt.

Ich habe gerade gegoogelt und ":before" scheint genau das zu sein, wonach ich gesucht habe.

Ähm nee, scheint nicht so. Du suchst eine Hintergrundgrafik.

Jetzt muß ich es nur noch richtig einbinden.

Und im IE testen. ;-)

Qapla'

[Enrico]

Hallo Gunnar,

Ähm nee, scheint nicht so. Du suchst eine Hintergrundgrafik.

Das habe ich als erste Variante probiert und die Variante mit ":before" dann gar nicht mehr getestet, weil es mit etwas Fein-Tuning super klappt.

Aber ihr habt mich genau auf den richtigen Weg geführt (zumindest css-technisch *sfg*)

Und im IE testen. ;-)

Meinst Du, der IE zickt da wieder rum?

Brauche ich für folgenden Code etwa wirklich ein "Work-around"?

p
   {
      background:  url(../../Grafiken/Layout/Markierung.png) no-repeat;
      padding-top: 3px;
      text-indent: 19px;
   }

p span
   {
      color: #8F120C;
   }

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Meinst Du, der IE zickt da wieder rum?

Bei '::before' und 'content', ja.

p span
   {
      color: #8F120C;
   }

Wofür sind die 'span'-Elemente innerhalb der 'p'-Elemente?

Qapla'

[Enrico]

Hallo Gunnar,

Bei '::before' und 'content', ja.

Ok, dann bin ich mit der "background"-Variante ja auf der sicheren Seite :-)

Wofür sind die 'span'-Elemente innerhalb der 'p'-Elemente?

Hiermit formatiere ich die Nummer der Einträge in einer anderen Farbe als die übrigen Daten.

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Wofür sind die 'span'-Elemente innerhalb der 'p'-Elemente?

Hiermit formatiere ich die Nummer der Einträge in einer anderen Farbe als die übrigen Daten.

Wie bitte? Nummer? Dann hat du also keine 'p', sondern 'ol'/'li'.

Qapla'

[Enrico]

Hallo Gunnar,

Wie bitte? Nummer? Dann hat du also keine 'p', sondern 'ol'/'li'.

Ich sehe, ab und zu ist es falsch, zu knapp zu antworten ;-)

Sorry, da habe ich mich wohl missverständlich ausgedrückt.

Ich habe keine Liste.

Mein String zur testweisen Ausgabe der Einträge unserer Gästebuchdatei sieht wie folgt aus:

$Eintraege_html .= "<p><span>" . $Nr . "</span><br>" . $Name . "<br>" . $Datum . "<br>" . $Uhrzeit . "<br>" . $Eintrag . "<br>";

Und mit "<span></span>" formatiere ich lediglich die Nummer des aktuell auszugebenden Eintrages.

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Sorry, da habe ich mich wohl missverständlich ausgedrückt.
Ich habe keine Liste.

Doch, das hast du: eine Liste von Einträgen. Du solltest sie auch als solche auszeichnen. (Hatte ich mich da missverständlich ausgedrückt?)

Mein String zur testweisen Ausgabe der Einträge unserer Gästebuchdatei sieht wie folgt aus:
   $Eintraege_html .= "<p><span>" . $Nr . "</span><br>" . $Name . "<br>" . $Datum . "<br>" . $Uhrzeit . "<br>" . $Eintrag . "<br>";

Sollte aber eher so aussehen:

$Eintraege_html .= '<li><div class="id">' . $Nr . '</div><div class="creator">' . $Name . '</div><div class="time">' . $Datum . $Uhrzeit . '</div><div class="description">' . $Eintrag . '</div></li>';

Außenrum natürlich <ol> und </ol>.

So kannst du alle Felder wie gewünscht formatieren. Und wenn du aufwärts zählst, brauchst du '<div class="id">' . $Nr . '</div>' vielleicht gar nicht.

Qapla'

[Enrico]

Hallo Gunnar,

sorry, hatte Deine Antwort erst nach dem Abschicken meines neuen Problems gelesen.

Doch, das hast du: eine Liste von Einträgen.

Ok, finde ich eine interessante Betrachtungsweise.

Du solltest sie auch als solche auszeichnen.

Als Alternative zu einer html-Tabelle? Ich denke, da habe ich mich wiederum falsch ausgedrückt bzw. hätte ergänzen sollen, dass die String-Ausgabe später gegen eine Tabelle ersetzt wird.

Hatte ich mich da missverständlich ausgedrückt?

Irgendwie haben wir heute Kommunikationsbarrieren, die uns das Leben schwer machen ;-)

Und wenn du aufwärts zählst, brauchst du '<div class="id">' . $Nr . '</div>' vielleicht gar nicht

Das würde der Performance sicherlich zuträglich sein, gut, das aber wohl erst bei einigen hundert bis tausend Einträgen und ob wir die bekommen ... ?!? ;-)

Ne, Spaß beiseite, ich denke schon, dass ich dieses Feld rausnehmen werde.

Gruß
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

Doch, das hast du: eine Liste von Einträgen.
Ok, finde ich eine interessante Betrachtungsweise.

Ich finde es interessant, dass du er vorher nicht so betrachtet hattest.

hätte ergänzen sollen, dass die String-Ausgabe später gegen eine Tabelle ersetzt wird.

Es müffelt. Keine tabellarische Daten, keine Tabelle.

Ne, Spaß beiseite, ich denke schon, dass ich dieses Feld rausnehmen werde.

Noch eine Kommunikationsbarriere? Was ich sagen wollte: Wenn du deine Liste als 'ol' auszeichnest, dann numeriert der Browser die Einträge bereits ohne dein Zutun durch:

1. John Doe
   2010-08-30 08:15
   Lorem ipsum dolor sit amet.

2. Jane Roe
   2010-08-30 09:42
   Consectetuer adipiscing elit.

Formatierung (Name unter Nummer; Uhrzeit unter Datum) per CSS.

Qapla'

[Enrico]

Hallo Gunnar,

Ich finde es interessant, dass du er vorher nicht so betrachtet hattest.

Keine tabellarische Daten, keine Tabelle.

Ich habe Tabellen immer als ausrichtendes Instrumentarium betrachtet, in das man auch Einträge aus beliebigen Quellen aufnehmen kann.

Die Alternative, div-Bereiche statt einer Tabelle zu nehmen, kam mir gar nicht in den Sinn.

Wenn du deine Liste als 'ol' auszeichnest, dann numeriert der Browser die Einträge bereits ohne dein Zutun durch

Ok, dann werde ich Deinen Vorschlag aufgreifen und eine Liste mit formatierten div-Bereichen verwenden und die Tabelle weglassen.

Welchen Vorteil hat dies denn eigentlich?

Gruß
Enrico

[suit]

Welchen Vorteil hat dies denn eigentlich?

Semantik ;)

[Enrico]

Hallo suit,

Semantik ;)

Meinst Du damit Übersichtlichkeit?

Ich denke aber, ohne revolutionäre Tendenzen an den Tag legen zu wollen, dass sich Daten, und es sind ja auch reelle Daten aus einer Textdatei, mittels einer Tabellenkonstruktion besser formatiert darstellen lassen, als mit div-Bereichen, da Tabellen ihre Form an den Inhalt anpassen, was bei 5 nebeneinander zu positionierenden div-Bereichen, von denen 4 ihre Breite am Inhalt bekommen sollen - meines Wissens nach -, eher schwierig umzusetzen sein dürfte.

Gruß
Enrico

[suit]

Semantik ;)

Meinst Du damit Übersichtlichkeit?

Nein, dann hätte ich wohl Primitivität geschrieben. Du könntest wenigstens so tun, als hättest du einen Begriff den du nicht kennst nachgeschlagen.

Ich denke aber, ohne revolutionäre Tendenzen an den Tag legen zu wollen, dass sich Daten, und es sind ja auch reelle Daten aus einer Textdatei,

Wenn du mir sagst, was reelle Daten sind, kann ich dir sicher folgen.

mittels einer Tabellenkonstruktion besser formatiert darstellen lassen, als mit div-Bereichen,

Wer schrieb irgendwas von div-Suppe? Gunnar hat dich explizit darauf hingewiesen, dass eine Liste als Sonderform einer Tabelle (1-dimensional) interessant ist - dem stimme ich hier uneingeschränkt zu.

da Tabellen ihre Form an den Inhalt anpassen, was bei 5 nebeneinander zu positionierenden div-Bereichen, von denen 4 ihre Breite am Inhalt bekommen sollen - meines Wissens nach -, eher schwierig umzusetzen sein dürfte.

Das zeugt davon, dass du von CSS nicht viel Ahnung hast - nur weil sich Tabellen per Voreinstellung so verhalten, wie Tabellen, heißt das nicht, dass andere Elemente das nicht auch können.

Nur weil fieldset-Elemente per Voreinstellung einen Rahmen besitzen, verwendet man sich auch noch lange nicht, um einen schönen Rahmen um irgendwelche Elemente zu ziehen ... halt, ich nehme die Aussage zurück, auch das ist leider gängige Praxis.