Probleme mit Costa Nature + Gänsefüßchen

[Fiona]

Hallo

Ich portiere gerade mein zweites Blog zu Serendipity.

http://www.newblog.fiona.biz

1. Problem: Der rechte Rand erscheint nicht, ebenso fehlt der Footer.

2. Problem: Die Idee mit den großen Gänsefüßchen gefällt mir gut. Allerdings erscheint bei mir nur das öffnende Anführungszeichen. Was muss ich tun, damit auch das zweite erscheint?

Danke vorab

Herzlichst
Fiona

[garvinhicking]

Hi!

Das erste Problem hast Du ja anscheinend schon wegen des ungültigen <iframe /> herausgefunden.

Zu 2: Das Zeichen stammt aus einer Grafik, die per CSS eingebunden wird. Du müsstest also diese Grafikdate editieren und ein zweites quote einbinden. Da aber jedoch der Container für ein Quote nie gleich groß ist, wird es schwierig sein da eine Größe für die Grafik zu finden so dass das immer passt?

Viele Grüße,
Garvin

[yellowled]

2. Problem: Die Idee mit den großen Gänsefüßchen gefällt mir gut. Allerdings erscheint bei mir nur das öffnende Anführungszeichen. Was muss ich tun, damit auch das zweite erscheint?

Ohne jetzt allzu tief in den Code eingetaucht zu sein, sieht mir die Umsetzung der Gänsefüßchen sehr ähnlich wie in Carl's Ansatz aus.

Mit Carl's Technik habe ich (in einem Template, über dem ich noch brüte) ähnliche Probleme, wenn ich - wie Du es in Deinem Blog auch tust - innerhalb eines blockquote p verwende. Benutze ich hingegen blockquote ohne p('s), also etwa so:

Code: Select all

<blockquote>Blasfasel<br />Blafasel<br />Blasfasel</blockquote>

sieht alles bestens aus. Möglich, aber nicht sicher, dass das bei Dir auch tut. Allerdings muss man dann, wie oben zu sehen, Umbrüche manuell per br vornehmen.

