Justify, Abstand und 1.Buchstabe gross

J0hn B0y

J0hn B0y

Mitglied
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)
unbenanntcmwb.jpg


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


Meine CSS Klasse sieht derzeit so aus
.textrichtung {
text-align: justify;
line-height: 1.5;
font-family: "constantia", "hoefler text", "palatino linotype", serif;
}
Zum Vergrößern anklicken....

Vielen Dank
 
Zuletzt bearbeitet:
Danke dir. Allerdings nutze ich kein <p> in meinem Text da ich diesen so eingebe wie ich dir hier antworte, über einen Editor.
 
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 :rolleyes:

CSS: 
.textrichtung:first-letter { /* CSS-Regeln */ }
 
Zuletzt bearbeitet:
J0hn B0y hat gesagt.:
Meine CSS Klasse sieht derzeit so aus

.textrichtung {
text-align: justify;
line-height: 1.5;
font-family: "constantia", "hoefler text", "palatino linotype", serif;
}
Zum Vergrößern anklicken....
Zum Vergrößern anklicken....
J0hn B0y hat gesagt.:
Laut Quelltext sieht die Ausgabe so aus

<div class="messageContent">
Lorem ipsum dolor sit amet........
Zum Vergrößern anklicken....
Zum Vergrößern anklicken....
Dann hat der Selektor gegenüber meiner letzten Änderung im Post zuvor so zu lauten:
CSS: 
.messageContent:first-letter { /* CSS-Regeln */ }
 
Zuletzt bearbeitet:
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
 
Zuletzt bearbeitet:
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
2zxpklj.jpg


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 ;)
 
Zuletzt bearbeitet:
J0hn B0y hat gesagt.:
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
2zxpklj.jpg


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.
Zum Vergrößern anklicken....
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.
 
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;
}
Zum Vergrößern anklicken....

Und anschauen kann man es hier
Wie beschrieben. In FF alles wunderbar aber in IE und Opera siehts wie auf dem Image aus
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück