<blockquote> rechts und links verzieren

[TF]

Hallo!

Gibt es eine einfache Möglichkeit, das <blockquote>-Tag ohne "Firlefanz" (nur mit CSS) links und rechts mit einem Zeichen (beispielsweise &#raquo; und &#laquo) zu versehen? Ich habs schon mit :before und :after probiert, aber leider will es mir nicht recht gelingen.

Einer meiner bisherigen Versuche:
http://toefflibuebe.xardas.lima-city.de/blockquote.html

Ich hoffe, das illustriert das Problem ausreichend ...

MfG
TF

[Jeena Paradies]

Hallo,

http://toefflibuebe.xardas.lima-city.de/blockquote.html

Mit background wirst du wenigstens einen Pfeil hinbekommen, den anderen wohl eher gar nicht, denn es gibt Browser, die das absolut nicht unterstützen wollen.

Grüße
Jeena Paradies

[Gernot Back]

Hallo TF,

Einer meiner bisherigen Versuche:
http://toefflibuebe.xardas.lima-city.de/blockquote.html

Hier meine Modifikation (In Opera 8.01 sieht es schon recht gut aus, leider nicht in Mozilla/Firefox):

  
blockquote:before  
{  
  content: '»';  
  width: 1em;  
  position:absolute;  
  top:0;  
  left:0;  
}  
  
blockquote:after  
{  
  content: '«';  
  width: 1em;  
  position:absolute;  
  bottom:0;  
  right:0;  
}  
  
blockquote  
{  
  position:relative;  
  margin: 0px;  
  padding: 0px;  
}  
  
blockquote p  
{  
  margin:0 2em;  
}  

Gruß Gernot

[wahsaga]

hi,

Gernots Vorschlag in allen Ehren, aber gerade bei per :before/:after generiertem Content habe ich schon öfters die Erfahrung gemacht, dass die Geckos dabei partout nicht mitspielen wollen, was absolute positionierung angeht.

Mein Vorschlag wäre etwas simpler:
http://wazgnuks.net/misc/blockquote_before_after.htm

Die mit :before/:after eingefügten » und « werden einfach mit display:block ausgezeichnet, und mit text-align:left bzw. right ausgerichtet;
Der <p>-Absatz im blockquote bekommt seitliche margins von 1.5em, sowie ein margin-top von -2em - um ihn in etwa auf die gleiche Höhe zu ziehen, wie das linke ». (Das sollte per Hack für den IE wieder aufgehoben werden, denn ohne den generierten Content käme dort ansonsten blockquote zu hoch zu stehen.)
Das rechte « bekommt dann noch ein margin-top von -1em, um es ebenfalls ein Stück nach oben zu ziehen, so dass es unten "neben" dem Absatz zu stehen kommt. (Hier nur -1em, weil font-size ja auf 200% steht.)
Der Absatz hat von mir noch text-align:justify bekommen, weil's damit besser aussieht - Geschmacksache.

Getestet in Opera 8.02, 7.54 und sogar 6.04 ("funzt!"), und Firefox 1.0.4

Man verzeihe mir den neuen Seitentitel - aber die einfachen Lösungen sind manchmal doch die besten ;-)

gruß,
wahsaga