Für das Hilfeforum benötigst du eigene Zugangsdaten. Der Account deines Blogs ist hier irrelevant.

blogsport.de Forum » Geschmackssache

Zitate mit css markieren

Tags:

  • Thema gestartet vor 11 Jahren
  • 16 Beiträge bislang
  • Letzer Beitrag von SCHILDKROETE
  1. Hallo, um Zitate zu markieren, habe ich mir folgendes in die wp-layout.css geschrieben:

    #quot {
    margin-left:1.5em; padding-left:0.5em;
    border-left-width:medium; border-left-style:solid; border-color: 660000;
    text-align:justify; font-style: italic;
    }
    #quot:before { open-quote; }
    #quot:after { close-quote; }

    Zitate fasse ich dann mit <p id="quot">....

    Aus irgendwelchen Gründen wird bordercolor ignoriert, und leider auch :before und :after, so dass ich die Quotes manuell setzen muss.

    Veröffentlicht am 2006-10-24 12:39:32 #
  2. lysis
    blogsport.de

    bei border-color fehlt das rautezeichen, also #660000, was man übrigens auch kürzer so schreiben kann: #600.

    Veröffentlicht am 2006-10-24 13:59:30 #
  3. lysis
    blogsport.de

    bei before und after muss es so heißen:

    #quot:before { content:open-quote; }
    #quot:after { content:close-quote; }

    Veröffentlicht am 2006-10-24 14:01:28 #
  4. Die Raute war mir mittlerweile sogar selbst aufgefallen, aber das "content" war mir auf dem Weg aus der Doku über meine Augen zum Hirn irgendwie total verlustig gegangen. Danke für die Entfernung des vorm Kopf befindlichen Brettes.

    Wobei ich noch schwanke, ob mir sowas wie die hübsche Quote-Hintergrundgrafik, die man hier und da sieht, nicht besser gefällt. Wie kommt man eigentlich an die?

    Veröffentlicht am 2006-10-24 14:12:41 #
  5. lysis
    blogsport.de

    man benutzt das html-tag <blockquote>.

    oder meintest du, wie man die grafik in deine quote-klasse einbauen kann?

    achja, da fällt mir gerade auf: du hast das ganze als id definiert. das ist eigentlich falsch. eine id ist einmalig und sollte nur einmal in einer html-datei vorkommen. für wiederkehrende elemente benutzt man klassen. also <p class="quote">.

    in der css-datei spricht man diese klasse dann mit

    .quote { ... }

    an.

    Veröffentlicht am 2006-10-24 14:49:41 #
  6. Ich hab die URL für die Grafik mittlerweile gefunden. Aber mit blockquote hab ich so meine Probleme:
    - ich bekomme es nicht gebacken, die Grafik _und_ border-left zu verwenden: der Rahmen verschwindet dann im Nirvana.
    - open-quote und close-quote werden auf eine separate Zeile verschoben, was komisch aussieht.

    Was ID statt CLASS betrifft: du hast natürlich recht, ich habs aber absichtlich falsch gemacht: bei CLASS wird seltsamerweise die margin-Angabe ignoriert. Aber nur im Blog, in einer kleinen HTML-Testdatei funktionierts richtig. Sind also wahrscheinlich wieder irgendweclhe Seiteneffekte, die ich nicht durchschaue.

    Veröffentlicht am 2006-10-24 19:11:09 #
  7. lysis
    blogsport.de

    Ich check jetzt nicht ganz, was du machen willst. Möchtest du den Tag verwenden, der von Haus aus für Zitate vorgesehen ist, nämlich blockquote? Oder möchtest du eine eigene Klasse für Zitate generieren?

    zu den einzelnen punkten:

    1. die margin-angabe hat sicher keine unterschiedlichen auswirkungen, je nachdem ob man nun IDs oder CLASSES verwendet. da hast du dir einen falschen reim auf einen fehler gemacht. dass das nicht geklappt hat, muss andere ursachen haben.

    2. es ist für mich ein bisschen schwierig, dich jetzt per ferndiagnose zu beraten. aber generell würde ich dir empfehlen, den standard-blockquote-tag für zitate zu verwenden:

    <blockquote> zitat </blockquote>

    wenn dir die damit verbundene formatierung nicht passt, kannst du im original-stylesheet nachschauen, mit welchen angaben blockquote formatiert wurde und diese werte in deinem eigenen stylesheet überschreiben. wenn du z.b. die hintergrundgrafik entfernen willst, notierst du in deinem stylesheet so etwas wie:

    blockquote { background: none; }

    3. was den gleichzeitige einsatz eines linken rands und der hintergrundgrafik angeht, so dürfte das überhaupt kein problem sein. die hintergrundgrafik wird mit der background-angabe generiert, der rand mit der border-angabe. beides beeinflusst sich nicht. du musst also auch hier den fehler woanders suchen.

    Veröffentlicht am 2006-10-25 00:21:01 #
  8. lysis
    blogsport.de

    ps: die formatierung von blockquote im k2-stylesheet schaut so aus:

    blockquote {
    margin: 20px 0;
    padding: 0 20px 0 50px;
    color: #333;
    background: url('images/quote.png') no-repeat 10px 0;
    border: none;
    }

    .entry-content blockquote {
    margin: 13px 0;
    }

    Mit deinem eigenen Stylesheet kannst du jetzt die Werte, die dir nicht passen, überschreiben, zum Beispiel mit folgenden Angaben:

    .entry-content blockquote {
    padding: 0 20px;
    background: none;
    border-left: medium solid #600;
    font-style: italic;
    }

    .entry-content blockquote:before { content: open-quote; }
    .entry-content blockquote:after { content: close-quote; }

    Das .entry-content sorgt dafür, dass nur die Zitate in deinen Stories verändert werden. Wenn du es weglässt, werden auch die Zitate in den Kommentaren und in den Asides beeinflusst.

    Veröffentlicht am 2006-10-25 00:30:35 #
  9. Hallo,
    1. Zu Demonstrationszwecken habe ich in meine wp-layout die entsprechenden Einträge für a) blockquote b) #quot und c) .qtest angelegt.
    Das Ergebnis siehst du in diesem Testbeitrag.

    Nur das ID-Beispiel tut das erwartete. Bei CLASS geht das margin verloren, bei BLOCKQUOTE werden die Quotezeichen verrückt.

    2. Was ich eigentlich wollte, ist das wie beim ID-Beispiel, nur dass ich links neben der Border _zusätzlich_ gern noch die Quotegrafik hätte, also von links nach rechts: Grafik -> Border -> Text. Aber das geht anscheinend prinzipbedingt nicht: borderleft ist wohl definitionsgemäß das am weitesten links plazierbare.

    Veröffentlicht am 2006-10-25 11:48:03 #
  10. lysis
    blogsport.de

    voilà, schau's jetzt mal an. ich hab dein stylesheet bearbeitet.

    Veröffentlicht am 2006-10-25 12:37:33 #
  11. Hallo,
    zuerst mal finde ich deine Lösung sehr interessant:
    - ich bin verblüfft, was eine explizite Unicode-Angabe statt des "open-quote"/"close-quote" bewirken kann.
    - dass verlorengegangene margin hatte anscheinend was mit dem fehlenden .entrycontent zu tun, auch wenn ich nicht ganz sehe, weshalb das so ist.

    So weit so gut.

    Was die Grafik angeht: so weit war ich auch schon. So gefällts mir aber nicht. Ich wollte sie lieber LINKS von der Border, nicht RECHTS davon. Also ganz links die Grafik, rechts daneben die Border, rechts davon der Text. Und das geht nicht. Wenn ich die Grafik mit einer negativen Pixelzahl nach links verschiebe, verschwindet sie "unter" der Border und kommt nicht wieder hervor.

    (ich weiß, ich bin pingelig *g*)

    Veröffentlicht am 2006-10-25 13:57:43 #
  12. lysis
    blogsport.de

    1. es mag sein, dass durch trickserei sich die grafik auch links vom border darstellen lässt. aber ehrlich gesagt glaube ich, dass das scheiße aussieht, weshalb ich wenig lust habe, mich da reinzufriemeln. ich würde mich an deiner stelle für eine der beiden möglichkeiten entscheiden: entweder der vorgegebene blockquote-standard mit der grafik links vom zitat oder die lösung mit dem border. beides zugleich ist ästhetisch eine katastrophe.

    2. dass verlorengegangene margin hat damit zu tun, dass im k2-stylesheet das margin eines p-tags bereits mit ".entry-content p" bestimmt worden ist, bevor du mit deinem ".quote" daherkommst. und da eine verschachtelte formatierung spezifischer ist als eine formatierung nur über den klassennamen (nicht aber spezifischer als eine formatierung über die ID), musst du ebenfalls verschachteln, damit deine angabe vorrang genießt. das sind sozusagen die css-vorfahrtregeln.

    (siehe auch "sortierung nach spezifität" und die möglichkeit, eine angabe als "!important" zu markieren.)

    ja, css hat's leider in sich! :)

    Veröffentlicht am 2006-10-25 21:06:40 #
  13. "beides zugleich ist ästhetisch eine katastrophe."

    Nunja, in der anderen, unmöglichen, Reihenfolge käme es glaubich ganz gut. Da ich mich entscheiden muss, verzichte ich lieber auf die Grafik.

    "ja, css hat's leider in sich! :)"

    In der Tat.

    Danke nochmal.

    Veröffentlicht am 2006-10-26 05:24:13 #
  14. hi.
    ich hab mithilfe dieses beitrags mein blockqoute ebenfalls modifiziert. funktioniert auch, blos leider funktionieren jetzt keine quicktags mehr innerhalb der blockquote, und der text is n bissel zerupft. siehe hier:
    http://schildkroete.blogsport.de/2008/06/04/medinat-weimar-no-ii/
    was kann ich machen?
    mein code lautete:

    .entry-content blockquote {
    padding: 0 20px;
    background: #D3D3D3;
    border-left: medium solid #000000;
    font-style: italic;
    }

    .entry-content blockquote:before { content: open-quote; }
    .entry-content blockquote:after { content: close-quote; }

    Veröffentlicht am 2008-06-04 20:10:39 #
  15. lysis
    blogsport.de

    Was verstehst du unter zerrupft?

    Dass Tags im Blockquote nicht mehr funktionieren, und das nur wegen der Befehle oben, kann ich mir nicht so richtig vorstellen. Aber ich müsste das jetzt selber testen, und dazu hab ich im Moment nicht die Zeit.

    Du kannst ja mal versuchen, den Fehler selbst zu finden. Ist ganz einfach: Trial & Error. Du nimmst einen Teil des neuen Codes heraus und schaust, ob es dann wieder funktioniert. Wenn nicht, ist es was anderes gewesen. So spürt man die Ursachen von Fehlern auf. Was anderes kann ich im Grunde auch nicht machen.

    Veröffentlicht am 2008-06-07 12:33:48 #
  16. jo, ich habs gefunden, das mit den tags war nur temporär, mit zerupft meinte ich, dass am anfang und am ende noch ein " steht, was ich allerdings in meinem code stehn hatte, und über trial & error wieder draußen hab.
    danke trotzdem.

    Veröffentlicht am 2008-06-08 13:17:28 #

RSS-Feed zu diesem Thread

Antworten

Du musst dich einloggen zum Schreiben.

Für das Hilfeforum benötigst du eigene Zugangsdaten. Der Account deines Blogs ist hier irrelevant.

0.009 - 5 queries