Himmel, das war ein Krampf dieses Zitat-Design für meinen Post von gestern einzurichten... einfach ätzend, hier etwas mit html und css gestalten zu wollen, aber es wäre auch so schwierig genug gewesen (einziger Unterschied hier ist ja, dass das HTML-Fenster trotzdem noch Zeilenumbrüche interpretiert, die man ja normalerweise per Hand mit <br> definiert). Naja, mal gucken ob das der Internet-Explorer jetzt bitte auch so anzeigt wie Firefox, ansonsten muss ich mich nochmal ran setzen, aber einige Angaben werden soweiso überflüssig sein. Wen's interessiert (zum Kopieren und so):
<div style="clear:both; border:0px solid; width: 90%; height:10em; position:relative;" align="center"><div style="border:0px double; width: 0.5%; float: left; top: 0px; left: 0px; z-index: 1;"><img style="border: 0px none ;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQu9RJmSS8f_VrnQJQzez5ZJTDQTJXd0onbNqWAw2-DH0jTxfVJnnSzVMyy0YEpbhUjrBIBbtgUVYMSAW90nwjcEblyobGvh5vzsvuGHT-rvkijvlod_WZyePLij21aJbWDdly2ut7F9w/s400/words.jpg" alt="" id="2" border="0" height="75" width="75" /></div>
<div style="border:0px dotted; float: left; text-align: center; width: 90%; position:absolute; left: 35px; top: 0px; z-index: 2;"><span style="font-style: italic;">
"Zitieren macht Freude! (oder so)"</span></div>
<div style="width: 0.5%; margin-right: 10%; float: right; position: relative; right: 0px; bottom: 0px; z-index: 1;"><img style="border: 0px none ;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQu9RJmSS8f_VrnQJQzez5ZJTDQTJXd0onbNqWAw2-DH0jTxfVJnnSzVMyy0YEpbhUjrBIBbtgUVYMSAW90nwjcEblyobGvh5vzsvuGHT-rvkijvlod_WZyePLij21aJbWDdly2ut7F9w/s400/words.jpg" alt="" id="BLOGGER_PHOTO_ID_5132617666714271282" border="0" height="75" width="75" /></div></div>
<div style="border:0px dotted; float: left; text-align: center; width: 90%; position:absolute; left: 35px; top: 0px; z-index: 2;"><span style="font-style: italic;">
"Zitieren macht Freude! (oder so)"</span></div>
<div style="width: 0.5%; margin-right: 10%; float: right; position: relative; right: 0px; bottom: 0px; z-index: 1;"><img style="border: 0px none ;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQu9RJmSS8f_VrnQJQzez5ZJTDQTJXd0onbNqWAw2-DH0jTxfVJnnSzVMyy0YEpbhUjrBIBbtgUVYMSAW90nwjcEblyobGvh5vzsvuGHT-rvkijvlod_WZyePLij21aJbWDdly2ut7F9w/s400/words.jpg" alt="" id="BLOGGER_PHOTO_ID_5132617666714271282" border="0" height="75" width="75" /></div></div>
"Zitieren macht Freude! (oder so)"
Die überflüssigen border-Tags stehn nur zur kontrolle drin, damit man gucken kann wie groß der bereich tatsächlich ist. Ansonsten mal ein bisschen an den einzelnen Eigenschaften rumspieln um Sachen wie die Größe oder die Position der Klammern zu ändern. Das nur so am Rande^^.
P.S.: Funktioniert natürlich auf jeder anderen Website auch, wäre nur Ratsam, einen Weißen Hintergrund zu wählen, oder sich das Anführungszeichen-Bild zu kopieren und umzufärben bzw. selbst zu erstellen.
P.S.: Funktioniert natürlich auf jeder anderen Website auch, wäre nur Ratsam, einen Weißen Hintergrund zu wählen, oder sich das Anführungszeichen-Bild zu kopieren und umzufärben bzw. selbst zu erstellen.
