Seitengestaltung mit CSS

[karl123]

Hallo allerseits,

ich bitte um eine Bewertung der folgenden Seite:
http://www.stangerweb.de/tut/tut_05.php

Ich möchte wissen

• ob das, was ich da schreibe, richtig ist
• ob es verständlich ist
• was man besser machen kann

Für eine Rückmeldung hier im Forum oder per Mail wäre ich dankbar.

Karl

[Felix Riesterer]

Lieber karl123,

http://www.stangerweb.de/tut/tut_05.php

• was man besser machen kann

Du propagierst Dort eine Div-Wüste, oder wie soll ich den HTML-Code dort verstehen, der nur so von bedeutungslosen <div>s wimmelt?

Anstatt immer nur ein und dasselbe Element zu benutzen, könntest Du doch andere Elemente nehmen, die die Natur der durch sie ausgezeichneten Inhalte genauer bestimmen. Beispiel:

<!-- Header -->  
<div id="header">Das ist der Header  
    <div id="header_logo">Logo</div>  
    <div id="header_login">Ein Login-Bereich</div>  
    <div id="header_search">Ein Such-Bereich</div>  
    <div id="header_links">Links</div>  
    <div id="header_sitemap">Eine Sitemap</div>  
    <div id="header_menu">Ein Men&uuml;</div>  
    <div id="header_submenu">Ein Sub-Men&uuml;</div>  
</div>

Es geht hier nur um den Header einer Seite. Wohlgemerkt um einen relativ kleinen Teil, der nur den "oberen Rand" der Seite darstellen soll! Dass Du hier dermaßen mit divs um Dich wirfst, halte ich für etwas übertrieben. Das alles kann unmöglich sinnvoll in einem Header untergebracht werden.

Ein Alternativ-Vorschlag:

<div id="header">  
    <form id="header_login"></form>  
    <form id="header_suche"></form>  
    <ul id="links"></ul>  
    <ul id="sitemap"></ul>  
    <ul id="header_menu"></ul>  
    <ul id="header_submenu"></ul>  
</div>

Das Logo-Div kann man getrost entfernen, da die dazu gehörende Grafik auch so dem Header-Div zugewiesen werden kann.

Eine Verständnis-Frage tut sich gerade auf: Was ist an dem "Submenü" "sub"? Wenn es im Ernst ein "Unter"-Menü sein soll, dann frage ich von was? Ist es eine Untersektion des header_menus? Und warum ist es dann kein Kindelement desselben?

Außerdem vertrete ich eine andere Auffassung, was die Reihenfolge von Inhalten in einem HTML-Dokument angeht. So sehe ich den Inhalt gerne an erster Stelle, gefolgt von dem "header" und dann dem "Footer", um am Ende noch die Navigation der Seite zu haben. Mit CSS werden diese Bereiche dann entsprechend auf der Seite positioniert. Im kleinen Maßstab siehst Du das bereits auf meiner Website. Im etwas größeren siehst Du das auf der Schulwebsite, die ich betreue.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[karl123]

Hallo Felix,

vielen Dank für deine Kritik. Dein Alternativvorschlag gefällt mir sehr gut. Ich denke, ich habe etwas gelernt.

Grund für das Logo-div liegt darin, dass ich das Header-Hintergrundbild und das Logo unabhängig voneinander platzieren möchte und trotzdem das Logo als Hintergrundbild haben möchte. Ich denke, dass ich beide Alternativen beschreiben sollte.

Sub-Menü: hast du Recht. Ist nicht sinnvoll.

Reihenfolge: ich denke, das ist Geschmacksache. Ich werde mir aber deine Seite einmal genauer ansehen.

Nochmals vielen Dank für deine Kritik.

Karl

[Jonathan]

Hallo karl123,

Ich kann da nicht mit übereinstimmen. Einerseits die schon angemerkte div-Suppe, andererseits halte ich aber auch die dort angemerkten Meta-tags teilweise für unwichtig und teilweise für extrem überflüssig.

Insbesondere werden keywords oder description meiner Erfahrung nach kaum bis gar nicht beachtet, dein robots-Eintrag verursacht du nur das übliche Standardverhalten, was höchstens bringt, dass du keinen Bot-Betreiber (z.B. wegen Urheberrechtsverletzungen) mehr verklagen kannst, weil du den Bots das Indizieren ja explizit erlaubst. Und zwingend an revisit-after halten sich wahrscheinlich nur die wenigsten Bots, die Berücksichtigen eher, wie oft die Seite tatsächlich aktualisiert wird und welche Relevanz deine Seite hat.

Jonathan

[karl123]

Hall Jonathan,

Thema Div-Suppe: Da werde ich die Empfehlungen von Felix berücksichtigen.

