Hi sucinum!
Zunächst einmal: herzlich Willkommen auf dem WSB!
[q=sucinum]Habe die letzten paar Wochen angefangen, mich mit Web-Design und Kram auseinanderzusetzen und hab bergeweise Tutorials, Übersichten und Weblogs zum Thema gelesen.[/q]
Das sieht man, denn...
[q=sucinum]Hab sicher noch einiges zu lernen, aber ich denke, ich habe auch schon gute Fortschritte gemacht.[/q]
da muss ich Dir Recht geben. Ausgelernt haben wirst Du mit Sicherheit nie, da die Materie "WebDesign" immer in Bewegung sein wird (und das ist auch gut so - © Wowereit), aber für einen "Anfänger" der sich "die letzten Wochen" mit WebDesign beschäftigt hat, ist das Ergebnis recht beeindruckend.
Denn selten habe ich bei einem Anfänger einen so aufgeräumten, semantisch sinnvoll strukturierten Quelltext gesehen. Auch das eher schlichte Design gefällt mir gut.
Aber Raum für ein paar Tipps ist immer, daher: Here we go...
1. Schriftgröße
[q=sucinum]als konkretes Anliegen wüsste ich gern, wie ich die Schrift so einstellen kann, daß 10pt Standard-Grösse ist[/q]
Indem Du die Schriftgröße einfach im body-Selektor definierst, genau wie Du es getan hast. Nur würde ich an Deiner Stelle dort ein paar Änderungen vornehmen:
1.1 Die Einheit
Hier würde ich ausschließlich auf "em", anstelle von Punkt setzen.
1.2 Die Schriftgröße
Um einen Bug im IE zu umgehen (an dieser Stelle vielen Dank an Ingo für den Tipp) solltest Du im "body"-Selektor eine Schriftgröße von 101% verwenden. Das verhindert merkwürdige Ausbrüche bei der Schriftskalierung im IE... An den restlichen Stellen gibst Du die Schriftgröße dann in em an.
1.3 Die Aufteilung des CSS
Du verwendest einige Selektoren, wie z.B. "body" mehrfach. Darauf würde ich verzichten. Denn es reicht völlig aus, dass Du einen Selektor für jedes Element definierst. Eigenschaften wie Schriftart, Schriftgröße, Farbe und Hintergrundfarbe vererben sich.
D.h. wenn Du diese in einem "body"-Selektor definierst, gelten sie automatisch für alle untergeordneten Elemente, sofern Du für diese keine anderen Angaben machst.
Lesbarer wird Dein CSS, wenn Du es etwas übersichtlicher formatierst. Ich für meinen Teil bevorzuge die Schreibweise:
|
Quellcode
|
1
2
3
4
5
|
selektor
{
Eigenschaft : Wert;
Eigenschaft : Wert;
}
|
Diese werden zusätzlich alphabetisch sortiert, so geht auch bei längeren Angaben die Übersicht nicht verloren.
2. Sonderzeichen in HTML
Du verwendest Umlaute direkt in Deinem Quellcode. Diese müssen allerdings codiert werden, da diese sonst einige Browser aus dem Tritt bringen können.
So wird aus ä das codierte ä oder aus Ö wird Ö.
Weitere Informationen dazu findest Du unter:
http://de.selfhtml.org/html/allgemein/zeichen.htm#umlaute
3. Druckausgabe
Einen Punkt, den Du an Deinem CSS noch optimieren kannst, ist die Druckausgabe. Sieh Dir von Deiner Seite mal eine Druckvorschau an.
- Der Kopfbereich ist leer, da Du nur Hintergrundgrafiken verwendet hast
- Der Druck ist in dunkelgelb, was bei Farbdruckern zu einer schlechten Lesbarkeit führt
- Die Navigationsleiste ist vorhanden, auf dem Ausdruck aber sinnlos
Wenn Du ein zweites Stylesheet anlegst, es in die HTML-Datei einbindest und für den Medientyp "Druck" angibst, also "media=print", kannst Du die Druckausgabe direkt steuern.
D.h. Du kannst:
- die Ausgabe der Navigation unterbinden
- eine andere Farbe oder Schwarz als Druckfarbe definieren
- ein alternatives Logo für den Ausdruck festlegen
Wie so etwas in der Praxis ausehen kann, siehst Du z.B. an
diesem Projekt, an dem ich unter anderem im Moment arbeite. Vergleiche mal die Bildschirmansicht mit der Druckausgabe.
Weitere Informationen für die Druckausgabenoptimierung findest Du in einem anderen Thread, und zwar hier:
http://www.webstyleboard.de/wsb/thread.php?threadid=4535
So, das war es für's erste...
Ich hoffe, Dir ein wenig geholfen zu haben...
Bei weiteren Fragen, immer her damit... :grin:
LapisInfernalis
Zitat
Müsste noch #-Links unter die Hauptpunkte legen, damit das hovern auch im IE und ohne JS geht
Samstag, 26. Mai 2012, 00:44
Zum Seitenanfang