Nachtrag: Äh, ja. Und Garvin hat natürlich (wie meistens ) Recht: Es bräuchte natürlich (wie in Carl's Technik, am besten benutzt Du gleich die ) eine zweite Grafik für die schließenden Gänsefüßchen, was das Template offenbar nicht verwendet.

[Fiona]

Danke für den Hinweis auf Carls Tutorial. Ich habe das mal probiert umzusetzen. Es liegt wahrscheinlich nur an einer Kleinigkeit, warum es trotzdem noch nicht so richtig klappt.
http://www.newblog.fiona.biz/index.php? ... exten.html

Diesen Code habe ich in das CSS kopiert und den Pfad hoffentlich auch richtig gesetzt?

Code: Select all

blockquote:first-letter {
background: #f8f6f6 url({TEMPLATE_PATH} img/quoteleft.gif)left top no-repeat; 
letter-spacing: -.06em; padding-left:30px;font-size:1.6em; }

blockquote {
background: #f8f6f6 url({TEMPLATE_PATH} img/quoteright.gif) right bottom no-repeat; 
font-weight: normal; font-style:oblique; color: #444; 
margin: 0px 50px 10px 20px; padding: 0px 25px 0px 4px;
line-height:1.5; border-top:1px solid #efefef; 
border-bottom:1px solid #efefef; }

Beim Schreiben des Testes fällt mir allerdings auf, dass ich etwas unsicher bin, ob ich beim Editor selbst auf die richtigen Knöpfe drücke, um zu Zitieren. Vielleicht hakt es ja daran, dass jetzt das öffnene Gänsefüßchen nicht kommt.

Im Editor gibt es keine Formatvorlage für "Blockquote" oder täusche ich mich? Ich habe den Text eingerückt und "formated" und "Adresse" ausprobiert. Beides überzeugt nicht wirklich. Bei "formated" muss man tatsächlich von Hand die Zeilen umbrechen, und bei "Adresse" erscheint der Text kursiv. Mehr passiert da nicht.

Sollte ich den Editor wechseln? Wenn ja, welchen sollte ich ersatzweise installieren?

Herzlichst
Fiona

[i.speiser]

Hallo Fiona,

Im Editor gibt es keine Formatvorlage für "Blockquote" oder täusche ich mich? Ich habe den Text eingerückt und "formated" und "Adresse" ausprobiert. Beides überzeugt nicht wirklich. Bei "formated" muss man tatsächlich von Hand die Zeilen umbrechen, und bei "Adresse" erscheint der Text kursiv. Mehr passiert da nicht.

Im Moment hast Du für das Zitat folgenden Quelltext:

Code: Select all

<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<address style="DIRECTION: ltr">“Herr xxx bittet Sie, den xxx zu testen und uns einen neuen Text für die Geburtstagsgrüße an unsere VIPs zu entwerfen”</address>
</blockquote>

Das Problem ist vermutlich, dass der Editor dort Style-Angaben einfügt, die die Angaben in der css-Datei überlagern.

Ob es in dem WYSIWYG-Editor einen Knopf für Zitate gibt, weiß ich nicht. Ich verwende den bordeigenen Text-Editor und dort gibt es einen.

Gruß Iris

[yellowled]

Diesen Code habe ich in das CSS kopiert und den Pfad hoffentlich auch richtig gesetzt?

Code: Select all

blockquote:first-letter {
background: #f8f6f6 url({TEMPLATE_PATH} img/quoteleft.gif)left top no-repeat;

Wenn Du das Leerzeichen zwischen {TEMPLATE_PATH} und img entfernst, sollte es gehen (Ebenso beim zweiten Pfad.)

Im Editor gibt es keine Formatvorlage für "Blockquote" oder täusche ich mich?

Öhm - gute Frage, moment ... nein, zumindest nicht, wenn Du den Default-WYSIWYG-Editor meinst. Ich kann da keine Empfehlung aussprechen, da ich seit geraumer Zeit keinen WYSIWYG-Editor mehr verwende.

[Fiona]

Es scheint ein Mysterium zu sein. Offensichtlich wird beim normalen Sy9-Editor das Einrücken des Textes als Quote bewertet. Damit kann ich ja leben. Bloß der Code funktioniert noch nicht.

Wenn ich diesen Code setze, wird nur das erste Zeichen angezeigt:

Code: Select all

blockquote {
	margin-left: 10px;
	padding-left: 60px;
	padding-top: 10px;
	padding-right: 5px;
	min-height: 45px;
	background-image: url({TEMPLATE_PATH}img/quoteleft.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

Verwende ich diesen Code, wird nur das untere Zeichen angezeigt:

Code: Select all

blockquote: first-letter {
background: #f8f6f6 url({TEMPLATE_PATH}img/quoteleft.gif) left top no-repeat; 
font-weight: normal;
font-style:oblique; color: #444; 
letter-spacing: -.06em;
padding-left:30px;font-size:1.6em; }


blockquote {
background: #f8f6f6 url({TEMPLATE_PATH}img/quoteright.gif) right bottom no-repeat; 
font-weight: normal; font-style:oblique; color: #444; 
margin: 0px 50px 10px 20px; padding: 0px 25px 0px 4px;
line-height:1.5; border-top:1px solid #efefef; 
border-bottom:1px solid #efefef; }

Stellt sich für mich die Frage "Weiß der Browser was blockquote first letter ist?"

Vielleicht bin ich auch einfach nur zu blond?

Herzlichst
Fiona

[yellowled]

Verwende ich diesen Code, wird nur das untere Zeichen angezeigt:

Code: Select all

blockquote: first-letter {

Stellt sich für mich die Frage "Weiß der Browser was blockquote first letter ist?"

Vielleicht bin ich auch einfach nur zu blond?

Eher etwas zu ungeduldig, wie mir scheint Ernsthaft: Du hast dort oben zwischen blockquote: und first-letter schon wieder ein Leerzeichen - und so weiß kein Browser, was gemeint ist, denn das betreffende CSS-Element heißt nun mal blockquote:first-letter - ohne Leerzeichen

In vielerlei Hinsicht werden Leerzeichen in CSS ignoriert, was eine feine Sache ist, weil man somit den CSS-Code nahezu beliebig formatieren kann, was mitunter sehr zur Übersichtlichkeit beiträgt. Anders ist es bei CSS-Elementen - da muss man natürlich peinlich genau auf die richtige und eindeutige Schreibweise achten, damit man die Herren Browser nicht verwirrt

Nur nicht aufgeben, mit der Zeit kommt man dahinter

[Fiona]

Hallo

Geduld ist ein gutes Stichwort, ich werde wohl weiterhin einiges davon mitbringen müssen, denn auch nach deinem Hinweis erscheint das obere Zeichen nicht.

Jetzt bin ich sogar zu http://de.selfhtml.org/css/eigenschafte ... tter_childgesurft, um mich ein klein bisschen schlauer zu machen.

Fest steht: Den Code oben habe ich ja nicht selbst erfunden, sondern aus Carls Tutorial kopiert. Das schützt vielleicht nicht vor Fehlern, aber lässt außer Acht, dass vor und nach dem Code vielleicht etwas stören könnte? Dagegen spricht, dass ja sowohl der eine, als auch der andere Code-Schnipsel an sich funktioniert. Bloß nicht gemeinsam. Schließen die sich eventuell mit Absicht gegenseitig aus?

Herzlichst Fiona

[yellowled]

Fest steht: Den Code oben habe ich ja nicht selbst erfunden, sondern aus Carls Tutorial kopiert. Das schützt vielleicht nicht vor Fehlern, aber lässt außer Acht, dass vor und nach dem Code vielleicht etwas stören könnte? Dagegen spricht, dass ja sowohl der eine, als auch der andere Code-Schnipsel an sich funktioniert. Bloß nicht gemeinsam. Schließen die sich eventuell mit Absicht gegenseitig aus?

Hmm. Es wird langsam ein wenig kompliziert, das hier zu diagnostizieren.

Fest steht: Carls Code funktioniert, wenn man nur Carls Code verwendet und nur blockquote ohne eingeschlossenes p verwendet.

Wenn ich mir Deinen Code (den letzten Eintrag, den Du hier gepostet hattest) ansehe, stelle ich fest, dass Du ein »style="MARGIN-RIGHT: 0px"« im öffnenden blockquote-Tag hast. Da das ein sogenannter Inline-Style ist, der nicht aus style.css stammt, nehme ich mal an (kann es aber nicht genau sagen), dass der WYSIWYG-Editor dieses einfügt, und ich schätze, dass das Carls Code irgendwie irritiert.

Überprüfen könntest Du das, indem Du den WYSIWYG-Editor abschaltest und einen Eintrag mit einem "sauberen" Blockquote verfasst.

[Fiona]

Das ist leichter gesagt, als getan. Denn ohne Text einrücken, kein Blockquote.

Möglicherweise habe ich jedoch einen Störenfried entdeckt. Denn in der CSS Datei finde ich just unter o.gezeigten Code folgenden:

Code: Select all

/* blockquoting */

code, pre {
	width: 420px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 2em;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	border: 1px solid #dfdfdf;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	text-align: left;
	background-color: #FFFFFF;
	background-image: url({TEMPLATE_PATH}img/code.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	color: #000000;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
}

Jetzt könnte ich mir so als Laie vorstellen, dass beide Dinge zum gleichen Zeitpunkt auftreten und die beiden sich gegenseitig ausschließen.
Das Code.gif sieht im Costa-Nature-Template ganz ähnlich wie ein Gänsefüßchen aus.

Herzlichst
Fiona

[yellowled]

Das ist leichter gesagt, als getan. Denn ohne Text einrücken, kein Blockquote.

Irrtum

blockquote an sich hat nichts mit Einrücken zu tun. Richtig ist, dass die meisten Browser per default (also wenn blockquote nicht zusätzlich über ein Stylesheet modifiziert wird und somit die Voreinstellung des Browsers verwendet wird) einen blockquote-Bereich eingerückt darstellen. Es wäre aber durchaus möglich, einen blockquote-Bereich uneingerückt darstellen zu lassen.

Einen blockquote-Bereich erzeugt man in (X)HTML normalerweise so:

Code: Select all

<blockquote>TextTextTextText TextTextTextText</blockquote>

Allein diese beiden blockquote-Tags reichen aus, um dem Browser mitzuteilen: "Zeige alles, was zwischen diesen Tags steht, als blockquote analog zu den im Stylesheet stehenden Formatierungsanweisungen dar." Bedenke stets: (X)HTML ist nur zur Auszeichnung, Strukturierung des Textes gedacht, also um festzulegen, welcher Teil eines Textes welche Funktion (Überschrift, Absatz usw.) erfüllt. Die Formatierung (also die Vorgabe, wie etwas aussehen soll) macht CSS.

Wenn blockquotes im Code Deines Blogs exakt so "gesetzt" würden, würde Carls CSS-Code auch funktionieren. Das geht aber offenbar nur, wenn Du blockquotes "manuell" setzt (weil der WYSIWYG-Editor da scheinbar Unerwünschtes einfügt, was er leider oft macht, weshalb ich z.B. ihn nicht mehr verwende) - was Du im Übrigen auch im WYGIWYS-Editor können solltest(?), indem Du einfach das <blockquote> und </blockquote> (sowie den dazwischen gedachten Text ohne weitere Formatierungen) von Hand in den Fließtext eingibst und ansonsten nichts weiter mit dem blockquote anstellst - keine Einrückungen, kein nichts.

Möglicherweise habe ich jedoch einen Störenfried entdeckt. Denn in der CSS Datei finde ich just unter o.gezeigten Code folgenden:

Code: Select all

/* blockquoting */

code, pre {

Jetzt könnte ich mir so als Laie vorstellen, dass beide Dinge zum gleichen Zeitpunkt auftreten und die beiden sich gegenseitig ausschließen.
Das Code.gif sieht im Costa-Nature-Template ganz ähnlich wie ein Gänsefüßchen aus.

Verständnisproblem

Der von Dir zitierte CSS-Code sorgt für die Formatierung der HTML-Elemente code und pre, welche normalerweise für Quellcode-Schnipsel (code) und präformatierten Text (pre; meist ist das ein Absatz, der genau so - meist in Festbreitenschrift - dargestellt werden soll, wie er eingegeben wurde) zuständig ist.

blockquote hingegen ist für Zitate gedacht - wobei der Kommentar im Orginal-Stylesheet hier absolut verwirrend ist.

Aber: Normalerweise wird ein blockquote-Bereich nur über die Anweisungen, die im Stylesheet für blockquote stehen, formatiert. Die beiden Elemente bzw. ihre CSS-Anweisungen könnten sich nur dann beeinflussen, wenn beide Elemente - also z.B. blockquote und code - ineinander verschachtelt sind, also z.B. wenn innerhalb eines blockquotes ein als code formatierter Absatz stünde. Etwa so:

Code: Select all

<blockquote>
  <code>Das ist ein code-Block</code>
</blockquote>

Dann könnte es in der Tat sein, dass sich die Stylesheet-Anweisungen für blockquote und code "irritieren" bzw. aufheben. Das ist aber zumindest in Deinem Beispieleintrag nicht der Fall.

[Fiona]

Vielen Dank für deine Erklärung. Allein: Auch wenn ich händisch das <Blockquote> setze, erscheint das erste Zeichen nicht.

http://www.blog.fiona.biz/index.php?/ar ... blog..html

Herzlichst
Fiona,

ratlos ... aber, nun ja, so wichtig ist das Zeichen gottlob nicht. Es wäre zwar schön gewesen, es zu haben, aber wenn's nicht geht, dann eben nicht.