Metatags: Die Meinungen gehen hier weit auseinander; ich weiß definitiv nicht mehr, was gut oder schlecht ist.

Könntest du mir eine Empfehlung geben, welche Metatags du z.B. nehmen würdest? Ich würde zumindest gerne eine Empfehlung geben, dann aber auch erwähnen, dass es dazu gegensätzliche Meinungen gibt.

Vielen Dank für deine Kritik.

Karl

[Ingo Turski]

Hi,

Metatags: Die Meinungen gehen hier weit auseinander; ich weiß definitiv nicht mehr, was gut oder schlecht ist.

Meinungen sind eines - verifizierte Erfahrungen etwas anderes.
Auf Google bezogen ist Fakt und überprüfbar, dass folgendes sinnvoll ist:
description -> wird oft auf den Ergebnisseiten angezeigt, allerdings nicht bei der Suche verwendet.
robots -> nur Verbote wirken sich aus, index oder all sind also unnötig.
http-equiv="content-type" -> kann wichtig sein, wenn Sonderzeichen vorkommen und der Server selbst keine Kodierung vorgiebt.
http-equiv="content-language" -> dito, wobei es auch andere Möglichkeiten zur Angabe gibt.

meta keywords wirken sich definitv nicht positiv aus, was leicht nachprüfbar ist. Spekulation ist hingegen, ob sie sich (wenn übertrieben) negativ auswirken; meiner Meinung nach ja.

freundliche Grüße
Ingo

[Beat]

ich bitte um eine Bewertung der folgenden Seite:
http://www.stangerweb.de/tut/tut_05.php

Ich möchte wissen

• ob das, was ich da schreibe, richtig ist
• ob es verständlich ist
• was man besser machen kann

Für eine Rückmeldung hier im Forum oder per Mail wäre ich dankbar.

Hallo

OK, habe mich zum Tutorial NR 5 durchgeklickt.

Erster Eindruck: Schrift ist mir zu klein.
Skalieren geht.

Ich wurde kürzlich hier wegen meiner Länderflaggen kritisiert. Die Kritik kann dir also von hiessigen Self-Politikern auch widerfahren.

<Zitat>
"Eine Webseite besteht prinzipiell aus einem Kopfbereich (Header), einem linken Bereich, einem rechten Bereich, einem Mittelteil und einem Fußbereich (Footer). Die Bereiche haben unterschiedliche Funktionen und können mittels CSS unterschiedlich dargestellt werden."
</Zitat>

Das erachte ich für falsch. Du vermittelst mir den Eindruck, als ob meine eigenen Seiten, die keinen Footer haben und manchmal auch weder linke noch rechte Spalte haben, irgendwie nicht konform sind.

Ich finde das auch sonderbar, weil du vorhin gerade Zengarten als Beispiel nennst, wo doch gerade dort dein 'prinzipiell' immer wieder unterwandert wird.

Deine eigene Seite weist keine rechte Spalte auf.

Das ist schade, denn an diesem Punkt hast du irgendwie doch meine eher kritische und misstrauische Ader geweckt.
Ich gewinne den Eindruck, mit Dogmatik und nicht mit Weitblick konfrontiert zu sein.

Was ich bis zum Punkt "HTML-Gerüst einer Webseite" vermisse, ist ein Hinweis auf die Wirklichkeit, dass unser Design immer vor uns unbekannten Geräten und Viewportgrössen stattfindet.

Leider geht's dann mal zuerst mit HTML Code weiter.
So grundlegende Dinge wie die Frage, ob man feste oder relative Schriftgrössen verwenden soll, vermisse ich ich.

Bei diesem Punkt angelangt, mache ich auch einen Test. Ich skaliere das Browserfenster. Deine Seite hält dem Test innerhalb vernünftiger Grenzen stand.

Dann im ersten Code-Ausschnitt finde ich folgendes Problem:
<!-- wird benötigt für festes Layout -->
Das ist ein Thema für sich selbst, aber von so zentraler Bedeutung dass es eigentlich viel zu wenig behandelt wird. Zeichensatz!

Ich möchte an diesem Punkt nicht weitermachen.
Irgendwie willst du alles an einer Standardseite erklären, deren Code zunächst nur mit HTML zu tun hat. Irgendwie verfehlst du damit den Titel deiner Seite.

Auch solltest du deine Codebeispiele validieren
http://www.stangerweb.de/tut/codebsp_020.php

mfg Beat

[karl123]

Hallo Beat,

vielen Dank für deine Kritik.

Schrift: Wollte ich eigentlich nicht ändern. Da Skalieren funktioniert, hoffe ich, dass es nicht ein ko-Kriterium ist.

Länderflaggen: Ziel ist es eigentlich, die Seite oder zumindest Teile der Seite in Englisch darzustellen; daher die Flaggen. Andererseits können die Flaggen weg, solange das noch nicht funktioniert. Werde ich umsetzen.

<Zitat>: Aus deiner Kritik sehe ich, dass meine Beschreibung hier nicht richtig ist. Irgendwie muss ich darstellen, dass alle diese Bereiche "optional" sind. Ich werde mir etwas einfallen lassen.

Geräte: Guter Hinweis; das habe ich bisher noch überhaupt nicht berücksichtigt. Bisher bin ich nur von einem Bildschirm ausgegangen. Ich lasse mir etwas einfallen - das kann aber dauern.

Schriftgröße: Habe ich weiter unten vermerkt.
<Zitat>Die Schriftgröße sollte relativ gewählt werden, um dem Benutzer Größenänderungen mit seinem Browser zu erlauben. Es gibt aber bei relativen Schriftgrößen gewisse Dinge zu beachten, die bei Roman Koch beschrieben sind. Weiterführende Artikel findet man z.B. bei Die barrierefreie Webseite.</Zitat>

Zeichensatz: Werde ich korrigieren.

Standardseite: Ich habe es allerdings vor, alles anhand der beiden Layouts zu erklären. Ich bin auch der Meinung, dass das bei einem sehr großen Prozentsatz aller Webseiten funktioniert. Dass es immer Ausnahmen gibt, ist mir bewusst.
Aber vielleicht wäre dieser Punkt eine getrennte Diskussion wert.

Nochmals vielen Dank für deine Kritik.

Karl

[Matze]

Hallo Karl!

• ob das, was ich da schreibe, richtig ist

"Es können ganze Webseiten mit Flash realisiert werden."
Du vergisst dabei, dass immernoch HTML erforderlich ist und der Flash-Film "nur" eingebettet wird.

Dann hab ich mir deine RegEx zur Prüfung von E-mailadressen angeschaut. test@localhost ist eine gültige E-mailadresse, wird aber von dir nicht akzeptiert. Weitere Tests hab ich dann vermieden.

"PHP lässt sich beliebig mit HTML mischen"

Das könnte den Eindruck erwecken sowas ist auch richtig:

  
<?PHP  
<body>  
echo $inhalt;  
</body>  
?>  

"Überlegen Sie mal an dieser Stelle, warum man Javascript-Variablen nicht an PHP übergeben kann."

Mit Ajax geht das sehr wohl. Eine Abfrage an den Server absetzen und die Antwort auswerten.

Insgesamt wirkt mir das Ganze auch zu oberflächlich bzw. sind einige techniken erklärt, andere Dinge bleiben völlig aussen vor. Was ist z.B. mit SQL-Injection? Was wenn mein Server einige Angaben wie den Referer überhaupt nicht sendet?

An vielen Stellen sieht es aus, als ob du ein paar Codeschnipsel wahllos erklärst. Mir fehlt irgendwie der rote Faden.

• ob es verständlich ist

Das passt schon, oder ich bringe zu viel Grundwissen mit ;)

• was man besser machen kann

Zu deinem Quelltext wurde schon Kritik geäussert.
Ein paar Tippfehler gibts noch.

Grüße, Matze

[karl123]

Hallo Matze,

Vielen Dank für deine Kritik.

Flash: Stimmt, was du sagst. Werde ich korrigieren.

RegEx: Inzwischen habe ich herausgefunden, dass das nicht trivial ist. So gibt es ein RegEx, 1/2 A4 Seite groß, welches es wirklich können soll. Vielleicht sollte ich das Kapitel streichen oder zumindest anders beschreiben.

Mischen: Du weißt, dass ich es anders gemeint habe. Mein Fehler ist, es nicht genau genug beschrieben zu haben. Werde ich korrigieren.

Ajax: Du wirst es nicht glauben, aber das habe ich vor den Ajax-Zeiten verfasst (zumindest wusste ich es damals noch nicht). Werde ich entsprechend erwähnen.

Oberflächlich, roter Faden: Hm, vielleicht gibt es irgendwann eine "völlig überarbeitete Version". Dazu habe ich jetzt leider keine Zeit. Aber der Punkt gibt mir schon zu denken.

Nochmals Danke für deine Kritik

Karl

[Matze]

Hallo Karl!

RegEx: Inzwischen habe ich herausgefunden, dass das nicht trivial ist. So gibt es ein RegEx, 1/2 A4 Seite groß, welches es wirklich können soll. Vielleicht sollte ich das Kapitel streichen oder zumindest anders beschreiben.

