Fabian St.: Bewertung meines CSS-Referats ;-)

Hi!

Wie ich bereits in diesem Thread vor einiger Zeit angekündigt habe, muss ich demnächst ein Referat über CSS im Infounterricht halten. Hierzu habe ich eine Beispielseite gemacht, die meine Mitschüler nach meinem Referat durcharbeiten und -lesen sollen.
Vielleicht habt ihr noch einige Anmerkungen oder Verbesserungsvorschläge:
http://info.fabis-site.net/

Grüße,
Fabian St.

--
Meine Website: http://fabis-site.net
--> XHTML, CSS, PHP-Formmailer, Linux
---------------------
fabi@erde ~# whatis spam
spam: nothing appropriate
---------------------
Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
  1. 吃了吗, Fabian?

    Vielleicht habt ihr noch einige Anmerkungen oder Verbesserungsvorschläge:
    http://info.fabis-site.net/

    Du hast das SelfForum falsch verlinkt! ;-)

    Ansonsten ziemlich gelungen. Ich hätte noch mehr z.B. die einzelnen
    CSS-Eigenschaften erklärt und bspw. relative und absolute Positionierung
    oder relative und absolute Schriftgrößenangaben (em/% gg. px) angesprochen;
    weniger die Bugs des IE.

    ℆, ℒacℎgas

    --
    Bei der intendierten Realisierung der linguistischen Simplifizierung
    des regionalen Idioms resultiert die Evidenz der Opportunität extrem
    apparent, den elaborierten und quantitativ opulenten Usus nicht assi-
    milierter Xenologien konsequent zu eliminieren!
    1. Hi Lachgas!

      Du hast das SelfForum falsch verlinkt! ;-)

      Oh, das geht natürlich nicht ;-) Schon geändert :-)

      Ansonsten ziemlich gelungen. Ich hätte noch mehr z.B. die einzelnen
      CSS-Eigenschaften erklärt und bspw. relative und absolute Positionierung
      oder relative und absolute Schriftgrößenangaben (em/% gg. px) angesprochen;
      weniger die Bugs des IE.

      Ich habe mir überlegt, auch diese Punkte zu erwähnen, mich jedoch dann eines besseren besonnen, da dies m.E. einfach zu weit gehen würde. Ich habe für das Referat 45min Zeit, wovon ich rund 20min sprechen werde und die andere Zeit sollen die sich die Seiten nochmals durchlesen und den Quelltext anschauen.
      Die Erwähnung der Bugs scheint mir jedoch ziemlich wichtig, da einem die - auch beim Lernen von CSS - häufig auffallen und man sich fragt, was man denn falsch gemacht haben könnte, da man als Anfänger den Browser als Übeltäter vielleicht nicht sofort sieht.

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. Hallo Fabian,

        habe leider nicht alles gelesen.

        Gleich am Anfang fiel mir der Satz auf:
        "Kaskadierend" wiederum bedeutet in diesem Fall soviel wie "vererblich".
        Dieser Satz ist so nicht richtig. Vererbung und Kaskadierung sind unterschiedliche Vorgänge. Das wird meines Wissens in SELFHTML nicht erläutert. In der deutschen Übersetzung des Buches  "Cascading Stylesheets" von Shafer/Yank (erschienen im dpunkt.verlag) heißt es dazu auf Seite 202:
        "Das Prinzip der Vererbung ist der Kaskadierung in seinen Auswirkungen relativ ähnlich. Trotzdem stehen beide für völlig unterschiedliche Vorgänge in CSS. Die Kaskadierung bestimmt, welche Eigenschaften zum Einsatz kommen, wenn ein Element Werte von mehreren Stilregeln zugewiesen bekommt. Die Vererbung wiederum regelt, wie Eigenschaften von übergeordneten an untergeordnete Elemente weitergegeben werden."
        Meines Erachtens musst Du in Deinem Referat nicht auf diese (spezielle) Problematik eingehen, denn Du hast nur 45 Minuten Zeit. Laß den o.a. Satz mit der falschen Formulierung einfach weg.

        In der Einleitung schreibst Du sinngemäß: Für das Verständnis von CSS sollte nicht allzu viel Vorwissen an HTML nötig sein. Diesen Satz würde ich auch streichen. Erläutere lieber, warum CSS eine Ergänzungssprache zu HTML ist und warum ein sauberer HTML-Code ein wichtige Voraussetzung für die Anwendung von CSS ist.

        Grüsse aus Neubrandenburg
        Erika Schiener

        --
        Hauptsache dem Hund geht's gut
        1. Hallo Fabian,

          habe eben wieder mal kurz auf Deine Website geschaut.
          Bitte überprüfe noch einmal den Text bei den title-Attributen im Menü.
          Warum beim Menüpunkt *Einleitung* noch einmal vermerken: "Einleitung zum Thema CSS"? Der Schwerpunkt in der *Einleitung* ist doch:  Was ist CSS?
          Beim Menüpunkt *Unterstützung* dürfte die Beschreibung falsch sein. Hier behandelst Du das Problem: Wie unterstützen die Browser CSS.

          Grüsse aus Neubrandenburg
          erika

          --
          Hauptsache dem Hund geht's gut
        2. »»..... Vererbung und Kaskadierung sind unterschiedliche Vorgänge. Das wird meines Wissens in SELFHTML nicht erläutert.
          Korrektur: In der neuen Version SELFHTML 8.1 gibt es ausführliche Erläuterungen zur "Kaskade"!

          Grüsse aus Neubrandenburg
          erika

          --
          Hauptsache dem Hund geht's gut
  2. Vielleicht habt ihr noch einige Anmerkungen oder Verbesserungsvorschläge:
    http://info.fabis-site.net/

    Ich find den Vortrag durchaus lesenswert und er sollte auch zu verstehen sein, wobei es noch drauf ankommt, was für ein Wissensstand deine Mitschüler haben.

    Was ich noch evtl. verbessern würde ist der Absatz mit den DIV containern. Das wäre eine gute Stelle um kurz den Sinn von HTML Elementen (semantik) zu erläutern und das DIV (bzw. SPAN) dementsprechenden keinen Sinn haben und das man sie daher zu dem Zwecke einsetzen kann, um entweder HTML Abschnitte zu gruppieren oder besondere Abschnitte zu markieren (um sie dann zu gestalten oder z.b. für hover Effekte zu nutzen). Ansonsten steht der Begriff DIV Container, wie ich finde, etwas verloren dort.

    Ich weiß nicht wie ausschweifend du werden willst, der IE 6 hat natürlich noch den Box bug, aber nur im Quirks Modus. Aber ob das nötig ist zu erläutern weiß ich nicht.

    Struppi.

    1. Hi Struppi!

      Ich find den Vortrag durchaus lesenswert und er sollte auch zu verstehen sein, wobei es noch drauf ankommt, was für ein Wissensstand deine Mitschüler haben.

      Naja, sie können einigermaßen valides, wenn auch oftmals semantisch nicht richtiges HTML schreiben.

      Was ich noch evtl. verbessern würde ist der Absatz mit den DIV containern. Das wäre eine gute Stelle um kurz den Sinn von HTML Elementen (semantik) zu erläutern und das DIV (bzw. SPAN) dementsprechenden keinen Sinn haben und das man sie daher zu dem Zwecke einsetzen kann, um entweder HTML Abschnitte zu gruppieren oder besondere Abschnitte zu markieren (um sie dann zu gestalten oder z.b. für hover Effekte zu nutzen). Ansonsten steht der Begriff DIV Container, wie ich finde, etwas verloren dort.

      Das wäre tatsächlich noch ein interessanter Punkt - ich werde sehen, wie ich ihn am besten einpflege ;-)

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
  3. Hi,

    ich hab's jetzt nur mal überflogen und auf Anhieb

    "CSS-Code in einer separeten Datei"

    gefunden. ;-)
    Du solltest den Text vielleicht mal durch eine Rechtschreibprüfung schicken.

    Was ich unschön finde, ist die Navigation. Hier handelt es sich doch um einen fortlaufenden Text und den könntest Du auch unten enstsprechend verlinken (vorige Seite | nächste Seite) anstatt "nach oben", was noch nicht mal oben ist - zur Navigation muß ich extra noch hochscrollen.

    freundliche Grüße
    Ingo

  4. Hi,

    Vielleicht habt ihr noch einige Anmerkungen oder Verbesserungsvorschläge:

    das Lob spare ich mir mal :-) und komme gleich zu Verbesserungen:

    • Nach der Navigation habe ich lange gesucht. Überlege Dir, wo Links angebracht sind; insbesondere fallen mir da die Übersicht über die Seiten sowie das Ende einer jeden Seite (Link zum nächsten Punkt) ein.

    • Der <link>-Beispielcode (Seite "Gebrauch") ragt nach rechts raus.

    • Versuche bitte, einen etwas strengeren Styleguide zu propagieren. Auch die letzte Deklaration einer Regel sollte mit Semikolon abgeschlossen werden, und Leerzeichen sollten a) einheitlich und b) der Lesbarkeit dienlich eingesetzt werden (also z.B. nach _jedem_ Doppelpunkt).

    • Bitte, bitte, bitte ersetze class="red" durch class="important" o.ä.!

    • Listing 7 bei "Gebrauch" sollte nicht den wesentlichen HTML-Code auskommentieren :-)

    • Gehe bitte unbedingt über die Simple Selectors hinaus! Erst dann macht CSS wirklich Sinn.

    • Seite "Vorteil": Es gibt kein "WWW-Consortium-Konsortium".

    Naja, das war's erst mal. Für mehr fehlt mir gerade leider die Zeit.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah!

      • Nach der Navigation habe ich lange gesucht. Überlege Dir, wo Links angebracht sind; insbesondere fallen mir da die Übersicht über die Seiten sowie das Ende einer jeden Seite (Link zum nächsten Punkt) ein.

      Du meinst, ich sollte am Ende jeder Seite einen Link zu nächsten anbringen?

      • Der <link>-Beispielcode (Seite "Gebrauch") ragt nach rechts raus.

      erledigt

      • Versuche bitte, einen etwas strengeren Styleguide zu propagieren. Auch die letzte Deklaration einer Regel sollte mit Semikolon abgeschlossen werden, und Leerzeichen sollten a) einheitlich und b) der Lesbarkeit dienlich eingesetzt werden (also z.B. nach _jedem_ Doppelpunkt).

      Bezieht sich das auf ein konkretes Beispiel? Ich achte sonst eigentlich schon auf lesbare Formatierung im Code...

      • Bitte, bitte, bitte ersetze class="red" durch class="important" o.ä.!

      erledigt (wenn du mich schon so lieb bittest) ;-)

      • Listing 7 bei "Gebrauch" sollte nicht den wesentlichen HTML-Code auskommentieren :-)

      stimmt, das habe ich übersehen...

      • Gehe bitte unbedingt über die Simple Selectors hinaus! Erst dann macht CSS wirklich Sinn.

      Du meinst ich sollte Descendant Selectors wie #content ol li a oder Atrribut Selektoren auch noch erwähnen?

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. Hi,

        Du meinst, ich sollte am Ende jeder Seite einen Link zu nächsten anbringen?

        ja, genau das habe ich vermisst.

        • Versuche bitte, einen etwas strengeren Styleguide zu propagieren. Auch die letzte Deklaration einer Regel sollte mit Semikolon abgeschlossen werden, und Leerzeichen sollten a) einheitlich und b) der Lesbarkeit dienlich eingesetzt werden (also z.B. nach _jedem_ Doppelpunkt).
          Bezieht sich das auf ein konkretes Beispiel? Ich achte sonst eigentlich schon auf lesbare Formatierung im Code...

        Aus dem Gedächtnis:

        p { color:blue } /* ohne Semikolon */
        style="foo:bar;qaz:bas" <!-- ohne Leerzeichen, ohne Semikolon am Ende -->
        bla {
            foo:bar;
            sabbelbabbel:qaz;
        } /* ohne Leerzeichen, ohne "Spaltierung" */

        Es kam halt öfter vor.

        • Bitte, bitte, bitte ersetze class="red" durch class="important" o.ä.!
          erledigt (wenn du mich schon so lieb bittest) ;-)

        *g* :-)

        • Gehe bitte unbedingt über die Simple Selectors hinaus! Erst dann macht CSS wirklich Sinn.
          Du meinst ich sollte Descendant Selectors wie #content ol li a oder Atrribut Selektoren auch noch erwähnen?

        Vor allem erstere. Attributselektoren sind natürlich auch sehr mächtig, aber in der Praxis nur als CSS-Hack einsetzbar, solange der (aktuelle) IE noch irgendwie beachtenswert erscheint. Nachfahrenselektoren sind auch unerlässlich beim Thema "semantisches Markup".

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  5. Hi,

    Wie ich bereits in diesem Thread vor einiger Zeit angekündigt habe, muss ich demnächst ein Referat über CSS im Infounterricht halten. Hierzu habe ich eine Beispielseite gemacht, die meine Mitschüler nach meinem Referat durcharbeiten und -lesen sollen.

    /* Hier steht ein Kommentar, d.h. alles was zwischen /* */
        steht wird nicht interpretiert */

    Die zweite Zeile befindet sich außerhalb des Kommentars.

    "die einzig sinnvollste" - einzig ist überflüssig, der Superlativ sagt das schon aus. Entweder "die einzig sinnvolle" oder "die sinnvollste".

    Mit nur eine Zeile Quelltext lässt sich das Aussehen mehrerer Seite ändern!

    Spendier dem Satz noch ein r und ein n.

    Hilfen dazu findet ihr in der Rubrik Links.

    Der Link führt zur selben Seite, nicht zu der mit den Links.

    Listing 7: der Beispiel-HTML-Code ist nicht sehr sinnvoll. Wozu das div? Warum bekommt die (auskommentierte) Liste nicht die id?

    Bessere Suchmaschinenplazierung

    Ist das eine Folge der Rechtschreibdeform [sic!]? Ich würd es mit einem t mehr schreiben.

    Dahinter befindet sich ein Anker, der durch das kleine Dreieck markiert ist. Soll das so sein?

    Zum einen sei hier die perfekte Umsetzung der W3C  Standards zu nennen,

    Nichts gegen Firefox, aber perfekt ist die Umsetzung nicht (z.B. fehlen die counter)

    Konqueror, Saferi

    Den letztgenannten kenn ich gar nicht.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi Mudguard!

      /* Hier steht ein Kommentar, d.h. alles was zwischen /* */
          steht wird nicht interpretiert */

      Die zweite Zeile befindet sich außerhalb des Kommentars.

      Warum das denn? Aufgrund der /**/?

      Die anderen Punkte habe ich verbessert - Vielen Dank!

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. Hi,

        /* Hier steht ein Kommentar, d.h. alles was zwischen /* */
            steht wird nicht interpretiert */
        Die zweite Zeile befindet sich außerhalb des Kommentars.
        Warum das denn? Aufgrund der /**/?

        Aufgrund des */, das den Kommentar beendet.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi!

          /* Hier steht ein Kommentar, d.h. alles was zwischen /* */
              steht wird nicht interpretiert */
          Die zweite Zeile befindet sich außerhalb des Kommentars.
          Warum das denn? Aufgrund der /**/?

          Aufgrund des */, das den Kommentar beendet.

          Ich dachte, dass sich das */ dann auf das vorhergehende /* beziehen würde, aber stimmt, das wäre dann nicht logisch...

          Grüße,
          Fabian St.

          --
          Meine Website: http://fabis-site.net
          --> XHTML, CSS, PHP-Formmailer, Linux
          ---------------------
          fabi@erde ~# whatis spam
          spam: nothing appropriate
          ---------------------
          Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
          1. Hallo Fabian

            /* Hier steht ein Kommentar, d.h. alles was zwischen /* */
                steht wird nicht interpretiert */
            Aufgrund des */, das den Kommentar beendet.
            Ich dachte, dass sich das */ dann auf das vorhergehende /* beziehen würde, aber stimmt, das wäre dann nicht logisch...

            Solche Kommentare lassen sich halt nicht verschachteln.

            Freundliche Grüße

            Vinzenz

  6. Hi,

    der komische StyleSwitcher funktioniert bei mir nicht. Schmeiß ihn raus!

    Ich habe für das Referat 45min Zeit, wovon ich rund 20min sprechen werde und die andere Zeit sollen die sich die Seiten nochmals durchlesen und den Quelltext anschauen.

    Da würde ich mir überlegen, konkrete Aufgaben zu stellen. Z.B. statt des StyleSwitchers Eingabemöglichkeiten, wo man im kleinen und schnellen die Wirkungsweise von CSS probieren kann. Das ist interessanter und in 25 min. besser zu realisieren. "lest mal den Quelltext" ist irgendwie scheiße.

    Ganz gut ist auch immer eine Gliederung, wenn Du das Referat an die Wand werfen willst. Also nur die Hauptpunkte und Grafiken. Dann kann man immer zeigen: "wir sind jetzt hier". Mitlesen werden die Dein Referat ja wohl kaum wollen. Das liest man besser hinterher nochmal, wenn's einen interessiert.

    Gruß, Andreas

    --
    SELFFORUM - hier werden Sie geholfen,
    auch in Fragen zu richtiges Deutsch
    1. Hi!

      der komische StyleSwitcher funktioniert bei mir nicht. Schmeiß ihn raus!

      Welchen Browser verwendest du? Ich habe das Ding nicht selbst geschrieben, sondern von Alistapart genommen. Siehe auch http://www.alistapart.com/articles/alternate/

      Da würde ich mir überlegen, konkrete Aufgaben zu stellen. Z.B. statt des StyleSwitchers Eingabemöglichkeiten, wo man im kleinen und schnellen die Wirkungsweise von CSS probieren kann. Das ist interessanter und in 25 min. besser zu realisieren. "lest mal den Quelltext" ist irgendwie scheiße.

      Das wäre wirklich eine gute Idee. Ich werde mal versuchen, das in den nächsten Tagen umzusetzen. Danke!

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. der komische StyleSwitcher funktioniert bei mir nicht. Schmeiß ihn raus!

        Welchen Browser verwendest du? Ich habe das Ding nicht selbst geschrieben, sondern von Alistapart genommen. Siehe auch http://www.alistapart.com/articles/alternate/

        achsooo..., der geht ja nur mit JavaScript ;-) naja...

        Da würde ich mir überlegen, konkrete Aufgaben zu stellen...
        Das wäre wirklich eine gute Idee. Ich werde mal versuchen, das in den nächsten Tagen umzusetzen. Danke!

        ja, wenn Du schon so'n JS-Teil hast, kannst Du das doch um Eingabefelder ergänzen...

        Gruß, Andreas

        --
        SELFFORUM - hier werden Sie geholfen,
        auch in Fragen zu richtiges Deutsch
        1. Hallo,

          der komische StyleSwitcher funktioniert bei mir nicht. Schmeiß ihn raus!

          http://www.alistapart.com/articles/alternate/

          achsooo..., der geht ja nur mit JavaScript ;-) naja...

          Was nahelegen würde es auch nur Nutzern mit aktiviertem JS anzubieten.

          Grüße
          Marcus

          --
          Wenn der Weg das Ziel ist, ist das Ziel dann weg?
          1. Hi!

            Was nahelegen würde es auch nur Nutzern mit aktiviertem JS anzubieten.

            Das trifft auch in meinem Fall zu, sodass JavaScript hier eine Rechtfertigung hat.

            Grüße,
            Fabian St.

            --
            Meine Website: http://fabis-site.net
            --> XHTML, CSS, PHP-Formmailer, Linux
            ---------------------
            fabi@erde ~# whatis spam
            spam: nothing appropriate
            ---------------------
            Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
            1. Was nahelegen würde es auch nur Nutzern mit aktiviertem JS anzubieten.

              Das trifft auch in meinem Fall zu, sodass JavaScript hier eine Rechtfertigung hat.

              Ich vermute mal, daß Du selbst am besten einschätzen kannst, was am Ort Deines Referats verfügbar ist. :-)

              Gruß, Andreas

              --
              SELFFORUM - hier werden Sie geholfen,
              auch in Fragen zu richtiges Deutsch
              1. Hi Andreas!

                Ich vermute mal, daß Du selbst am besten einschätzen kannst, was am Ort Deines Referats verfügbar ist. :-)

                Genau! *g*

                Grüße,
                Fabian St.

                --
                Meine Website: http://fabis-site.net
                --> XHTML, CSS, PHP-Formmailer, Linux
                ---------------------
                fabi@erde ~# whatis spam
                spam: nothing appropriate
                ---------------------
                Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
            2. Hallo,

              Hi!

              Was nahelegen würde es auch nur Nutzern mit aktiviertem JS anzubieten.

              Das trifft auch in meinem Fall zu, sodass JavaScript hier eine Rechtfertigung hat.

              Ich dachte eher daran, den Styleswitcher per document.write einzubinden. Wer JS aktiviert hat sieht ihn, wer nicht bekommt gar nichts oder einen Hinweis, dass hier ein nützliches Feature verfügbar ist, wenn man JS aktiviert hat.
              Sie z.B. Caritas Landshut

              Grüße
              Marcus

              --
              Wenn der Weg das Ziel ist, ist das Ziel dann weg?
  7. Hallo Fabian,

    einfach mal kurz was mich etwas am Layout beim ersten Besuch gestört
    hat, das geht natürlich in den Bereich persönlicher Vorlieben rein,
    aber vielleicht ist es ja doch informativ oder hilfreich:

    Die Schrift ist mir zu groß, zusätzlich scheint mir der Zeilenabstand
    etwas hoch (selbst wenn ich im Firefox die Schrift verkleinere).

    Die Überschriften trennen sich für mich zu sehr von den zugehörigen
    Abschnitten (Farbe, kursiv, Art der Rahmen, geringer Abstand oben).

    Zusammen mit Dingen wie der komplex wirkenden Grafik "Box-Modell"
    des W3C ist es schwierig deinen Text sehr schnell zu erfassen oder
    querzulesen.

    Vielleicht kannst du mal schauen wie die Lesbarkeit sonst beurteilt
    wird, ich würde z.B. probeweise auf die 1 Pixel Rahmen um die Seiten
    verzichten und ggf. den weißen Rand noch etwas erhöhen.

    Angeschaut habe ich es mit Firefox, Windows XP.

    Grüsse

    Cyx23

    1. Hi!

      Sorry, für die etwas späte Rüchmeldung meinerseits...

      Die Schrift ist mir zu groß, zusätzlich scheint mir der Zeilenabstand
      etwas hoch (selbst wenn ich im Firefox die Schrift verkleinere).

      Das ist eben so ein Problem mit relativen Schriftgrößen. Wie du sehen kannst verwende ich «em» als Schriftgrößeneinheit, das natürlich je nach Voreinstellung mit Browser unterschiedlich groß ist. Auf meinem Rechner und auf einigen anderen, auf denen ich getestet habe, passt es, sodass m.E. keine Möglichkeit zur Behebung des Problems übrig bleibt.

      Die Überschriften trennen sich für mich zu sehr von den zugehörigen
      Abschnitten (Farbe, kursiv, Art der Rahmen, geringer Abstand oben).

      Ok, ich werde die Margins mal ein wenig anpassen.

      Angeschaut habe ich es mit Firefox, Windows XP.

      /me too (u.a.) ;-)

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. Hallo,

        Die Schrift ist mir zu groß, zusätzlich scheint mir der Zeilenabstand
        etwas hoch (selbst wenn ich im Firefox die Schrift verkleinere).

        Das ist eben so ein Problem mit relativen Schriftgrößen. Wie du sehen kannst verwende ich «em» als Schriftgrößeneinheit, das natürlich je nach Voreinstellung mit Browser unterschiedlich groß ist. Auf meinem Rechner und auf einigen anderen, auf denen ich getestet habe, passt es, sodass m.E. keine Möglichkeit zur Behebung des Problems übrig bleibt.

        ich hatte dein CSS noch gar nicht angeschaut, aber erstmal etwas wie 1em
        vermutet, irgendwo kommen dann auch mal 0.9em; in deinem CSS vor.
        Ursache für die zu mir grosse Schrift (beim engen Pixelabstand eines
        17er TFT m.E. zu gross) scheint aber auch die Wechselwirkung o. Vererbung
        von font-size:101% zu sein, ich kann dem m.E. unsauberen Hack eh nicht
        viel abgewinnen.

        Beim Zeilenabstand gehe ich davon aus dass ein (zu) großer Zeilenabstand
        die Lesbarkeit verschlechtert, hängt aber auch von der Schrift ab.
        Auf jeden Fall ist es m.E. oft vorteilhaft ein Zeilenabstand anzugeben,
        z.B. je nach Schrift im Bereich von 1.2 (1.1?) bis 1.3 fachen d.
        Schriftgrösse.

        Die Überschriften trennen sich für mich zu sehr von den zugehörigen
        Abschnitten (Farbe, kursiv, Art der Rahmen, geringer Abstand oben).

        Ok, ich werde die Margins mal ein wenig anpassen.

        Das Layout schaut ja so ganz gut aus und Präsentation ist wichtig,
        aber mir scheinen vor allem die Rahmen um die Zwischenüberschriften
        die vorhandene Struktur etwas auszubremsen. Das u.U. problematische
        text-align:justify; scheint hier kaum zu stören.

        Z.B. so - und ohne das font-size:101% beim body - scheint es mir bereits
        etwas angenehmer:
        h2{
        border-bottom:2px solid #ececec;
        margin-top:1.5em;line-height:1.3em;text-indent:.4em;}

        Hier ist interessant wie sich ggf. die line-height des body auf das menu
        auswirkt:
        body {
        font-size:1em;
        line-height:1.2em}

        Grüsse

        Cyx23

  8. Hi,

    Vielleicht habt ihr noch einige Anmerkungen oder Verbesserungsvorschläge:

    • Absolute Pfadangaben sind i.d.R. unnötig und eher hinderlich. Man darf auch durchaus an eine (Offline-)Weitergabe der Seiten schon bei Erstellung denken - zumal bei entsprechender Lizenz).
    • Links, die ohnehin nur mit JavaScript funktionieren, sollten auch mit JS erzeugt werden.
    • Die Sonderzeichen mal als Entität, mal als Charakter ist inkonsequent
    • Gerade das ">" ist ein Sonderzeichen und ist zu maskieren - man sollte dies ruhig auch im TITLE-Attribut tun.
    • Zu jeder Farbdefinition gehört eine entsprechende Definition der Hintergrundfarbe. Dies gilt auch dann, wenn man Grafiken für den Hintergrund definiert!
    • "Schlechter Suchmaschinencode" ist nicht Folge von "Layout-HTML", dem mit CSS abgeholfen wird, sondern von schlechtem HTML - egal welches Layout - egal ob dieses mit HTML oder mit CSS erreicht wird (und wurde)

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
    1. Hi!

      • Absolute Pfadangaben sind i.d.R. unnötig und eher hinderlich. Man darf auch durchaus an eine (Offline-)Weitergabe der Seiten schon bei Erstellung denken - zumal bei entsprechender Lizenz).

      In meinem Falle jedoch nötig, da ich mod_rewrite verwende und sonst die Grafiken und Stylesheets nicht angezeigt würden, wenn ich relative Angaben verwenden würde.

      • Links, die ohnehin nur mit JavaScript funktionieren, sollten auch mit JS erzeugt werden.

      OK, das klingt sinnvoll, werde ich ändern :-)

      • Die Sonderzeichen mal als Entität, mal als Charakter ist inkonsequent
      • Gerade das ">" ist ein Sonderzeichen und ist zu maskieren - man sollte dies ruhig auch im TITLE-Attribut tun.

      Mhh, hat da kFileReplace einige Entitäten übersehen? ;-) Dann muss ich wohl noch einmal manuell drüber gehen...

      • Zu jeder Farbdefinition gehört eine entsprechende Definition der Hintergrundfarbe. Dies gilt auch dann, wenn man Grafiken für den Hintergrund definiert!

      So?! Davon habe ich noch nie etwas gehört bzw. gelesen.

      Grüße,
      Fabian St.

      --
      Meine Website: http://fabis-site.net
      --> XHTML, CSS, PHP-Formmailer, Linux
      ---------------------
      fabi@erde ~# whatis spam
      spam: nothing appropriate
      ---------------------
      Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
      1. Hi,

        In meinem Falle jedoch nötig, da ich mod_rewrite verwende und sonst die Grafiken und Stylesheets nicht angezeigt würden, wenn ich relative Angaben verwenden würde.

        Nein, keineswegs.

        Auch nicht, was die Stylesheets angeht. Pfade in den CSS' sind relativ zur Position des CSS, die sich nicht ändert. Nur der NN 4.x wertet Pfadangaben im CSS relativ zur Position des Dokuments, in dem das CSS eingebunden wurde.

        • Zu jeder Farbdefinition gehört eine entsprechende Definition der Hintergrundfarbe. Dies gilt auch dann, wenn man Grafiken für den Hintergrund definiert!
          So?! Davon habe ich noch nie etwas gehört bzw. gelesen.

        Dann liest Du hier noch nicht lange mit - das ist Layout-Grundlage! Du kannst nicht wissen, wie die Farben des Browsers vom Benutzer eingestellt wurde. Ist dort der Hintergrund blau und Du definierst die Schrift blau ohne den HG neu zu definieren, gibt es ein Problem. Ähnlich bei Hintergrundgrafiken: Du stellst Schrift auf weiß und lädst z.B. einen orangene HG-Grafik. Wird die Grafik nicht geladen (fehlt, defekt, Surfer hat Imagedarstellung deaktiviert, ...), dann sieht man weiße Schrift auf i.d.R. weißem Grund. Nicht wirklich informativ und/oder hilfreich ... ;-)

        Gruß, Cybaer

        --
        Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        1. Hi!

          Auch nicht, was die Stylesheets angeht. Pfade in den CSS' sind relativ zur Position des CSS, die sich nicht ändert. Nur der NN 4.x wertet Pfadangaben im CSS relativ zur Position des Dokuments, in dem das CSS eingebunden wurde.

          Ich rede auch nicht vom den Pfaden in den CSS-Dateien selber, sondern von den absoluten Angaben der Pfade der CSS-Dateien und den auf der Seite eingebundenen Bildern. Um das ganze nun eben einheitlich erscheinen zu lassen, habe ich mich für diese Version entschieden.

          • Zu jeder Farbdefinition gehört eine entsprechende Definition der Hintergrundfarbe. Dies gilt auch dann, wenn man Grafiken für den Hintergrund definiert!

          Dann liest Du hier noch nicht lange mit - das ist Layout-Grundlage! Du kannst nicht wissen, wie die Farben des Browsers vom Benutzer eingestellt wurde. Ist dort der Hintergrund blau und Du definierst die Schrift blau ohne den HG neu zu definieren, gibt es ein Problem. Ähnlich bei Hintergrundgrafiken: Du stellst Schrift auf weiß und lädst z.B. einen orangene HG-Grafik. Wird die Grafik nicht geladen (fehlt, defekt, Surfer hat Imagedarstellung deaktiviert, ...), dann sieht man weiße Schrift auf i.d.R. weißem Grund. Nicht wirklich informativ und/oder hilfreich ... ;-)

          Doch, eigentlich lese und schreibe ich hier des Öfteren, aber vielleicht habe ich diese Threads übersehen :-/
          Aber auch die von dir geschilderten Sachverhalte (die zugegebenermaßen ein Problem darstellen würden) treffen auf meine Seite nicht zu. Sie ist auch ohne Grafiken vollkommen nutzbar und keine der Informationen gehen verloren.

          Grüße,
          Fabian St.

          --
          Meine Website: http://fabis-site.net
          --> XHTML, CSS, PHP-Formmailer, Linux
          ---------------------
          fabi@erde ~# whatis spam
          spam: nothing appropriate
          ---------------------
          Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
          1. Hi,

            Ich rede auch nicht vom den Pfaden in den CSS-Dateien selber, sondern von den absoluten Angaben der Pfade der CSS-Dateien und den auf der Seite eingebundenen Bildern. Um das ganze nun eben einheitlich erscheinen zu lassen, habe ich mich für diese Version entschieden.

            Ja ja, schon gut - aber notwendig ist es trotzdem nicht. ;-)

            Aber auch die von dir geschilderten Sachverhalte (die zugegebenermaßen ein Problem darstellen würden) treffen auf meine Seite nicht zu. Sie ist auch ohne Grafiken vollkommen nutzbar und keine der Informationen gehen verloren.

            Oh, bei mir war der Umstand eingetreten, daß der Browser die Hintergrundgrafik der Menüpunklte nicht geladen hat und schon war weiße Schrift auf weißem Grund. Aber "verifiziert" habe ich das nicht - fiel mir halt nur auf.

            Gruß, Cybaer

            --
            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
            1. Hi Cybear!

              Oh, bei mir war der Umstand eingetreten, daß der Browser die Hintergrundgrafik der Menüpunklte nicht geladen hat und schon war weiße Schrift auf weißem Grund. Aber "verifiziert" habe ich das nicht - fiel mir halt nur auf.

              Was hast denn du für einen Browser? ;-) Oder hast du ihm gar verboten die Hintergrundgrafik zu laden? *g*

              Wie dem auch sei, ich werde für die Stylesheets noch jeweils eine Hintergrundfarbe definieren...

              Grüße,
              Fabian St.

              --
              Meine Website: http://fabis-site.net
              --> XHTML, CSS, PHP-Formmailer, Linux
              ---------------------
              fabi@erde ~# whatis spam
              spam: nothing appropriate
              ---------------------
              Selfcode: ie:% fl:|  br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:)
              1. Hi,

                Oder hast du ihm gar verboten die Hintergrundgrafik zu laden? *g*

                Allgemein keine Grafiken - deswegen fiel es auf. 8-)

                Gruß, Cybaer

                --
                Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
      • Die Sonderzeichen mal als Entität, mal als Charakter ist inkonsequent

      Man kann Denglisch auch übertreiben.

      1. Hi,

        • Die Sonderzeichen mal als Entität, mal als Charakter ist inkonsequent
          Man kann Denglisch auch übertreiben.

        Ich sehe Entität nicht als Denglisch, sondern als eingedeutschtes Fremdwort lat. Ursprungs, das *u.a.* auch in der Informatik, hier als *Fachbegriff*, verwendet wird.

        Oder meintest Du den "Charakter"? Hierfür würde ich allerdings ähnliches ins Feld führen ... ;-)

        Gruß, Cybaer

        --
        Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
        1. Hallo,

          Ich sehe Entität nicht als Denglisch, sondern als eingedeutschtes Fremdwort lat. Ursprungs, das *u.a.* auch in der Informatik, hier als *Fachbegriff*, verwendet wird.

          Ich bin kein Informatiker, aber in der deutschsprachigen Literatur zu XML wird meines Wissens in der Regel darauf verzichtet, »Entity« zu übersetzen, gerade weil die Bedeutung im SGML-/XML-Kontext so speziell ist.
          Anscheinend hat der informationswissenschaftliche Fachbegriff »Entität« im Allgemeinen wenig mit einem Entity (genauer gesagt: einer Entity-Referenz) in Auszeichnungssprachen zu tun, wenn ich Wikipedia glauben schenke. Die Abbildung Entity - Entität im HTML-Kontext halte ich daher für eine Holzhammerübersetzung.

          »Charakter« steht noch als »<meist Pl.> (veraltend) Schriftzeichen« im Duden, trotzdem ist die Übertragung aus dem Englischen offensichtlich. Das ist auch kein etablierter Fachbegriff.

          Mathias

          1. Hi,

            Ich bin kein Informatiker, aber in der deutschsprachigen Literatur zu XML wird meines Wissens in der Regel darauf verzichtet, »Entity« zu übersetzen, gerade weil die Bedeutung im SGML-/XML-Kontext so speziell ist.

            Oh, ich finde, sie paßt. :-)

            Aber ansonsten hast Du sicher Recht. Google liefert bei deutschsprachigen Seiten und mit XML-Zusammenhang knapp 1000 Fundstellen für Entität vs. 30.000 für Entity.

            Mir reicht das aber. ;-)

            Gruß, Cybaer

            --
            Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!