Wie bekomme ich große Anfangsbuchstaben?

Hallo!

Ich würde dem ersten Buchstaben einen doppelten em-Code verpassen. Also so:

<em><em>a</em></em>nfang

Und den folgenden Code in die style.css einfügen:

.post em em {
text-transform: capitalize;
font-size:2em;
font-weight: bold;
}

Schon ist der erste Buchstabe groß. Mag mit Sicherheit noch andere Methoden geben, halte das aber derzeit für den einfachsten Weg. Hoffe es hilft...

hier eine weitere lösung:

im html dokument

<span class="initial">A</span>

die dazugehörige css anweisung:

span.initial {
  border-right: 1px solid #666;
  border-bottom: 2px solid #666;
  font-family: georgia, serif;
  font-size: 3em;
  font-weight: bold;
  float: left;
  margin-right: 0.3em;
  padding-right: 0.2em;
}

natürlich ist es nun möglich die css anweisungen den wünschen entsprechend umzugestalten. dieses beispiel erzeugt auch einen rahmen um das initial. nimm den rahmen heraus und auch die margin-right bzw padding-right anweisung. damit sollte der anfangsbuchstabe direkt am text "kleben".

ich persönlich finde diese lösung attraktiver, denn zweimal hintereinander <em> schreiben ist kein guter stil.

gruss

Ah, da mach ich auch mit :-D

#content p:first-letter{
 color:#f00;
  font-family: georgia, serif;
  font-size: 3em;
  font-weight: bold;
}

Macht jeden 1. Buchstaben, jeden Absatzes, im Bereich mit ID content größer. #content muss natürlich je nach Theme angepasst werden.

gute lösung. allerdings finde ich, dass mit der obigen lösung von mir, der verfasser selbst aussuchen kann, wo der grosse buchstabe hin soll.

gruss

Zitat von Olafb

Ah, da mach ich auch mit :-D

HTML

#content p:first-letter{
 color:#f00;
  font-family: georgia, serif;
  font-size: 3em;
  font-weight: bold;
}

Macht jeden 1. Buchstaben, jeden Absatzes, im Bereich mit ID content größer. #content muss natürlich je nach Theme angepasst werden.

Jep, Wunsch -> Befehl ;)
#content p.filet:first-letter{

Tut nur bei P mit der Klasse FILET

schon besser ;)

Ich kann noch besser :)
Wenn mit Klasse, dann kann #content entfallen. Denn es ist ja unwahrscheinlich, dass ein p.filet an Stellen eingesetzt wird wo es nicht hin soll.

Jetzt ham wa aber alle Möglichkeiten in dem Thread genannt, oder? ;)

zumindest sehr gute möglichkeiten aufgezählt, ja :)

gruss

Das ist ja gut, bin auch gerade an sowas dran! :-D

Eine Frage :first-letter nimmt ja leider keine Rücksicht auf "img" Tags, d.h. wenn ich ein Bild links oder rechts ausrichte ignoriert er das, gibt es dafür auch schon eine Lösung??

Echt jetzt? Zeig mal her. Evtl. finden wir einen anderen Selektor.

geht leider noch nicht!
Seite existiert bisher nur bei mir lokal, wenn soweit ist kann ich aber mal den Link posten

Dann poste doch mal bitte deinen Code + CSS mit :first-letter

der Code:

<div id="content">        
            <div class="post">
                <h1 id="post-8"><a href="http://localhost/blog/index.php/2007/03/20/hunger/" rel="bookmark" title="Permanent Link to Hunger">Hunger</a></h1>
                <p class="date">20. M&auml;rz 2007 von tester | Kategorie <a href="http://localhost/blog/index.php/category/allgemein/" title="Alle Beitr&auml;ge in Allgemein ansehen" rel="category tag">Allgemein</a></p>
                
                <div class="entry">


                    <p> <a href="http://localhost/blog/wp-content/uploads/2007/04/6.jpg" title="dsf"><img src="http://localhost/blog/wp-content/uploads/2007/04/6.thumbnail.jpg" title="dsf" alt="dsf" align="right" /></a>Hunger. Stufe für Stufe schob sie sich die Treppe hinauf. Pizza Funghi Salami, Sternchen “Salami” gleich Blockwurst. Die Pilze hatten sechs Monate in einem Sarg aus Blech, abgeschattet vom Sonnenlicht, eingeschläfert in einer Sosse aus Essig, billigem Öl und verschiedenen Geschmacksverstärkern, geruht.</p>
                </div>

css Code:
.entrytext :first-letter, .entry :first-letter {
float: left;
color: black;
font-family: Georgia, 'Times New Roman', Times,'Lucida Sans', 'Lucida Sans Unicode', serif;
font-weight : bold;
font-size : 400%;
margin-right : 4px;
}

Oh ja, klappt tatsächlich nicht, ärgerlich. Willst du nur den wirklich ersten Buchstaben des gesamten Posts treffen? Dann bleibt nur umzustellen, also erst Text dann Bild.
Willst du aber jeden ersten Buchstaben jeden Absatzes treffen, dann musst du nur das Bild in einen Extraabsatz tun, so:

<div class="entry">


<a href="http://localhost/blog/wp-content/uploads/2007/04/6.jpg" title="dsf"><img src="http://localhost/blog/wp-content/uploads/2007/04/6.thumbnail.jpg" title="dsf" alt="dsf" align="right" /></a>


Hunger. Stufe für Stufe schob sie sich die Treppe hinauf. Pizza Funghi Salami, Sternchen “Salami” gleich Blockwurst. Die Pilze hatten sechs Monate in einem Sarg aus Blech, abgeschattet vom Sonnenlicht, eingeschläfert in einer Sosse aus Essig, billigem Öl und verschiedenen Geschmacksverstärkern, geruht.


                </div>

Die P's werden ja dann automatisch erzeugt. Klappt es nicht so (Wysiwyg) bleibt dir nur der Weg über eine Klasse.
Ich würd dir aber trotzdem empfehlen über einen Selector der Art .entry p:first-letter zu gehen, sonst trifft das jedes Element das im Post an erster Stelle kommt, könnte ja mal ne Überschrift oder ne Liste sein ;)