Für E-mailadressvalidierung (was ein schönes Wort^^) benutz ich die Funktion von SelfHTML. Weil ich den Link grad nicht finde hier der Code:

  
 ## E-Mail Prüffunktion von selfthtml.org  
  
 function check_mail($email){  
  $nonascii      = "\x80-\xff";  
  $nqtext        = "[^\\\\$nonascii\015\012\"]";  
  $qchar         = "\\\\[^$nonascii]";  
  $protocol      = '(?:mailto:)';  
  $normuser      = '[a-zA-Z0-9][a-zA-Z0-9_.-]*';  
  $quotedstring  = "\"(?:$nqtext|$qchar)+\"";  
  $user_part     = "(?:$normuser|$quotedstring)";  
  $dom_mainpart  = '[a-zA-Z0-9][a-zA-Z0-9._-]*\\.';  
  $dom_subpart   = '(?:[a-zA-Z0-9][a-zA-Z0-9._-]*\\.)*';  
  $dom_tldpart   = '[a-zA-Z]{2,5}';  
  $domain_part   = "$dom_subpart$dom_mainpart$dom_tldpart";  
  $regex         = "$protocol?$user_part\@$domain_part";  
  return preg_match("/^$regex$/",$email);  
 }  

Man möge mir bitte verzeihen, dass ich die Kommentare entfernt habe.

Mischen: Du weißt, dass ich es anders gemeint habe. Mein Fehler ist, es nicht genau genug beschrieben zu haben.

Natürlich weiß ich das, aber ich hab versuch DAU zu spielen :)

Oberflächlich, roter Faden: Hm, vielleicht gibt es irgendwann eine "völlig überarbeitete Version". Dazu habe ich jetzt leider keine Zeit. Aber der Punkt gibt mir schon zu denken.

Du verfolgst da wirklich ein lobenswertes Ziel und du hast meiner Meinung nach auch einen ziemlich guten Anfang gemacht, aber allein die komplexität von SelfHTML zeigt, dass es doch nicht so einfach ist. Ich weiß, du strebst nicht diese Größe an.

Was meiner Meinung nach fehlt, ist eine klare Zielgruppe. Du mischt HTML, CSS, JavaScript und PHP so wild durcheinander, dass einem ganz schwindlig wird ;)
Wie wär es wenn du z.B. erstmal ganz einfach und detailiert erklärst wie das Grundgerüst einer HTML-Seite aussieht. Was die Unterschiede in den Sprachversionen sind, welche Tags genau was bewirken und welche sein müssen, sein können oder weg gelassen werden sollten. Sowas wie <meta name="Robots" content="index, follow" /> z.B.
Als nächstes kämen meiner Meinung nach die Tags innerhalb vom Body.
Wenn ich z.B. ul und li kenne und weiß wozu sie gut sind, werde ich keine Div-Suppe mehr für Menüs verwenden. Also immer schön der Reihenfolge nach.
Danach halt CSS, dann JavaScript und PHP bzw. Ajax wär schön.

Ich hoffe dur verstehst jetzt besser was ich mit dem roten Faden meinte.

Grüße, Matze

[Jonathan]

Hallo Matze,

Für E-mailadressvalidierung (was ein schönes Wort^^) benutz ich die Funktion von SelfHTML. Weil ich den Link grad nicht finde hier der Code:

E-Mail Prüffunktion von selfthtml.org

function check_mail($email){
  $nonascii      = "\x80-\xff";
  $nqtext        = "[^\\$nonascii\015\012"]";
  $qchar         = "\\[^$nonascii]";
  $protocol      = '(?:mailto:)';
  $normuser      = '[a-zA-Z0-9][a-zA-Z0-9_.-]';
  $quotedstring  = ""(?:$nqtext|$qchar)+"";
  $user_part     = "(?:$normuser|$quotedstring)";
  $dom_mainpart  = '[a-zA-Z0-9][a-zA-Z0-9._-]\.';
  $dom_subpart   = '(?:[a-zA-Z0-9][a-zA-Z0-9._-]\.)';
  $dom_tldpart   = '[a-zA-Z]{2,5}';
  $domain_part   = "$dom_subpart$dom_mainpart$dom_tldpart";
  $regex         = "$protocol?$user_part@$domain_part";
  return preg_match("/^$regex$/",$email);
}

  
Sieht irgendwie fehlerhaft aus. Zumindest der Domain-Part scheint Umlautdomains und längere TLDs (.museum z.B.) nicht zu berücksichtigen.  
  
Meiner Ansicht nach ist es besser, eher invalide Mails zuzulassen, als gültige Mail-Adressen zu behindern, solange man natürlich so Sachen wie Code-Injection ausschließt.  
  
Jonathan

