Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Erster Buchstabe im <p> Tag größer darstellen“

D

DJ Fotoart

Guest

Ersten Buchstaben im <p> Tag größer darstellen

Hallo auch :)

Komischer Titel, aber kürzer war es nicht zu beschreiben.

Es gibt meines Wissens nach eine CSS Eigenschaft die es mir erlaubt den ersten Buchstaben eines Absatzes so vergrößert darzustellen das er über 2 Zeilen reicht und diese ersten beiden Zeilen des Inhaltes rechts floaten.
Ich suche seid einer Weile danach, aber mir fehlt wohl der richtige Begriff um fündig zu werden.

Könnt ihr mir da weiterhelfen ?

Greetz
 
Zuletzt bearbeitet von einem Moderator:

Maykiz

Pixelheld

AW: Erster Buchstabe im <p> Tag größer darstellen

p:first-letter { font-size: 200%; float: left }
 
Zuletzt bearbeitet:
D

DJ Fotoart

Guest

AW: Erster Buchstabe im <p> Tag größer darstellen

Hallo Maykiz

Danke für den Tipp, das klappt schon ganz gut damit. Leider floatet die erste Zeile auf der halben höhe des ersten Buchstabens, was nicht wirklich dolle aussieht. Oben bündig fände ich besser. Ich probier mal ein bisschen rum.
 
D

DJ Fotoart

Guest

AW: Erster Buchstabe im <p> Tag größer darstellen

Okay, ich glaub damit hab ichs...

Code:
p:first-letter {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
padding-top: 0.3em;
font-weight:normal;
font-size:1.8em; 
float:left;
color: #600;
}

Naja, so dolle wie ich mir das gedacht habe sieht es in einer Seite zwar nicht aus, aber es funktioniert.
 

DaRocco

Nicht mehr ganz neu hier

AW: Erster Buchstabe im <p> Tag größer darstellen

Gibt es auch etwas, damit das komplette erste Wort angesprochen wird?

Möchte dies einfach nur automatisch in einer anderen Farbe haben.
 

Madd1nator

Helper

AW: Erster Buchstabe im <p> Tag größer darstellen

Hallo DaRocco,

das gibt es meiner Meinung nach nicht. Du kannst aber dafür um das erste Wort ein Div umschließen und so eine neue Klasse definieren.

Gruß
 

Gideon

Nicht mehr ganz neu hier

AW: Erster Buchstabe im <p> Tag größer darstellen

Hallo DaRocco,

das gibt es meiner Meinung nach nicht. Du kannst aber dafür um das erste Wort ein Div umschließen und so eine neue Klasse definieren.

Gruß

So wird das nichts, anstelle des divs einen span und schon klappt die Sache. Etwa so:
CSS = .rot{color:#ff0000;}
HTML = <p><span class="rot">Wort</span> bla bla....</p>
 

Biernase

Nicht mehr ganz neu hier

AW: Erster Buchstabe im <p> Tag größer darstellen

Ich habe ebenfalls an einer Aufgabe zu knabbern.

Die Pseudoklasse p:first-letter wirkt sich auf die gesammte Homepage aus. Ich möchte jedoch nur bestimmte Absätze einer einzelnen Seite mit first-letter ausstatten. Ich habe bereits schon etwas damit herum experimentiert, kam aber leider noch nicht auf den richtigen Lösungsansatz.

Weiß jemand, wie sich mein Vorhaben in die Tat umsetzen läßt?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben