Justify, Abstand und 1.Buchstabe gross

[J0hn B0y]

Hallo. Ich möchte den Text eines gewissen Bereiches in meinem Forum formatieren.
Grundzüge wie justify sind dabei kein Problem.
Allerdings weiss ich nicht wie ich einen grösseren Abstand zum Bild auf der rechten Seite bekomme (rote Linie)

Wie bekomme ich es hin das der 1. Buchstabe, ähnlich wie in dem Bild aussieht?

Meine CSS Klasse sieht derzeit so aus

.textrichtung {
text-align: justify;
line-height: 1.5;
font-family: "constantia", "hoefler text", "palatino linotype", serif;
}

Vielen Dank

 

[SpiceLab]

:first-child, :first-line, :first-letter (Pseudoklasse und Pseudoelemente für Absätze)

Der Abstand zum rechten Bild kann grundsätzlich per padding(-right) oder margin-(right) für den Text definiert werden.

 

[J0hn B0y]

Danke dir. Allerdings nutze ich kein <p> in meinem Text da ich diesen so eingebe wie ich dir hier antworte, über einen Editor.

 

[SpiceLab]

Jo. Diese Pseudoklassen u. -elemente sind nicht auf das <p>-Element in dem Beispielcode beschränkt.

Nach Eingabe und Verarbeitung folgt Ausgabe - "EVA"-Prinzip in der Computerwelt genannt.

Will sagen, bei der Formularverarbeitung gibt der Server den Text innerhalb eines (anderen) HTML-Elements (als <p></p>) aus, über das darin sich das erste Zeichen wie gewünscht formatieren lässt.

Btw, eine CSS-Klasse zur Formatierung des eingegebenen Textes existiert ja schließlich auch schon in deinem CSS

.textrichtung:first-letter { /* CSS-Regeln */ }

 

[J0hn B0y]

Hallo. Vielen Dank. Leider will das nicht funktionieren.
Laut Quelltext sieht die Ausgabe so aus

<div class="messageContent">
Lorem ipsum dolor sit amet........

 

[SpiceLab]

Meine CSS Klasse sieht derzeit so aus

.textrichtung {
text-align: justify;
line-height: 1.5;
font-family: "constantia", "hoefler text", "palatino linotype", serif;
}

Laut Quelltext sieht die Ausgabe so aus

<div class="messageContent">
Lorem ipsum dolor sit amet........

Dann hat der Selektor gegenüber meiner letzten Änderung im Post zuvor so zu lauten:

.messageContent:first-letter { /* CSS-Regeln */ }

 

[J0hn B0y]

Vielen Dank. So klappt das wunderbar.
Sry habe leider noch nicht soviel Ahnung und auch das belesen wollte nicht helfen. Kann gut sein das ich auch an der falschen Stellen angesetzt habe.
Danke Dir

 

[J0hn B0y]

Jetzt muss ich doch noch mal nerven.
Ich habe das ganze mal in einem anderen Browser getestet und da ist der 1. Buchstabe nicht an oben sonder etwas nach unten verrückt. Das zeigt sich allerdings nur im IE und Opera

Ich seh gerade das es wohl an float-left liegt. Nehm ich das raus gehts, aber dafür ist der Text nun nicht mehr entsprechend formatiert. Soll heissen sieht sch*** aus

 

[SpiceLab]

Ich habe das ganze mal in einem anderen Browser getestet und da ist der 1. Buchstabe nicht an oben sonder etwas nach unten verrückt. Das zeigt sich allerdings nur im IE und Opera

Ich seh gerade das es wohl an float-left liegt. Nehm ich das raus gehts, aber dafür ist der Text nun nicht mehr entsprechend formatiert.

Bildchen gucken ist hier ja hilfreich, um im Bilde zu sein, wie sich ein Fehler äußert, nur wie die relevanten Elemente von dir konkret formatiert sind, ist dem Schnappschuß nicht zu entnehmen, um sich überhaupt, wie auch hilfreich zum Sachverhalt äußern zu können.

 

[J0hn B0y]

Sorry mein Fehler, War so ins Coding vertieft....

Das ist der CSS Teil im ganzen

.EWRporta_Portal .recentNews .messageContent {
text-align: justify;
line-height: 1.5;
font-family: 'Poor Richard', serif;

}

.EWRporta_Portal .recentNews .messageContent:first-letter {
font-size: 2em;
text-indent: 0;
float: left;
}

Und anschauen kann man es hier
Wie beschrieben. In FF alles wunderbar aber in IE und Opera siehts wie auf dem Image aus