Dirk Metzmacher 10. September 2003

Trickkiste: Kapitalisieren

Kein Beitragsbild

Veröffentlichen Sie Ihre Geschichten oder längere Texte? Dann versuchen Sie es doch einmal mit einem Initial und stellen jeweils die ersten Buchstaben eines Abschnittes vergrößert dar.

Den folgenden Code setzen Sie überall dort ein, wo ein neuer Absatz mit einem vergrößerten Buchstaben beginnen soll. Durch das Universalattribut class= können Sie verschiedene Formate definieren. Dieser speziellen Formatierung geben Sie einen eigenen Namen und bestimmen für diese Klasse die Eigenschaften. Live Demo

  <p class="absatz-kapitalisiert">An dieser Stelle fügen
Sie Ihren Text ein.</p> 

Der folgende CSS-Code gehört in den <head>-Bereich Ihrer Internetseite. Hier werden die Eigenschaften der Klasse festgelegt. Durch first-letter können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Mit font-size: wird die Schriftgröße festgelegt. Mit float:left legen Sie fest, dass das Element links steht und rechts davon von nachfolgenden Elementen umflossen wird.

       <style type="text/css">
 <!--
 .absatz-kapitalisiert:first-letter{

font-size:200%;
 float:left;
 color:#669988; }
 -->
 </style>

Ältere Browser können mit first-letter nichts anfangen und ignorieren den Befehl.

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.