keine_Ahnung: Wie organisieren ich meine CSS Sheets für eine große Seite?

Hallo,

ich hab im letzten Jahr die Seite für unsere Bereitschaft www.brk-aubing.de neu gemacht. Mit der Zeit ist die Seite recht groß geworden und mein(e) CSS Sheets sehr unübersichtlich. Gemerkt habe ich das jetzt an den Tabellen, ich bekomme einfach keine gescheite Tabelle mehr hin weil irgendwo was definiert ist, was die Tabellen immer doof aussehen lässt.

Darum meine Fragen. a wie organisiert man sich am besten seine CSS für eine große Seite um den Überblick zu behalten. Und b wie bekommt man optisch in allen Browsern gleiche und schöne Tabellen hin?

Vielleicht noch als Hintergrund Info. Ich hatte anfangs große Schwierigkeiten mit dem IE darum habe ich ein php eingefügt, dass je nach Browser und Betriebssystem unterschiedliche CSS hinzu lädt. Also es gibt ein basic.css und dann falls jemand mit Windows kommt wird noch ein win.css hinzugeladen bzw. für den IE ein IE.css.

  1. Hi,

    ich hab im letzten Jahr die Seite für unsere Bereitschaft www.brk-aubing.de neu gemacht. Mit der Zeit ist die Seite recht groß geworden und mein(e) CSS Sheets sehr unübersichtlich. Gemerkt habe ich das jetzt an den Tabellen, ich bekomme einfach keine gescheite Tabelle mehr hin weil irgendwo was definiert ist, was die Tabellen immer doof aussehen lässt.

    wie kann das sein? Tabellarische Daten finde ich bei "über uns">"Statistik" und "News-Archiv", sowie bei "unsere Termine">"Ausbildungsplan". Nur dort können also Tabellen zum Einsatz kommen. Wieso bekommst Du also Probleme?

    Darum meine Fragen. a wie organisiert man sich am besten seine CSS für eine große Seite um den Überblick zu behalten.

    Vor dem "a" kommt ein "1.", und das besagt, dass zunächst einmal das Markup stehen muss. Wenn dieses nicht stimmig ist, bekommst Du mit dem CSS zwangsläufig Probleme.

    Und b wie bekommt man optisch in allen Browsern gleiche und schöne Tabellen hin?

    Gar nicht.

    Das World Wide Web wurde zu dem Zweck(!) erstellt, auf unterschiedlichen Systemen - und somit unterschiedlich - verwendet zu werden. Es ist integraler Bestandteil des WWW, dass Webseiten unterschiedlich dargestellt werden. Die Kunst ist es nicht, Seiten gleich aussehen zu lassen, sondern gleich _gut_.

    Vielleicht noch als Hintergrund Info. Ich hatte anfangs große Schwierigkeiten mit dem IE darum habe ich ein php eingefügt, dass je nach Browser und Betriebssystem unterschiedliche CSS hinzu lädt.

    Tatsächlich. Wie hast Du das Problem gelöst, dass es unmöglich ist, auf Serverseite den verwendeten Browser zu erkennen? Daran sind schon die besten gescheitert.

    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. Tatsächlich. Wie hast Du das Problem gelöst, dass es unmöglich ist, auf Serverseite den verwendeten Browser zu erkennen? Daran sind schon die besten gescheitert.

      chuck norris scheitert nicht!
      SCNR

      1. Moin!

        Tatsächlich. Wie hast Du das Problem gelöst, dass es unmöglich ist, auf Serverseite den verwendeten Browser zu erkennen? Daran sind schon die besten gescheitert.

        chuck norris scheitert nicht!
        SCNR

        Es ist nicht so, dass Chuck Norris die Browser erkennt - die Browser erkennen Chuck Norris und geben auf!

        - Sven Rautenberg

        --
        "Love your nation - respect the others."
        1. Moin,

          Es ist nicht so, dass Chuck Norris die Browser erkennt - die Browser erkennen Chuck Norris und geben auf!

          Gib's zu, Du warst auf seiner zwar nicht von Gott aber immerhin von Adobe-Golive kreierten Website und verarbeitest gerade die dort gewonnenen Eindrücke :-)

          Im übrigen ist Chuck Norris einer von diesen unseeligen Kreationisten und damit zwar nicht "böse" aber wenigstens grottenblöd: "But here's what I really think about the theory of evolution: It's not real.

        2. Es ist nicht so, dass Chuck Norris die Browser erkennt - die Browser erkennen Chuck Norris und geben auf!

          Wenn Chuck Norris ein Stylesheet angibt, ist das keine Empfehlung für den Browser, sondern eine verfluchte Pflicht.

          Viele Grüße!
          _Dirk

          --
          »Menschenkenntnis kann versagen, wenn man zu weit weg ist.«
          - Das kleine Seitenschwein, Flight Girl
    2. Hallo Cheatah

      Tatsächlich. Wie hast Du das Problem gelöst, dass es unmöglich ist, auf Serverseite den verwendeten Browser zu erkennen? Daran sind schon die besten gescheitert.

      das war nicht so schwer, hier mein css.php das ich auf allen Seiten einbinde:

      <?php
      // Läd OS und Broser abhängige CSS
      if(!isset($CSS_URL)){
       $CSS_URL = "../CSS/";
       }

      $key=$_SERVER['HTTP_USER_AGENT'];
      //Operating-System scan start
      if(preg_match('=MAC=i',$key)) { // Falls ein Mac reicht das basic css
          $os="Mac";
       }
      elseif(preg_match('=WIN=i',$key)) {
       $os = "Win";
       echo "<link href="".$CSS_URL."win.css" rel="stylesheet" type="text/css" />\n";
       if(preg_match('=MSIE 6=i',$key)) {
          $br="IE6";
        echo "<link href="".$CSS_URL."ie6.css" rel="stylesheet" type="text/css" />\n";
        }
       elseif(preg_match('=AOL=i',$key)) {
         $br="AOL";
          echo "<link href="".$CSS_URL."aol.css" rel="stylesheet" type="text/css" />\n";
        }
       }
      elseif(preg_match('=LINUX=i',$key)) {
       $os="Linux";
       echo "<link href="".$CSS_URL."win.css" rel="stylesheet" type="text/css" />\n";
        }
      else{
       $os="Unbekannt";
       }
       //Operating-System scan end

      ?>

      Das die Tabellen nicht alle gleich aussehen werden ist mir klar, nur ist mir aufgefallen, dass z.B. die Ausrichtung in allen anders ist und was mich noch wahnsinnig macht sind vernünftige Zeilenhöhen bzw. das padding so wie der farbige Rand.

      Die BRK Seite besteht inzwischen zu einem Großteil aus dem internen Bereich, in dem die meisten Tabellen sind.

      Was mich halt interessieren würde ist es besser jeder Tabelle eine id oder klasse zu geben und da alles zu definieren oder kann man ein paar Sachen allgemein definieren ohne sich dann alles zu verbauen. Ganz einfach wie macht ihr das bei größeren Seiten mit dem css?

      1. Hi,

        $key=$_SERVER['HTTP_USER_AGENT'];

        Dir ist offensichtlich unbekannt, dass diese Angabe ja nach Browser und Kenntnisstand beliebig manupulierbar ist und hier alles Mögliche und Unmögliche drin stehen kann?
        Und selbst wenn die Grundkennung, also der Browsertyp, nicht manipuliert wurde, musst Du mit möglichen Zusätzen rechnen.

        if(preg_match('=MAC=i',$key)) { // Falls ein Mac reicht das basic css

        wer Seinen Namen "MacMurdoc" anfügt, nutzt einen Macintosh ...

        elseif(preg_match('=WIN=i',$key)) {

        ... und wer sich "Winner" nennt, nutzt Windows? ...

        echo "<link href="".$CSS_URL."ie6.css" rel="stylesheet" type="text/css" />\n";

        IE6-Styles solltest Du - wenn erforderlich - stets über Conditional Comments anbieten.

        echo "<link href="".$CSS_URL."aol.css" rel="stylesheet" type="text/css" />\n";

        wozu braucht man ein AOL-CSS?

        elseif(preg_match('=LINUX=i',$key)) {
        $os="Linux";
        echo "<link href="".$CSS_URL."win.css" rel="stylesheet" type="text/css" />\n";

        huch! Wieso gibst Du Linux-Usern ein Windows-CSS? Und welche Auswirkung hat Deiner Meinung nach das Betriebssystem auf die Interpretation von CSS?

        Was mich halt interessieren würde ist es besser jeder Tabelle eine id oder klasse zu geben und da alles zu definieren oder kann man ein paar Sachen allgemein definieren ohne sich dann alles zu verbauen. Ganz einfach wie macht ihr das bei größeren Seiten mit dem css?

        Ich definiere die Tabellen-Elemente ganz allgemein und gebe einer besonders zu formatierenden Tabelle eine ID bzw. mehreren gleichartigen Tabellen eine class.

        freundliche Grüße
        Ingo

        1. Hi,

          $key=$_SERVER['HTTP_USER_AGENT'];
          Dir ist offensichtlich unbekannt, dass diese Angabe ja nach Browser und Kenntnisstand beliebig manupulierbar ist und hier alles Mögliche und Unmögliche drin stehen kann?
          Und selbst wenn die Grundkennung, also der Browsertyp, nicht manipuliert wurde, musst Du mit möglichen Zusätzen rechnen.

          richtig, das ist mir unbekannt. Aber wie viele Leute ändern da was dran? Also für den Ottonormal User denke ich tut es das schon.
          Ich weiß nicht ob du schon mal Seite unter verschiedenen OS angeschaut hast. Mac hat zumindest ein anderes Farbprofil als Win und was auf dem Mac etwas dunkel ist kann man unter unter umständen auf einem Win Rechner nicht mehr lesen. Darum mache ich da unterscheidungen.
          Für AOL wollte ich mal ein extra CSS machen, da es da lange ein Problem mit der Darstellung gab.

          Ich definiere die Tabellen-Elemente ganz allgemein und gebe einer besonders zu formatierenden Tabelle eine ID bzw. mehreren gleichartigen Tabellen eine class.

          was definierst du ganz allgemein? Kannst du mir da vllt. ein Beispiel nennen?

          1. Hi,

            richtig, das ist mir unbekannt. Aber wie viele Leute ändern da was dran?

            zugegeben relativ wenige ändern da selbst etwas dran, aber es muss nur mal ein Zusatzprogramm kommen, welches mac oder win im Namen hat und an den UA-String anhängt...

            Mac hat zumindest ein anderes Farbprofil als Win und was auf dem Mac etwas dunkel ist kann man unter unter umständen auf einem Win Rechner nicht mehr lesen. Darum mache ich da unterscheidungen.

            Ich denke, dass es viel größere Unterschiede gibt, die auf unterschiedliche Monitore bzw. Kalibrierungen derselben zurück zu führen sind. Du solltest besser Farbkombinationen wählen, die unter verschiedensten Bedingungen gut lesbar sind. Dein hellblau auf weiss bzw. hellrot auf rosa finde ich sehr unglücklich.

            was definierst du ganz allgemein? Kannst du mir da vllt. ein Beispiel nennen?

            z.B. http://em.td-duesseldorf-rot-weiss.de/?Karten und die beiden Folgeseiten.
            Allgemein definiert ist:

            table {  
              border:2px solid #039; border-collapse:collapse; margin:1em 0;  
            }  
            th, td {  
              font-weight:normal; text-align:left; padding:0.2em; border:1px solid #fcb813;  
            }
            

            Und speziell z.B. für diese Tabelle:

            .rot { background:#ce0821; font-weight:bold }  
            .orange { background:#de8418; font-weight:bold }  
            .gelb { background:#f7e700; font-weight:bold }  
            .gruen { background:#218c21; font-weight:bold }  
            .blau { background:#527bbd; font-weight:bold }
            

            sowie @media print weißer Hintergrund und stattdessen Angaben zu color.

            Oder für die Ergebnis-Tabellen:

            .ergebnis { border:0 }  
            .ergebnis td { padding: 0.1em 1em }  
            .kreuze { font-family: "Courier New", Courier, monospace }  
            .platz { color:#d94e03; font-weight:bold }
            

            freundliche Grüße
            Ingo

            1. » Und speziell z.B. für diese Tabelle:

              .rot { background:#ce0821; font-weight:bold }
              .orange { background:#de8418; font-weight:bold }
              .gelb { background:#f7e700; font-weight:bold }
              .gruen { background:#218c21; font-weight:bold }
              .blau { background:#527bbd; font-weight:bold }[/code]
              sowie @media print weißer Hintergrund und stattdessen Angaben zu color.

              rot, orange, gelb usw sind keine gute klassennamen - in diesem fall wären "kategorie_pk1" usw besser namen

              1. Hi,

                rot, orange, gelb usw sind keine gute klassennamen - in diesem fall wären "kategorie_pk1" usw besser namen

                ob Du's glaubst oder nicht - ich war mir ziemlich sicher, dass irgend jemand hier diese oft gelesene Äußerung von sich gibt. ;-)
                Aber wenn Du genauer hinsiehst, dann sollte Dir der farbliche Bezug zur Grafik auffallen, der diesem Klassennamen ausnahmsweise mal einen Sinn gibt. Genauso würde ich dem roten Farbsignal einer Ampel die Klasse "rot" eher zuweisen als z.B. "stopp".

                freundliche Grüße
                Ingo

                1. ob Du's glaubst oder nicht - ich war mir ziemlich sicher, dass irgend jemand hier diese oft gelesene Äußerung von sich gibt. ;-)

                  eh klar, das muss von mir kommen :D

                  Aber wenn Du genauer hinsiehst, dann sollte Dir der farbliche Bezug zur Grafik auffallen, der diesem Klassennamen ausnahmsweise mal einen Sinn gibt. Genauso würde ich dem roten Farbsignal einer Ampel die Klasse "rot" eher zuweisen als z.B. "stopp".

                  ich hab mir die grafik angesehen und überlegt - dann hab ich nochmal überlegt und gedacht "jetzt hast du schon mit deinem satz angefangen, jetzt brings zuende"  der bezug zur grafik ist da, das stimmt - aber was ist zb mit leuten mit farbschwäche? ;) der textuelle bezug zur grafik bzw den rängen ist so auch gegeben und zwar durch kategorien - bei gedruckten karten steht wahrscheinlich auch nur der text drauf, diese sind dann nicht zwangsläufig in farbe gedruckt

                  und was ist, wenn die mal umgefärbt werden? zb in lila-abstufungen? oder mit symbolen versehen?

                  hab irgendwo mal gelesen, dass tiefgaragen in großen einkaufszentren mittlerweile mit symbolen anstatt farben versehen werden, weil sich die leute farben schlechter merken als pictogramme

                  was ist, wenn die ränge in "affe, kuh, baum, elch und krokodil" umbenannt werden? ;)

                  1. Hi,

                    der bezug zur grafik ist da, das stimmt - aber was ist zb mit leuten mit farbschwäche? ;) der textuelle bezug zur grafik bzw den rängen ist so auch gegeben und zwar durch kategorien

                    nein, da irrst Du Dich gleich doppelt.

                    1. ist außer der Farbe (leider) gar kein Bezug gegeben (PK 1 geht z.B. von J bis N). Eigentlich hätte ich den tds zumindest einen title spendieren sollen...
                    2. Leute mit Farbschwäche werden daher leider einige Bezüge leider gar nicht erkennen können - und ein anderer Klassenname hätte Ihnen wohl auch kaum geholfen, oder glaubst Du, sie schauen sich den Quelltext an?

                    und was ist, wenn die mal umgefärbt werden? zb in lila-abstufungen? oder mit symbolen versehen?

                    das ist kaum anzunehmen. Die Halle ist relativ neu und der Sitzplan halt so konzipiert worden. Nicht auf meinem Mist gewachsen und ich konnte halt nur das verwenden, was insb. auch so auf den Flyern vorhanden war.

                    freundliche Grüße
                    Ingo

                    1. nein, da irrst Du Dich gleich doppelt.

                      dann hab ich den plan falsch verstanden ;)

                      das ist kaum anzunehmen. Die Halle ist relativ neu und der Sitzplan halt so konzipiert worden. Nicht auf meinem Mist gewachsen und ich konnte halt nur das verwenden, was insb. auch so auf den Flyern vorhanden war.

                      ach komm, gib mir eine chance - irgendwann wollen sie's ändern :D

                  2. Hallo,

                    hab irgendwo mal gelesen, dass tiefgaragen in großen einkaufszentren mittlerweile mit symbolen anstatt farben versehen werden, weil sich die leute farben schlechter merken als pictogramme

                    das kann ich nur schwer glauben. Ich vermute, der Grund ist vielmehr, dass die Lichtverhältnisse in den Tiefgaragen und Parkhäusern meist relativ schlecht sind und Farben im Licht der Leuchtstoffröhren teils sehr schlecht unterscheidbar sind. Denn normalerweise können sich Leute eher daran erinnern, dass das vor der Hofeinfahrt parkende Auto dunkelgrün war, als dass sie sich das Oldenburger Kennzeichen gemerkt hätten (nur ein x-beliebiges Beispiel, es hätte auch silber und Regensburg sein können).

                    So long,
                     Martin

                    --
                    F: Was ist wichtiger: Die Sonne oder der Mond?
                    A: Der Mond. Denn er scheint nachts. Die Sonne dagegen scheint tagsüber, wenn es sowieso hell ist.
          2. Hi,

            richtig, das ist mir unbekannt. Aber wie viele Leute ändern da was dran?

            bis zu 100% des aktuellen Falls, den Du betrachtest. Und Du hast keine Chance, dies zu erkennen.

            Also für den Ottonormal User denke ich tut es das schon.

            "Otto Normaluser" sitzt hinter der Firewall eines Firmen-/Familien-/Wohnheim-/Uni-/Internet-Café-Netzwerkes, die den User-Agent-String manipuliert, oder benutzt einen anonymisierenden Proxy.

            Ich weiß nicht ob du schon mal Seite unter verschiedenen OS angeschaut hast. Mac hat zumindest ein anderes Farbprofil als Win und was auf dem Mac etwas dunkel ist kann man unter unter umständen auf einem Win Rechner nicht mehr lesen. Darum mache ich da unterscheidungen.

            Glaube mir: Es geht auch anders. Zwei der Seiten[1], die ich betreue, haben zusammen locker 25 Millionen Aufrufe am Tag; da ist die gesamte Bandbreite aller denkbaren Nutzer vertreten. Und sie alle bekommen die selben Stylesheets vorgelegt.

            Cheatah

            [1] Seiten, nicht Sites.

            --
            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
          3. Hallo,

            $key=$_SERVER['HTTP_USER_AGENT'];
            Dir ist offensichtlich unbekannt, dass diese Angabe ja nach Browser und Kenntnisstand beliebig manupulierbar ist und hier alles Mögliche und Unmögliche drin stehen kann?
            richtig, das ist mir unbekannt. Aber wie viele Leute ändern da was dran?

            mehr als du glaubst. Viele, die einen Proxy verwenden; viele, die eine Desktop-Firewall verwenden; viele, die ein anderes Privacy-Tool verwenden; ein paar wenige, die Spaß dran haben, irgendwie anders zu sein.
            Du musst zum Beispiel auch damit rechnen, dass der HTTP-User-Agent gar nicht angegeben ist!

            Also für den Ottonormal User denke ich tut es das schon.

            Nein. Die vielen Stolpersteine wurden dir jetzt von mehreren Mitlesern aufgezeigt.

            So long,
             Martin

            --
            Was du heute kannst besorgen,
            das geht sicher auch noch morgen.
            1. Also für den Ottonormal User denke ich tut es das schon.

              Nein. Die vielen Stolpersteine wurden dir jetzt von mehreren Mitlesern aufgezeigt.

              ums zusammenzufassen: frage einen browser nie, wie er heisst (oder lese es aus dem http header oder sonstwo raus)

              frage ihn immer, was er kann

              die besten "was kannst du?"-abfragen für zusätzliche oder andere stylesheets sind wahrscheinlich conditional comments - eine andere möglichkeit sind hacks, wobei diese schon wieder probleme bereiten können, da man nie genau weiss, ob ein anderer browser unter bestimmten voraussetzungen in zukunft oder vergangenheit nicht auch mal auf den selben bug bzw das selbe fehlverhalten anspringt

              für browserauswertung in serverseitigen sprachen empfehlen sich hybridlösungen - wie zb javascript - mit javascript lassen sich durch bestimmte funktionen/methoden/objekte die fähigkeiten von browsern bestimmen und so feststellen um welchen browser es sich handelt - diese daten lassen sich dann notfalls noch mit dem user agent vergleichen

              aber wie gesagt: für css-angelegenheiten ist standardkonformer code und ein paar ausnahmen für den ie6 per conditional comments die beste lösung

              1. Hi,

                ums zusammenzufassen: frage einen browser nie, wie er heisst (oder lese es aus dem http header oder sonstwo raus)

                frage ihn immer, was er kann

                die besten "was kannst du?"-abfragen für zusätzliche oder andere stylesheets sind wahrscheinlich conditional comments

                ähm, das ist eine klassische "Wie heißt Du?"-Frage, die z.B. gerne mal vom IE 5 mit "IE 7" beantwortet wird.

                aber wie gesagt: für css-angelegenheiten ist standardkonformer code und ein paar ausnahmen für den ie6 per conditional comments die beste lösung

                Die entsprechenden Diskussionen zu diesem Thema sind an Dir vorbeigegangen?

                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. ähm, das ist eine klassische "Wie heißt Du?"-Frage, die z.B. gerne mal vom IE 5 mit "IE 7" beantwortet wird.

                  navigator.appVersion ist eine beliebte methode, die liefert aber bei mir in der arbeit zb einfach primitv "Apache" als antwort und jetzt mal mit welchem browser ich surfe

                  Die entsprechenden Diskussionen zu diesem Thema sind an Dir vorbeigegangen?

                  jaja ich weiss - hacks, hacks, hacks - davon halte ich aber nix

              2. @@suit:

                mit javascript lassen sich durch bestimmte funktionen/methoden/objekte die fähigkeiten von browsern bestimmen und so feststellen um welchen browser es sich handelt

                BTW, conditional compilation ist dir bekannt?

                Live long and prosper,
                Gunnar

                --
                Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
                1. BTW, conditional compilation ist dir bekannt?

                  nein, kannte nicht noch nicht - aber das ist ja wieder nur in Irgend Einem browser implementiert so wie ich das verstanden habe?

  2. Darum meine Fragen. a wie organisiert man sich am besten seine CSS für eine große Seite um den Überblick zu behalten.

    Ein paar Dinge, die mir auf die Schnelle zufliegen:

    • Dokumentieren!
    • Von außen nach innen gehen und von allgemein zu spezifisch (Paradox, aber zurecht: Das wird gerne auch mal genau andersrum empfohlen.)
    • Allgemeine Styles oben im Stylesheet halten, spefizisches unten -> Unten wird gebaut.
    • CSS Spezifität beachten und vorsichtig mit !important sein
    • Jederzeit auf eine Wiederverwendbarkeit von Elementen hinarbeiten (Baukastenprinzip)
    • Im HTML an zentralen Stellen Weichen setzen (z.B. auch eine body-Klasse oder -ID)

    Wer mag, kann gerne anpassen oder ergänzen.

    Viele Grüße!
    _Dirk

    --
    »Schweizer machen sehr guten Kakao, auch wenn sie ihn selbst genauso wenig anerkennen wie Swatch-Uhren.«
    - Top Fives, Herbst-/Winterkollektion
      • Dokumentieren!

      ein übersichtlich gehaltenes stylesheet muss ansich nicht dokumentiert werden, wenn man klassennamen wie "s1, s2, rb, kz, hb und aa" vermeidet passiert das eher selten ;)

      • Von außen nach innen gehen und von allgemein zu spezifisch (Paradox, aber zurecht: Das wird gerne auch mal genau andersrum empfohlen.)

      jein - gruppierende elemente zuerst, dann allemeine dinge - wenn du eine liste nicht allgemein definiert hast, wie willst du dann eine vernünftige navigation erstellen? die ist spätestens dann wieder zerstört, wenn du dann die allgemeine liste definirst ;)

      • Allgemeine Styles oben im Stylesheet halten, spefizisches unten -> Unten wird gebaut.

      gruppierende elemente (ids für kopf, navigation, fuss), dann allgemeine defintionen (a bis var, schön der reihe nach) und wenn dann noch was überbleibt die sonderfälle (klassen, einzelfall-ids) - ansich eine sinnvolle strukturierung

      • Jederzeit auf eine Wiederverwendbarkeit von Elementen hinarbeiten (Baukastenprinzip)

      darum zuerst allgemein definieren - ein designguide ist in diesem fall praktisch (insbesondere defintionen wie "eine überschrift sieht so aus:" usw sollten bereits bei beginn vorhanden sein)

      • Im HTML an zentralen Stellen Weichen setzen (z.B. auch eine body-Klasse oder -ID)

      bei krass abweichenden unterseiten empfiehlt sich das dazuladen von zusätzlichen stylesheets - klassen im body-elemente sind imo schlimm

      1. Hallo suit,

        • Dokumentieren!
          ein übersichtlich gehaltenes stylesheet muss ansich nicht dokumentiert werden, wenn man klassennamen wie "s1, s2, rb, kz, hb und aa" vermeidet passiert das eher selten ;)

        der typische Optimismus, der genauso auch bei Programmierern zu finden ist.
        Ich stimme Schuer hier unbedingt zu, auch wenn es mir selbst nicht immer leicht fällt. Wäre es so, müsste man es nicht extra erwähnen.

        Freundliche Grüße

        Vinzenz

        1. der typische Optimismus, der genauso auch bei Programmierern zu finden ist.
          Ich stimme Schuer hier unbedingt zu, auch wenn es mir selbst nicht immer leicht fällt. Wäre es so, müsste man es nicht extra erwähnen.

          bitte hier unterscheiden:
          wenn ich eine dokumentation erstelle, dann heisst das zu einem projekt gibts 20 seiten wo alles haarklein erkärt wird - danns der quelltext selbst kommentiert wird, ist eine selbstverständlichkeit

          zudem, wenn im pflichtenheft definiert wird, wie die formatierung der seite auszusehen hat oder ein heftchen mit ci-guidelines vorliegt, dann muss man das nicht extra groß dokumentieren sondern dies der dokumentation beifügen

          also nochmal:
          dokumentation != kommentare im quellcode

          1. dokumentation != kommentare im quellcode

            Dann haben wir uns eben falsch verstanden. Aus meiner Sicht gehört jeder Kommentar zur Dokumentation, ist Dokumentation.

            Dass man aus deiner Sicht Stylesheets nicht dokumentieren muss, sehe ich dann genauso: Es ist nicht erforderlich, schriftlich darzulegen, wie z.B. der Spaltensatz aufgebaut ist etc.
            Kommentare hingegen sind hilfreich und meist notwendig.

            Viele Grüße!
            _Dirk

            --
            »[Nada Surf - Always Love] Immer, wenn das Lied irgendwo läuft, wünsche ich mir, die Welt um mich herum könnte mal kurz die Fresse halten.«
            - Top Fives, Playlist: Most Recent Darlings
          2. Hallo,

            dokumentation != kommentare im quellcode

            dieser Ungleichung stimme ich zu - allerdings sehe ich wie Schuer die Kommentare im Quellcode als *Teil* der Dokumentation. Je nach Komplexität des Projekts ist diese Kommentierung vielleicht bei weitem nicht ausreichend, zählt aber zweifelsohne zur Dokumentation dazu.

            So long,
             Martin

            --
            Der Gast geht solange zum Tresen, bis er bricht.
            1. dieser Ungleichung stimme ich zu - allerdings sehe ich wie Schuer die Kommentare im Quellcode als *Teil* der Dokumentation. Je nach Komplexität des Projekts ist diese Kommentierung vielleicht bei weitem nicht ausreichend, zählt aber zweifelsohne zur Dokumentation dazu.

              das stimmt - aber wenn ich von "dokumentation" rede, ist es das beiliegende "heftchen", welches die genaue funktionsweise nochmal zusammenfasst - also ein handbuch oder nachschlagewerk

              kommentare im quelltext sind schön und gut, nur wie du sagst - bei komplexen projekten mit 10000 files mit verstreuten scripten, nutzen dir inline-kommentare wenig, wenn du gar keinen plan hast, wo du überhaupt suchen musst ;)

      2. ein übersichtlich gehaltenes stylesheet muss ansich nicht dokumentiert werden, wenn man klassennamen wie "s1, s2, rb, kz, hb und aa" vermeidet passiert das eher selten ;)

        Wenn ein Stylesheet alleine von einer Person bearbeitet wird, die zudem über ein ausreichend trainiertes Gedächtnis verfügt, um sich die Seitenstruktur über lange Zeit merken zu können, und/oder wenn es sich um ein sehr kleines Stylesheet handelt, dann mag Dokumentation unnötig sein.

        In allen anderen Fällen kann ich mir nicht vorstellen, wie man überzeugend ohne Dokumentation auskommen könnte. Aber da mag auch gerne jeder seine eigene Meinung zu haben wollen. Dokumentieren ist ja gottseidank keine Pflicht ;)

        Viele Grüße!
        _Dirk

        --
        »Montags ist kein Wochenende, montags sind keine Kinopremieren, montags sind selten wichtige Events, montags ist Ruhetag, montags schuf Gott die Welt. Wenn Döner, dann montags.«
        - Top Fives, Fünf Gründe für Montagsdöner
        1. Hallo,

          Wenn ein Stylesheet alleine von einer Person bearbeitet wird, die zudem über ein ausreichend trainiertes Gedächtnis verfügt, um sich die Seitenstruktur über lange Zeit merken zu können, und/oder wenn es sich um ein sehr kleines Stylesheet handelt, dann mag Dokumentation unnötig sein.

          aber zumindest in einer minimalistischen Form dennoch sinnvoll. Ein paar Kommentare im Quellcode können schon sehr hilfreich sein.

          Dokumentieren ist ja gottseidank keine Pflicht ;)

          Aber oft eine Notwendigkeit! :-)

          Schönen Abend noch,
           Martin

          --
          Letztlich basiert alles auf dem Feuer, dem Rad, der Eins und der Null.
            (Gernot Back)
  3. Mahlzeit keine_Ahnung,

    Darum meine Fragen. a wie organisiert man sich am besten seine CSS für eine große Seite um den Überblick zu behalten. Und b wie bekommt man optisch in allen Browsern gleiche und schöne Tabellen hin?

    Als erstes mal validen HTML-Code erzeugen: This page is not Valid XHTML 1.0 Transitional!

    Dann keine Tabellen zum Layouten einsetzen, sondern http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS.

    Anschließend sollte alles Weitere kein Problem darstellen ...

    Vielleicht noch als Hintergrund Info. Ich hatte anfangs große Schwierigkeiten mit dem IE darum habe ich ein php eingefügt, dass je nach Browser und Betriebssystem unterschiedliche CSS hinzu lädt. Also es gibt ein basic.css und dann falls jemand mit Windows kommt wird noch ein win.css hinzugeladen bzw. für den IE ein IE.css.

    Wie Dir bereits gesagt wurde, ist das nicht sinnvoll.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|