-- 
[Selfcode:](http://emmanuel.dammerer.at/selfcode.html) [ie:( fl:{ br:> va:) ls:& fo:) rl:? ss:} de:> js:| ch:? mo:} zu:)](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%28+fl%3A%7B+br%3A%3E+va%3A%29+ls%3A%26+fo%3A%29+rl%3A%3F+ss%3A%7D+de%3A%3E+js%3A%7C+ch%3A%3F+mo%3A%7D+zu%3A%29)

[Matze]

Hallo Jonathan!

Sieht irgendwie fehlerhaft aus. Zumindest der Domain-Part scheint Umlautdomains und längere TLDs (.museum z.B.) nicht zu berücksichtigen.

.museum u.ä. hab ich in der Tat noch nie getestet. Vielleicht wurde das Script auf SelfHTML auch mittlerweile aktualisiert.

Meiner Ansicht nach ist es besser, eher invalide Mails zuzulassen, als gültige Mail-Adressen zu behindern, solange man natürlich so Sachen wie Code-Injection ausschließt.

Da bin ich ganz deiner Meinung. Ich dachte bis jetzt noch, dass oben genanntes Script diese Anforderungen erfüllt :|

Grüße, Matze

[Beat]

Bleibt noch die Frage, ob du @example.com oder @tld.example als valide Emailadresse speichern würdest.
Form-valide ist es ja. Aber da ist noch die Betriebsinvalidität.

mfg Beat

[Matze]

Hallo Beat!

Bleibt noch die Frage, ob du @example.com oder @tld.example als valide Emailadresse speichern würdest.
Form-valide ist es ja. Aber da ist noch die Betriebsinvalidität.

Diese Prüfung erfolgt in der Regel durch Double Opt-In.

Grüße, Matze

[Ingo Turski]

Hi,

Flash: Stimmt, was du sagst. Werde ich korrigieren.

spar's Dir - es stimmt natürlich nicht.
Eine reine swf wie z.B der Header von Jeena kann natürlich auch direkt im Browser aufgerufen werden genauso wie eine komplette Flash-Seite.

freundliche Grüße
Ingo

[Matze]

Hallo Ingo!

Flash: Stimmt, was du sagst. Werde ich korrigieren.
spar's Dir - es stimmt natürlich nicht.
Eine reine swf wie z.B der Header von Jeena kann natürlich auch direkt im Browser aufgerufen werden genauso wie eine komplette Flash-Seite.

Und das nennt sich dann Website nur weil es, das richtige Plugin voraus gesetzt, im Browser dargestellt werden kann? Somit wäre auch ein animiertes Gif oder ein JavaScript/Applet eine Website? Alles davon schneidet sich nicht mit meiner Definition, sorry.

Grüße, Matze

[Ingo Turski]

Hi,

Und das nennt sich dann Website nur weil es, das richtige Plugin voraus gesetzt, im Browser dargestellt werden kann? Somit wäre auch ein animiertes Gif oder ein JavaScript/Applet eine Website?

nein, natürlich nicht. Aber eine _reine_ Flash-Seite muss eben nicht in HTML eingebunden werden - sie läuft auch so inkl. der Flash-Navigation; vorausgesetzt natürlich, das passende Plugin ist installiert. Ohne Plugin wird aber auch bei Einbindung in eine HTML-Seite nichts passieren - außer vielleicht ein Javascript-Check mit ggfls. Fehlerausgabe.

Alles davon schneidet sich nicht mit meiner Definition, sorry.

Dann trifft Deine Definition auch auf reine Flash-Seiten zu, wovon es ja nicht wenige gibt.

freundliche Grüße
Ingo

[karl123]

Hallo,

wenn ich jetzt zurückblicke auf das, was ich im Tutorial vermitteln will, dann ist es nicht wirklich wichtig, ob es jetzt noch ein wenig HTML bei der Flash-Seite braucht oder nicht. Die Inhalte sind halt eben mit Flash gemacht und nicht mit HTML.
Ich akzeptiere ja Genauigkeit und Grundsatzdiskussion. Aber, kann man da nicht einmal 3 gerade sein lassen? Ich weiß, es ist letztendlich falsch, aber ich sehe das Ergebnis ohne Schaden für den Leser.

Karl

[Matze]

Hallo Ingo!

nein, natürlich nicht. Aber eine _reine_ Flash-Seite muss eben nicht in HTML eingebunden werden - sie läuft auch so inkl. der Flash-Navigation; vorausgesetzt natürlich, das passende Plugin ist installiert. Ohne Plugin wird aber auch bei Einbindung in eine HTML-Seite nichts passieren - außer vielleicht ein Javascript-Check mit ggfls. Fehlerausgabe.

Ebend, "sie läuft auch so(...)". Das tun auch *.wav, *.jpg, *.mpg... Das heißt, dass die Datei nur den Player, das Plugin, benötigt.
Eine Homepage / Website... wie auch immer du es nennen willst ist für mich etwas völlig anderes als irgendein Plugin welches sich bei Bedarf mit irgendeinem Server verbindet.
Das tut nämlich auch der Windows-Media-Player und die meißten anderen Programme die hier so laufen weil sie deswegen nicht deinstalliert wurden ;)

