Von Javascript Hypenator rate ich ab. Du findest dann überall in deinem Quelltext ein "& shy;" an Stellen, die trennbar sind. Meistens bleiben die auch erhalten, wenn du Text dann aus der Seite rauskopierst.
So sieht dein Text-Inhaltselement auf der Startseite aus
HTML-Code:
<div id="Hauptseite_text" class="ce_text block">
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Willkommen auf Pirapixel.com,</span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;"> diese Seite bietet einen Überblick über:<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Gimp, Pixelbilder, Bildbearbeitung und sogar </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">das Einbinden von Grafiken in verschiedenen </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Programmiersprachen. </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">Außerdem kleine Tutorials zu den verschiedensten Dingen,<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">die es sonst im Netz nur schwer, </span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;">oder sogar überhaupt nicht zu finden gibt.<br></span>
</p>
<p style="text-align: justify;"><span style="font-size: 16px; color: #ffffff;"> </span>
</p>
<p style="text-align: justify;"><span style="font-size: 14px; color: #ffff99;"><span style="font-size: 16px; color: #ffffff;">Viel Spaß beim Ausprobieren! :D</span>
<br>
</span>
</p>
</div>
und ungefähr so sollte es aussehen
HTML-Code:
<div class="ce_text block hauptseite_text">
<h1>Willkommen auf Pirapixel.com</h1>
<p>
Diese Seite bietet einen Überblick über Gimp, Pixelbilder, Bildbearbeitung und sogar das Einbinden von Grafiken in verschiedenen Programmiersprachen. Außerdem kleine Tutorials zu den verschiedensten Dingen, die es sonst im Netz nur schwer, oder sogar überhaupt nicht zu finden gibt.
</p>
<p>Viel Spaß beim Ausprobieren!</p>
</div>
Einige Erklärungen dazu:
- Deine Seite hat keine Überschrift (Struktur mit FF-Addon WebDeveloper prüfen - "Informationen - Dokumentkontur anzeigen"). Mit Insert-Tags kannst du dir auf jede Seite automatisch eine Überschrift aus dem Seitentitel generieren.
- Sparsam umgehen mit CSS-IDs. Auf einer Seite darf nämlich nicht zweimal die gleiche ID vorhanden sein. Besser CSS-Klassen benutzen.
- Kein Inline-Style benutzen (style="..."). Besser die Elemente über eine CSS-Datei formatieren. Evtl. einem Element eine CSS-Klasse geben, ist aber meistens nicht nötig (CSS-Selektoren zum Ansprechen der Elemente lernen).
- Keine unnötigen SPANs einbauen.
- Keine leeren Absätze zur Abstandskontrolle benutzen. Allgemein z.B. p {margin-bottom: 1.5em;} formatieren.
- Elementen keine Breite geben (nur in Ausnahmen), Block-Elemente erstrecken sich dann automatisch auf die zur Verfügung stehende Breite. Bei der Breite darauf achten, dass Textzeilen nicht zu lang werden (momentan in Ordnung mit den 724px).
Am besten den TinyMCE-Editor (RTE) so anpassen, dass du erst gar nicht in Versuchung kommst im RTE Schriftarten, Größen, Farben, Abstände usw. einzugeben (kann ich dir geben, schreib mir ne E-Mail keine PN).
Versuche bei der Eingabe der Inhalte nicht ans Design zu denken, sondern an semantisch gut strukturierten Inhalt. Mit CSS kannst du nachher alles zurecht biegen. Als Beispiel kannst du dir mal diese Seite ansehen http://www.mezzoblue.com/zengarden/alldesigns/ dort siehst du ca 216 Designs, welche alle das gleiche HTML im Quellcode haben. Dieses Projekt gehört zu http://www.csszengarden.com/.
Für den grauen Hintergrund hinter dem Text kannst du auch eine halbtransparente Farbe wählen z.B. rgba(31, 31, 31, 0.9) anstatt #f1f1f1, falls dir sowas gefällt. Ausprobieren kannst du das mit dem FF Addon Firebug bevor du die Werte einträgst.
Du siehst, es gibt noch vieles zu entdecken 
;
ps Dunkel muss nicht schlecht sein, nur die Kontraste müssten halt stimmen, so dass man die Inhalte entspannt aufnehmen kann, es sei denn du willst bewusst ein hohes Stresslevel erzeugen.
Anregungen zum Design
Zitieren
Zitat von Pira
Vom grundsätzlichen Gedankenansatz her bekommt die Seite von mir einen Daumen nach oben.
Lesezeichen