WebStyleBoard

Hi Nashman!

Hier mein kurzer Kommentar:

Testplattform:

IE6
FireFox 0.8
Opera 7.23

1.280 x 1024

Die Optik ist zurückhaltend schlicht, aber ansprechend. Vielleicht ist sie etwas zu schlicht. Vielleicht solltest Du dezent etwas Farbe in die Sache bringen, z.B. bei den Hover-Effekten oder bei Navigationspunkt der aktuellen Seite.

Viel zu bewerten gibt es ja noch nicht, da es sich ja um das "Rohdesign" handelt.

Gut aber finde ich bereits die übersichtliche Aufteilung. In allen verwendeten Browsern sieht die Seite gleich aus, abgesehen von der Tatsache dass nur beim FireFox das Werbebanner angezeigt wird.

Quellcode und CSS sind absolut valide und auch der Lynx-Viewer zeigt ein zufriedenes Bild.

In Sachen CSS sind mir nur zwei Dinge aufgefallen:

1. Ich weiß nicht, inwieweit es sinnvoll ist, bei der Definition einer Klasse margin : 0; zu verwenden und gleichzeitig z.B. einen Wert für margin-top o.ä. anzugeben.

Sinnvoller und übersichtlicher wäre es, wenn Du alle Werte in die margin-Angabe packst, im Sinne von: margin: 0px 10px 0px 10px usw....

2. Etwas negativ fällt auf, dass Du die Schriftgröße explizit in px und nicht relativ in em angegeben hast. Damit nimmst Du den IE-Usern die Möglichkeit, die Schriftgröße zu skalieren.

Der FireFox z.B. vergrößert die Schrift dennoch, und da fällt auf, dass schnell Menüpunkte "abgehackt" werden, weil auch die Breite des Menüs nicht relativ definiert ist. Hier solltest Du nach Möglichkeit auch em verwenden...

Eine Sache noch zum HTML:

Haben die leeren Kommentare irgendeine Funktion? Reine Neugierde...

Insgesamt finde ich das Layout schon recht ansprechend, jedoch solltest Du durch eine farbliche (aber nicht zu penetrante) Akzentuierung verhindern, dass es etwas langweilig wird.

Soweit meine Meinung, Baba...

[q=Nashman]Danke LapisInfernalis für deine Kritik.[/q]
Gern geschehen...

[q=Nashman]Zudem finde ich das für mich Logischer nachzuvollziehen, da ich nur im Quelltext arbeite und auf jegliche Art von HTML Editor verzichte.[/q]
Genau deswegen ja. Ich arbeite auch nur im Quelltext, und da finde ich eine zusammengefasste Schreibweise einfach übersichtlicher, da kompakter.

Aber das ist Geschmackssache...

Sogar im Netscape 4.7 alles wunderbar.
Ein bisschen farblos, langweilig. Aber Quellcode-technisch alles 1A! Arbeite noch ein wenig am Design, dann könnte es was werden.
Validität sollte Design nicht ersetzen!

Ja bitte hier hast Du einen Screenschrott :-)

http://www.intasol.de/wsb/nash.png


[EDIT BY El Cheffe]
Bei Bildern in Übergrösse reicht doch auch nen einfacher Link ... anstatt mit nen riesen Bild die Grenzen zu sprengen :]
[/EDIT]

Hi,
drei Kleinigkeiten fallen mir noch auf:
1. im IE der große Freiraum im Kopf, der im Mozilla mit Werbung gefüllt wird. (Wird wohl auch daran liegen, daß ich iom IE JS deaktiviert habe). Hier wäre doch eine noscript-Anzeige nicht verkehrt.
2. der untere Copyright-Kasten verschiebt sich je nach Schriftgrad. Kann es sein, daß hier das margin noch in px statt em angegeben ist?
3. Je nach voreingstellter Schriftfarbe ist der Inhalt schlecht bis garnicht zu lesen. Welche Schriftfarbe hättest Du denn gerne angezeigt? Definiere diese doch einfach.
Gruß
Ingo.

hi,
ein wesentlicher unterschied ist, daß du #inhalt floaten läßt, address aber nicht. Ich würde überhaupt address in den inhaltscontainer setzen, dann erledigt sich das problem von selbst.
nicht günstig ist übrigens em für die schriftgröße in body - hier sollte % stehen, um browserbugs zu vermeiden (verkleinere mal den schriftgrad im IE).

übrigens: werbung bleibt mit im IE ohne JS immer noch erspart..;-)
Gruß
Ingo

[q=Ingo]nicht günstig ist übrigens em für die schriftgröße in body - hier sollte % stehen, um browserbugs zu vermeiden (verkleinere mal den schriftgrad im IE).[/q]