Echt eine Grundsatzdiskussion? Hab ich gar nicht so empfunden :)

Alles davon schneidet sich nicht mit meiner Definition, sorry.
Dann trifft Deine Definition auch auf reine Flash-Seiten zu, wovon es ja nicht wenige gibt.

Was du meinst sind Flash-Filme eingebettet in HTML wovon es zum Glück recht wenige gibt. Von der anderen Sorte sind mir zum Glück noch keine untergekommen. Mein Standard-Browser würde sie ohnehin ignorieren.

@Karl:
"aber ich sehe das Ergebnis ohne Schaden für den Leser"

Dann denk bitte auch an die "Leser", die Flash nicht "lesen" können weil sie entweder körperliche Defizite haben (Sehschwäche, Blindheit o.vgl.b.) oder ein Bot sind (z.B. Google). Diese beiden Gruppen können nämlich sehr wohl zwischen einem Film und einer Seite unterscheiden.

Grüße, Matze

Grüße, Matze

[Ingo Turski]

Hi,

zur bisherigen (berechtigten) Kritik noch ein paar eitere Punkte, die mir aufgefallen sind:

• Du gibst oft und völlig unreflektiert an, dass Seitenelemente scrollen können oder nicht. Das ist ein so komplexes Thema, dass es gesondert behandelt und besonders auf die Probleme dabei eingegangen werden muss.
• Dein HTML-Beispielcode ist Murks. Besonders übel die Einbindung des IE7-Scripts (auch noch direkt von Google) und des CSS (AFAIK stellt der IE das CSS verzögert dar und Opera im Fullscreen-Modus gar nicht).
  "Für den IE6, der immer noch viel benutzt wird, muss der IE7 emuliert werden." ist Blödsinn!
• font-size:1em für body ist übel; informiere Dich über die hier möglchen Browserbugs
• Du propagierst absolute (bzw. fixe) Positionierung; dies sollte jedoch ein Ausnahmfall sein und Einsteigern noch gar nicht empfohlen werden.
  Du nselbst setzt fixierte Positionierung so ein, dass die Navigation bei Schriftvergrößerung oder in zu niedrigem Fenster wegen dem - eigentlich unnötig fixirtem Footer - teilweise unbrauchbar wird.

freundliche Grüße
Ingo

[karl123]

Hallo Ingo,

Danke für deine Kritik.

Scrollen: Kann ich nichts mit anfangen. Ich schaue da noch einmal nach.

IE7-Script: Hier habe ich eine andere Meinung: Warum sollte ich meine und die Energie meiner Leser darauf verschwenden, bei Browsern die Fehler der Vergangenheit mittels Hacks zu korrigieren? Erstens wird die Gemeinde der IE6-User stetig kleiner; zweitens hat da jemand eine Lösung, die ich gerne nutze. Ich möchte das Script auch nicht auf meiner Seite anbieten, da ich keinesfalls Urheberrechte verletzen möchte.

Für den IE6...: Da lasse ich mir eine andere Formulierung einfallen.

font-size: War mir nicht bekannt. Werde mich informieren.

Fixe Positionierung: Webseitenlayout ist Geschmacksache. Das 2. Layout hat keine fixe Positionierung.

Probleme bei Navigation: da werde ich mal nachschauen, wird aber etwas dauern.

Deine wehemente Kritik bezüglich des IE7-Script gibt mir zu denken. Kannst du da mal konkreter werden. Meine Meinung habe ich ja oben genannt.

Viele Grüße

Karl

[Beat]

IE7-Script: Hier habe ich eine andere Meinung: Warum sollte ich meine und die Energie meiner Leser darauf verschwenden, bei Browsern die Fehler der Vergangenheit mittels Hacks zu korrigieren?

Das ist ein wesentlicher Punkt.
Als Gitarren-Lehrer akzeptiere ich die Defizite meiner Schüler.
Weil mir aber die Defizite von MSIE selbst zu mühsam sind, bin ich kein Web-Lehrer.

mfg Beat

[karl123]

Hallo Beat,