Sorry, aber dass stimmt so nicht.

Man kann, und vor allem sollte, auch für den Body em als Einheit für die Schriftgröße verwenden. Nur gibt es dabei eine Kleinigkeit zu beachten:

Nash hat in diesem Beispiel für den body eine Schriftgröße von 0.8 em und für die Links in der Navigation eine Größe von 0.85 em gewählt, was ein kurzer Blick in das verwendete StyleSheet verrät...

Nun ist die Eigenschaft font-size eine Eigenschaft, die vererbt wird. Das hat zur Folge, dass sich die 0.85 em Schriftgröße an der Schriftgröße des Body orientieren. Anders ausgedrückt, beträgt die tatsächliche Schriftgröße des Menüs 0.85 x 0.8 em.

Dass die Schrift der Links beim Verkleinern der Schriftgröße im IE so klein wird ist also kein Fehler. Browser wie FireFox oder Opera verhalten sich im übrigen genauso.

It's not a bug, it's a feature...

Vielleicht wird das ganze an einem anderen Beispiel deutlicher:

Gibt man für den Body eine Schriftgröße von 1 em und für ein untergeordnetes Element eine Schriftgröße von 0.5 em an, so beträgt die resultierende Schriftgröße dieses Elements genau die Hälfte des Elternelements, in diesem Fall des Bodys.

Hier eine kleine Demonstrationdieses Sachverhaltes. Verkleinert und vergrößert einfach mal die Schrift, und es wird klar, was gemeint ist. Wie gesagt, das ganze funktioniert in allen Browsern.

Verwendet man anstelle von em für den Body Prozente für die Angabe der Schriftgröße, so zeigt sich exakt das gleiche Verhalten, wie ein weiteres Beispiel zeigt...

Der Trick daran ist also, die Vererbung der Schriftgrößen im Auge zu behalten, wenn man mit relativen Größenangaben arbeitet. Ob em oder % spielt dabei keine Rolle.

Noch beachten sollte man, dass man am besten keine Schriftgrößen verwendet, die kleiner als 1 em sind...

Einen schönen Abend noch zusammen...

LapisInfernalis

Hi,
sorry daß ich widersprechen muß, aber es stimmt schon, daß man das Elternelement - meist body -
nicht in em sondern in % definieren sollte. Und es _ist_ ein Bug im IE und kein Feature...
Ich habe dazu auf meiner Seite zu em eine kleine Demonstration des Bugs eingebaut:

http://www.1ngo.de/web/em.html#FontSize

Direkt über dem Test ist auch ein Link zu der EfA-Seite, die diesen Bug ausführlich erklärt.
Gruß
Ingo

Hallo Ingo!

Ich fürchte, dass wir hier langsam vom Thema abdriften, aber eine Kleinigkeit kann ich mir nicht verkneifen anzumerken:

[q=Ingo]Und es _ist_ ein Bug im IE und kein Feature...[/q]
Damit war eigentlich nur die Tatsache gemeint, dass die Schriftgröße vererbt wird, und die Schrift im Menü zwangsläufig kleiner werden muss. Etwas anderes passiert ja nicht...

[q=Ingos Seite]body { font-size:101%; } (die empfehlenswerte Voreinstellung)[/q]
Es mag ja tatsächlich sein, dass der IE sich buggy verhält bei kleinen em Größen (mehr dazu weiter unten), aber eine Schriftgröße von 101%? Das klingt für mich sehr nach Workaround, und die mag ich wirklich nicht...

Worauf ich hinaus will ist, dass man mit diesem Bug kein Problem hat (und kein Workaround) braucht, wenn man sich an die Tipps und Ratschläge vom W3C hält.

Hierzu zur Lektüre: Care with font size

[q=W3C]Avoid sizes in em smaller than 1em for text body, except maybe for copyright statements or other kinds of "fine print."[/q]
Wie ich bereits erwähnt habe...

Wenn man schon kleinere Schriften haben möchte, dann durch die Angabe einer grundsätzlichen Schriftgröße (wie 1 em für den Body) und Angaben wie smaller, bigger, small, x-small usw. siehe verlinktes Dokument weiter oben:

[q=W3C]set a base font-size for the document and use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.[/q]

Und das klappt auch im IE...

[q=Ingo]es stimmt schon, daß man das Elternelement - meist body -
nicht in em sondern in % definieren sollte[/q]
Nicht, dass ich Deine Fähigkeiten in Frage stellen möchte, aber wenn ich zwischen Deiner Aussage und dem Ratschlag vom W3C wählen muss...

[q=W3C]Use relative length units such as percent or (better) em[/q]
Soviel dazu.