Ich erhebe keinen Anspruch darauf, der Web-Lehrer schlechthin zu sein. Mein Anspruch ist vielmehr, anderen zu helfen. Ich bin davon überzeugt, das mit dem IE7-Script zu tun. Ich habe selbst bereits Stylesheets realisiert, die IE6 korrekt darstellen und ohne Javascript auskommen. Ich bin aber der Meinung, dass man da sehr trickreich arbeiten muss, und den Pfad des einfachen Verstehens verlassen muss. Bitte bedenke immer, dass ein Hack ausnutzt, dass unterschiedliche Browser auf den gleichen Code unterschiedlich reagieren. Genau das stört mich; ich suche den Code, auf den "alle" Browser gleich reagieren.

Trotzdem werde ich im Tutorial auf diese Dinge hinweisen und auf Seiten verlinken, die Layouts zeigen, bei denen auch IE6 per CSS-Hacks richtig anzeigt. Vielleicht werde ich auch ein Stylesheet dazu erstellen, aber es wird nicht meine favorisierte Lösung sein.

mit freundlichen Grüßen

Karl

[Matze]

Hallo Karl!

IE7-Script: Hier habe ich eine andere Meinung: Warum sollte ich meine und die Energie meiner Leser darauf verschwenden, bei Browsern die Fehler der Vergangenheit mittels Hacks zu korrigieren?

Ähm... du weißt aber, dass es auch anders geht? Oder kennst du Conditional Comments nicht? Zeit zum belesen ;)

font-size: War mir nicht bekannt. Werde mich informieren.

Ist mir auch neu. Wär nett wenn mal einer auf einen solchen Bug aufmerksam machen bzw. eine Beschreibung selbigen geben könnte. Ich Google grad...

Fixe Positionierung: Webseitenlayout ist Geschmacksache.

Nein, es kann, wenn man ein Noob (nicht negativ) ist, sehr belastend sein und ünnötig schweren und aufgeblähten Code verlangen. Abgesehen von den angesprochenen Nachteilen bei der Darstellung. Fixe Positionierung sollte tatsächlich eine Ausnahme sein. Also eine Regel die eine Ausnahme ist ;)

Grüße, Matze

[karl123]

Hi Matze,

Conditional Comments: klar, kenne ich. Habe auch irgendwo im Tutorial darauf verwiesen. Ich habe in einer anderen Antwort beschrieben, warum ich das Script bevorzuge.

Email-Adressen: Ich weiß, dass mein regulärer Ausdruck nicht alles trifft. Aber: ist test@localhost wirklich eine gültige Email-Adresse? Muss nicht zwingend eine Top-Level-Domain angegeben werden?

Font-Size: Ich erinnere mich schwach (vielleicht liege ich auch falsch), dass bei relativen Größen die Relation manchmal vererbt, manchmal nicht vererbt wird. Mit der Größe 1em wäre mir das dann egal. Es wäre aber kritisch, wenn im Body 0.8em vereinbart wäre.

Fixe Positionierung: Schau dir doch das CSS an: Was ist da kompliziert? Ich denke, dass die Kompliziertheit dann erzeugt werden muss, wenn man IE6 per Hacks verbiegen muss. -> mein Lieblingsthema ;-)

Grüße

Karl

[Ingo Turski]

Hi,

Font-Size: Ich erinnere mich schwach (vielleicht liege ich auch falsch), dass bei relativen Größen die Relation manchmal vererbt, manchmal nicht vererbt wird. Mit der Größe 1em wäre mir das dann egal. Es wäre aber kritisch, wenn im Body 0.8em vereinbart wäre.

warum klickst Du nicht einfach mal auf den Link in meiner Signatur oder genauer probierst es hier im IE aus?

freundliche Grüße
Ingo

[suit]

warum klickst Du nicht einfach mal auf den Link in meiner Signatur oder genauer probierst es hier im IE aus?

off topic:
ich bin schon oft über deine website gestolpert und denke mir jedes mal "schei** design [1], aber wo er recht hat, hat er recht" ;)

jetzt weiss ich endlich, "wem" diese seite gehört

[1] natürlich geschmackssache ;)

[Ingo Turski]

Hi,

Deine wehemente Kritik bezüglich des IE7-Script gibt mir zu denken. Kannst du da mal konkreter werden. Meine Meinung habe ich ja oben genannt.

Zum einen haben gerade IE-User am häufigsten Javascript deakiviert - die ca. 3% der Besucher meiner Seiten ohne Javascript sind größtenteils IE-User. Die könnten dann mit Deinem CSS, welches den IE7 bzw. das Script benötigt, nichts anfangen und schlimmstenfalls die Seite nicht nutzen. Gerade bei Fixierung spinnt der IE<7 ziemlich rum.
Zum anderen möchte ich diesen Usern nicht zusätzliche 31kb aufhalsen, wenn das doch gar nicht nötig ist und sich Probleme mit wenigen CSS-Zeilen beheben lassen.

Ich habe früher sehr viel Arbeit in Workarrounds für den IE investiert, z.B. in http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie - heute sehe ich das wie Du und verzichte zumindest auf überflüssiges HTML-Markup hierzu. Ich fixiere z.B. einfach eine Navigation für fortschrittliche Browser und gebe den IE<7 alternativ absolute Positionierung. Das ist nur eine Zeile CSS und die Seite funktioniert in allen alten IEs - nur halt ohne Fixierung.

freundliche Grüße
Ingo

[karl123]

Hi Ingo,

Die Idee mit der absoluten Positionierung ist eine interessante Alternative. Werde ich mir mal merken.

Übrigens: ich hatte niemals mit so einer guten Diskussion gerechnet! Hier mein Dank an Alle!!!

Jetzt habe ich das Problem, dass ich die Empfehlungen garnicht schnell genug umsetzen kann (bin die Woche über unterwegs). Also bitte ich jetzt schon um etwas Geduld mit mir.

Viele Grüße

Karl

[suit]

Ich möchte wissen

• ob das, was ich da schreibe, richtig ist

ich hab die anderen kommentare jetzt auch schon durchgesehen - aber eins finde ich grauenhaft

"Trennung von Inhalt und Layout
Es ist äußerst wichtig, Inhalt und Layout voneinander zu unterscheiden."

und gleich mal das hier:
#left_container

"Metatags"
Metatags sind (inzwischen wieder) wichtig, um von Suchmaschinen gefunden zu werden, und um dort richtig zitiert zu werden. Hier einige wichtige:"

<meta http-equiv="language" />
-> lang bzw xml:lang-attribut im html-wurzelelement
<meta name="keywords" />
-> werden weitestgehend ignoriert, überflüssig
<meta name="description" />
-> praktisch, google verwendet z.B. das für die erste zeile in den serps
<meta name="author" />
-> mittlerweile überflüssig
<meta name="robots" />
-> robots.txt
<meta name="revisit-after" />
-> sitemap.xml priorität, ansonsten ein "wunder tag"
<meta name="page-topic" />
-> "wunder"-markup
<meta name="copyright" />
ebenfalls "magie" bzw nutzlos

"Titel der Seite"
nur unterseitentitel, titel der hauptseite ist weitestgehend redundant

"Stylesheets sollen so verlinkt werden, dass moderne Browser die Seite korrekt und gleich darstellen"
wie verlinke ich ein stylesheet so, dass es falsch dargestellt wird?

"Emulation des IE6"
dir ist offenbar nicht klar was emulation tut - das google javascript ist zwar schön, aber es ist nicht aufgabe des webentwicklers, browserfeatures "einzubauen"

"Aufbau der Seite im Body"
1.  Header
2. Container für linke Seite, Mittelteil, rechte Seite
  1. Linke Seite
  2. rechte Seite
  3. Mittelteil
3. Footer

wieder ein "inhalt on layout trennen"-problem

inhalt

seitenanfang
  titel / seitenidentifikation
  breadcrumbs
inhalt
  wichtiger inhalt
  nebeninhalt, weiterführende informationen usw
metainhalte
  suche
  menuführung
  querverlinkungen zu anderen fremden seiten
abschluss ("footer")
  fussnoten
  copyright
  anschrift

"Der Headers
Der Header soll am oberen Rand des Browserfensters feststehen."
nein, soll er nicht - ein 800x200px grosser header macht sich toll auf einem 256x192 px grossen display, besonders wenn er fixiert ist

"Container für den Footer
Auch bei Footer ist es einfach: er wird durch bottom am unteren Ende des Browserfensters fixiert."
auch diese idee ist ziemlich dumm - sieht bei höherem viewport zb so aus
http://rebell.at/temp/1050x1680_pivot_sticky_footer.png

"Container für das Mittelteil
Bleibt noch das Mittelteil. Es soll scrollen. Aber es würde unter die anderen Bereiche tauchen. Das verhindert man für die linke und rechte Seite mit margin und für Header und Footer mit padding"

nein, scrollbarer mittelteil ist auch eine seuche - die komplette seite soll scollen - keiner will auf einem kleinen viewport 2x scrollen müssen

mit jedem mal drüberlesen fallen mir neue sachen auf, über die ich mich "ärgere" wenn ich eine entsprechend gestaltete website vorfinde - ich hör lieber auf ;)

[suit]

256x192 px grossen display, besonders wenn er fixiert ist

nachtrag: auf meinem nintendo ds ist die invalide demo-seite nicht bedienbar und die scrollbalken haben keinen effekt