Sorry Nash für das Abdriften vom Thema... Nu aber back to the roots...

Hi,
sorry daß ich nochmals widersprechen muß, aber Du liegst da wirklich falsch.

Zugegeben, 101% statt 100% ist ein Workaround, aber ein vernünftiger, der nur hilft und nicht schadet. Wenn Du anderer Meinung bist, lies doch bitte den bei mir verlinkten EfA-Artikel. Ich denke, mit dem einen Prozent (manche nehmen auch nur 100.01%) vergibt man sich nichts und elemeniert zuverlässig die Bugs einiger Browser.

Aber das Wichtigste: man hat mit dem IE-Bug auch zu tun bei Schriftgrößen >1em (z.B. für Überschriften) und insbesondere aber auch bei Weitenangaben in EM.
Der Vorschlag es W3C, besser EM als % zu verwenden, ist sehr allgemein gehalten und tatsächlich empfehlenswert - jedoch _nicht_ für das äußerste Elternelement. Der Haken ist einfach der, daß das W3C nunmal keine Browser-Bugs in seine Empfehlungen einbezieht.

Aber damit Du - und wer sonst noch nicht davon überzeugt ist - die Notwendigkeit einer %-Angabe eines Elternelements bei Nutzung von EM für Schriftgrößen und/oder Weitenangaben sieht, bitte einmal meine Seite http://www.1ngo.de/web/em.html im IE (mit aktiviertem Javascript) in zwei Fenstern anzeigen lassen und in beiden den Schriftgrad auf 'kleiner' stellen ('größer' geht freilich auch, wird aber unübersichtlich). Nun in einem Fenster font-size:1em oder 1.01em anklicken und sich die fatalen Auswirkungen der Beispielcodes hierunter ansehen:
Auch die H1-Überschriften, selbst im zweiten Beispiel mit 1em für das umschließende DIV, sind zu klein. Ebenso werden beim folgenden Beispiel die Weitenangaben in EM nicht korrekt umgesetzt.

Sicher bleibt jedem unbenommen, sich strikt an die Empfehlung des W3C zu halten und _immer_ EM für font-size zu wählen. Nur sollte dann klar sein, daß eine Schriftgradänderung im am meisten verbreitesten Browser dann in vielen Fällen schlicht unbrauchbar wird, da die Elemente eben nicht 'kleiner' oder 'größer' angezeigt werden, sondern 'winzig klein' oder 'riesen groß' - und gerade die Möglichkeit der Schriftgradeinstellung im IE ist doch einer der Punkte, die für die Verwendng von EM sprechen.
Gruß
Ingo

[q=Ingo]Der Haken ist einfach der, daß das W3C nunmal keine Browser-Bugs in seine Empfehlungen einbezieht.[/q]
Da hast Du sicher recht...

Ich werde mir die ganze Thematik bei einer ruhigen Gelegenheit noch einmal zu Gemüte führen. Natürlich sind die W3C-Empfehlungen nicht immer der Weißheit letzter Schluß.

Layouten mit Schriften und floatenden Elemenen, egal ob mit em oder Prozent, kann einen manchmal fast in den Wahnsinn treiben, aber dazu später an passenderer Stelle mehr...

Jetzt aber zurück zum Thema Jungs...

Warum übertragt Ihr beide nicht Eure Postings in die Beitragsreihe, ich fand das Thema sehr interessant und finde es schade, dass die Diskussion schon vorbei ist.

Nun zum eigentlichen Thema:


Warum das? Warum haste nicht in Deiner CSS-Datei einfach h1 deklariert??

Hi,
ok, ich denke, der Sachverhalt dürfte auch ausreichend erörtert sein. Nur möchte ich nochmals erwähnen, daß das Thema % ./. em durchaus mit dem Thema - der vorgestellten Seite - zu tun hat. Denn auch hier wirkt sich der IE-Bug ganz deutlich aus und die kleine Änderung von font-size:0.8em auf 80% für body beseitigt ihn; völlig ohne Nebenwirkungen.

Zu dem aufgeführten H1-Codeschnipsel: Wenn wir den Quelltext jetzt schon so auseinandernehmen - ich finde auch, daß hier einiges überflüssig ist.
Zum einen das name-Attribut - die ID reicht als Anker doch völlig aus.
Zum anderen würde ich H1 nicht zweimal vergeben, sondern für die Inhaltsüberschrift dann H2 nehmen. Dadurch würden auch getrennte Definitionen für h1 und h1#titel entfallen.
Der SPAN hingegen macht schon Sinn, um den Text für nicht-CSS Darstellung anzuzeigen. Ich würde ihn allerdings auch im Ausdruck ausgeben.
Gruß
Ingo