Christian: Wieviel CSS ist praktikabel?

Bis vor kurzem habe ich kaum CSS benutzt
um Webseiten zu erstellen. Da ich aber mittlerweile
ein bisschen Angst hatte eine neue, vielleicht
wichtige Technolgie zu verpassen habe ich einen Blick
gewagt.

Momentan arbeite ich an einem neuen Projekt und bin an
einem Punkt angelangt an dem ich mich frage wieviel CSS
wirklich noch praktikabel ist. Ich benutze weiterhin
görßenteils Tabellen um Elemente auf der Seite zu
positionieren aber ansonsten habe ich eigentlich alle
Attribute in CSS verpackt, auch Dinge wie Zellgrössen
von Tabellen. Mittlerweile wird es immer unübersichtlicher.

Ich hab das Gefühl, das ich viel mehr rumjustieren und
werkeln muss, als wenn ich keine CSS verwenden würde. Deshalb
würde ich es mich mal interessieren in was für Fällen ich
tatsächlich CSS benutzen sollte. Sollte man Elemente
weiterhin mit Tabellen positionieren? Was ist mit den
Zellgrößen? Gibt es Fälle wo die momentan verbreitete
CSS Revision einfach unpraktisch und glatter Overkill ist?

Ich freue mich über Tips in jede Richtung!

MfG

Christian

  1. Moin!

    Bis vor kurzem habe ich kaum CSS benutzt
    um Webseiten zu erstellen. Da ich aber mittlerweile
    ein bisschen Angst hatte eine neue, vielleicht
    wichtige Technolgie zu verpassen habe ich einen Blick
    gewagt.

    In der Tat: CSS ist eine der Zukunftstechnologien, da sollte man dranbleiben! :)

    Momentan arbeite ich an einem neuen Projekt und bin an
    einem Punkt angelangt an dem ich mich frage wieviel CSS
    wirklich noch praktikabel ist. Ich benutze weiterhin
    görßenteils Tabellen um Elemente auf der Seite zu
    positionieren aber ansonsten habe ich eigentlich alle
    Attribute in CSS verpackt, auch Dinge wie Zellgrössen
    von Tabellen. Mittlerweile wird es immer unübersichtlicher.

    Du machst was falsch. Nämlich die Benutzung von Tabellen.

    Tabellenlayouts _sind_ unübersichtlich, ob mit oder ohne CSS (es sei denn, sie sind sehr einfach gehalten und kaum verschachtelt).

    Moderne Layouts benutzen positionierte <div>-Layer. Der HTML-Code verringert sich auf ein absolut herrliches Minimum:

    <div id="layerid" class="layerklasse">Inhalt des Layers</div>

    Das ist schon wirklich ausufernd gedacht: Der Layer kriegt sowohl eine ID (darüber wird er positioniert) als auch eine Klasse (damit wird er und vielleicht 20 andere gleichartige Layer formatiert).

    Das Layout spielt sich dann vollkommen in der CSS-Datei ab:

    #layerid {
      position:absolute;
        top: 200px;
        left: 123px;
        width: 96px;
        height: 27px;
    }

    .layerklasse {
      font-family:Arial, sans-serif;
      font-size:13px;
      color:#FFF;
      background-color:#008;
      border:solid 2px #25771F;
      padding:3px;
    }

    Wenn du die Eigenschaft von CSS ausnutzt, und wirklich ganz grundlegende Formatierungen wie die Schriftart und Farbe (zumindest die hauptsächlich genutzen Werte) für body { } festzulegen, dann wird die Liste der Formatierungen für jedes Element natürlich kürzer. Manchmal muß man gewisse Werte für Netscape 4 wiederholen, damit er es merkt.

    Ich hab das Gefühl, das ich viel mehr rumjustieren und
    werkeln muss, als wenn ich keine CSS verwenden würde. Deshalb
    würde ich es mich mal interessieren in was für Fällen ich
    tatsächlich CSS benutzen sollte. Sollte man Elemente
    weiterhin mit Tabellen positionieren? Was ist mit den
    Zellgrößen? Gibt es Fälle wo die momentan verbreitete
    CSS Revision einfach unpraktisch und glatter Overkill ist?

    Das täuscht, und dir fehlt noch die Erfahrung mit CSS. Wenn du einmal begriffen hast, was CSS macht, und was man beeinflussen kann, dann geht alles viel leichter. Aber natürlich nur, wenn du keine Tabellen-Layouts mehr machst, denn die behindern die CSS-Entfaltung wirklich.

    Es ist also eher eine Alles-oder-Nichts-Situation: Entweder CSS, oder Tabellen.

    - Sven Rautenberg

    1. Gibt es denn einen einigermassen vernünftigen HTML/CSS-WYSIWYG Editor, der einigermassen sauberen Code fabriziert (Wie z.B. Dreamweaver relativ sauberen HTML-Code baut)?

      1. Hi, Christian

        Gibt es denn einen einigermassen vernünftigen HTML/CSS-WYSIWYG Editor, der einigermassen sauberen Code fabriziert (Wie z.B. Dreamweaver relativ sauberen HTML-Code baut)?

        Das ist falsch. Dreamweaver bastelt _keinen_ sauberen Code! Sauberen, validen Code bekommt man IMHO nur hin, wenn man alles selbst schreibt - nur so behält man die Übersicht und kann an den gewünschten Schrauben drehen. Mir ist auch kein WYSIWYG-Editor bekannt, der die Erstellung von Stylesheets vernünftig handhabt.

        Wenn du dich trotzdem noch für CSS-Editoren interessierst, empfehle ich dir Google:

        http://www.google.com/search?q=freeware+css+editor
        http://www.google.com/search?q=freeware+wysiwyg+css+editor

        Als Editor (kein WYSIWYG) verwende ich zB http://www.chami.com/html-kit/

        LG Orlando

        1. Tach auch,

          Als Editor (kein WYSIWYG) verwende ich zB http://www.chami.com/html-kit/

          Wobei vielleicht noch anzumerken waere dass HTML-Kit ein plugin fuer die Bearbeitung von Stylesheets benutzt: http://www.bradsoft.com/topstyle/index.asp

          Gruss,
          Armin

          1. Hi, Armin

            Wobei vielleicht noch anzumerken waere dass HTML-Kit ein plugin fuer die Bearbeitung von Stylesheets benutzt: http://www.bradsoft.com/topstyle/index.asp

            Grundsätzlich bastle ich ja auch mit HTML-Kit eher direkt an meinen Fabrikaten (habe daher recht wenige PlugIns installiert), aber _dieses_ Programm ist in der Tat sehr mächtig, durchdacht und komfortabel. Ich werde mir ansehen, ob es mich zum Umstieg bewegen könnte - Danke jedenfalls für den Tip!

            LG Orlando

      2. Yo!

        Gibt es denn einen einigermassen vernünftigen HTML/CSS-WYSIWYG Editor, der einigermassen sauberen Code fabriziert (Wie z.B. Dreamweaver relativ sauberen HTML-Code baut)?

        Das Problem ist: HTML ist nicht WYSIWYG. Insofern kann es auch keine WYSIWYG-Editoren geben. Allerhöchstens WYSIWYmayG.

        Und "sauberen" Code erhält man wirklich nur per Handarbeit, weil Handarbeit durch einen funktionierenden, intelligenten Kopf unterstützt wird - und nur durch wirkliche Intelligenz läßt sich effektives, platzsparendes und gutes HTML und CSS schreiben. Ein irgendwie geartetes Tool kriegt sowas in der Regel nicht hin.

        Damit will ich keinesfalls derartige Tools in Abrede stellen - die leisten sicherlich recht gute Arbeit mittlerweile, aber ich gehöre eindeutig nicht zu deren Zielgruppe. Wer sich hinterher nicht um den Quelltext kümmert, wird mit solchen Tools sicherlich glücklich.

        Und auch der Dreamweaver läßt von Hand editierten Code in Ruhe - auch in CSS-Dateien. Ich fürchte nur, daß er bereits angelegte CSS-Klassen etc. nicht unbedingt gut zu nutzen versteht, und man deshalb im Quelltext der HTML-Seite manuell nacharbeiten muß (oder in irgendeinem Objektinspektor, wenn's sowas gibt). Mangels Benutzung fehlt mir da das Expertenwissen.

        Ich benutze lieber Phase 5 (http://www.meybohm.de).

        - Sven Rautenberg

    2. Hallo,

      Du machst was falsch. Nämlich die Benutzung von Tabellen.

      Tabellenlayouts _sind_ unübersichtlich, ob mit oder ohne CSS (es sei denn, sie sind sehr einfach gehalten und kaum verschachtelt).

      Moderne Layouts benutzen positionierte <div>-Layer. Der HTML-Code verringert sich auf ein absolut herrliches Minimum:

      Dazu folgende Frage: ich kämpfe auch mit geschachtelten Tabellenlayouts herum, die wirklich ziemlich unübersichtlich sind. Eine Seite mit Kopfteil und Body, in der im Body ein senkrechter Balken enthalten ist, der bis zum Seitenende gehen soll.
      +------------+
      |  kopf      |
      |############|
      | m # d e    |
      | e #  t a   |
      | n #   i l s|
      | u #        |
      |   #        |
      |   #        |
      +------------+
      Das mache ich momentan mit einer, die ganze Seite umfassenden, Tabelle (100%/100%), die zwei Zeilen enthält: Kopfteil und Body. Im Body ist ein img enthalten, das dann innerhalb der Body-<tr> wiederum in einer tabelle enthalten ist und eine Höhenangabe von 100% hat.
      Grauslich und unübersichtlich - aber wie würdest Du soetwas mit CSS lösen?

      Für jede Idee sehr dankbar
         Manfred

      1. Hi, Manfred

        Moderne Layouts benutzen positionierte <div>-Layer. Der HTML-Code verringert sich auf ein absolut herrliches Minimum:

        So ist es.

        +------------+
        |  kopf      |
        |############|
        | m # d e    |
        | e #  t a   |
        | n #   i l s|
        | u #        |
        |   #        |
        |   #        |
        +------------+
        wie würdest Du soetwas mit CSS lösen?

        Was hältst du davon?

        <?xml version="1.0" encoding="ISO-8859-1"?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>CSS statt Tabellen</title>

        <style type="text/css">
        <!--
        #kopf {
         position:absolute;
         top:0px;
         left:0px;
         width:100%;
         height:70px;
        }

        #balkenhorizontal {
         position:absolute;
         top:70px;
         left:0px;
         width:100%;
         height:50px;
         color:#000;
         background-color:#aaa;
        }

        #menue {
         position:absolute;
         top:120px;
         left:0px;
         width:200px;
        }

        #balkenvertikal {
         position:absolute;
         top:120px;
         left:200px;
         width:80px;
         bottom:0px;
         height:100%;       /* verbesserungswürdig */
         color:#000;
         background-color:#aaa;
        }

        #details {
         position:absolute;
         top:120px;
         left:280px;
        }
        -->
        </style>

        </head>
        <body>

        Wobei noch zu sagen ist, dass mir die Lösung von height:100% beim vertikalen Balken nicht gefällt (ist nur zur schnellen Demonstration, weil der IE für bottom:0px zu blöd ist). Ich würde um dieses DIV und die Details entweder noch ein weiteres DIV legen und darin den Balken mit 100% Höhe ausrichten, damit er sich an die Höhe der Details anpasst oder besser noch über ein Hintergrundbild beim Body definieren. Ich habe das Ergebnis mal online gestellt (http://www.skop.net/self/css_layout.html). Viel Spaß beim Experimentieren.

        Ich darf eine neue Kerbe in den CSS-Zauberstab ritzen? ;-)

        LG Orlando

        1. Hallo Orlando,

          Ich darf eine neue Kerbe in den CSS-Zauberstab ritzen? ;-)

          ALLERDINGS! Das ist wirklich ein Hammer.

          Vielen Dank
             Manfred

      2. Moin!

        +------------+
        |  kopf      |
        |############|
        | m # d e    |
        | e #  t a   |
        | n #   i l s|
        | u #        |
        |   #        |
        |   #        |
        +------------+

        Zuerst mal: Deine Probleme werden geringer, wenn du die Aufgabenstellung CSS-mäßig modifizierst. Solange du in Tabellen denkst, kommt designmäßig auch immer nur eine Tabelle heraus - und die kannst du logischerweise einfacher als Tabelle umsetzen. :)

        Aber grundsätzlich ist CSS nicht anders, als eine Tabelle auch: Man definiert rechteckige Bereiche. Der Unterschied ist: Diese Bereiche sind nicht in ein starres Muster gepreßt, wie bei einer Tabelle, sondern sind wirklich frei beweglich, können sich überlagern, nebeneinander stehen, umflossen werden und so weiter.

        Wenn ich mir dein Layout so ansehe, dann erkenne ich grundsätzlich folgende Struktur:
        Oben quer ein Bereich über die gesamte Breite. Darunter zweispaltig links/rechts mehr Inhalt.

        Die Balken sind erstmal garnicht von Belang. Die kriegt man ganz sicher durch Angabe einer "border" hin.

        Als HTML umgesetzt würde das so aussehen:
        <body>
        <div style="background:blue;">Headline</div>

        <div>
          <div style="width:100px; background:red; float:left;">
            Menübereich<br><br><br><br>
          </div>
          <div style="background:green;">
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
          </div>
        </div>

        </body>

        Das ist _in etwa_ schon das, was du wolltest.

        Das Menü liegt oben links elegant seitlich vom Inhalt, welcher es umfließt. Durchaus nicht uninteressant, dieser Effekt.

        Aber da du ja Tabellenartiges wolltest, kriegst du das auch:

        Das Menü muß links bleiben können, der Inhalt aber weiter nach rechts gerückt werden.

        Das zweite ist simpel: Linkes Padding oder margin erhöhen (da wir noch einen Balken wollen, lieber margin nehmen):

        <div>
          <div style="width:100px; background:red; float:left;">Menübereich<br><br><br><br></div>
          <div style="background:green; margin-left:100px;">Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br> </div>
        </div>

        Oh Wunder, das gewünschte ist schon erreicht! Jedenfalls in meinem Opera. Um das mit anderen Browsern zu bestätigen, gleich dort testen. Vor allem Netscape 4 könnte Probleme machen...

        Opera 6: OK!
        IE 5.5: OK!
        IE 6.0: OK!
        NS 4.78: Nicht hingucken, sieht etwas grausamst aus (noch).
        Mozilla: Hab ich gerade nicht da, sollte eigentlich auch ordentlich sein.

        Netscape 4 verreißt. Aber es sieht nur scheinbar so grausam aus - grundsätzlich ist Netscape durchaus in der Lage (und zeigt es ja auch), daß er die grundsätzliche Position der DIVs hinkriegt. Nur scheinbar scheint er das Menü nicht über den Rand zu legen, sondern ihn extra einzufügen.

        Dagegen kann man natürlich etwas tun: Den roten Menülayer absolut positionieren:

        <div style="width:100px; background:red; float:left; position:absolute; top:0px; left:0px;">
            Menübereich<br><br><br><br>
          </div>

        Dummerweise sorgt das dafür, daß der Layer ausbricht und sich ganz links oben hinsetzt. Besser wäre, wenn er sich einfach ganz links oben innerhalb des umschließenden DIV hinsetzt, wo er vorher ja auch war. Kein Problem:

        <div style="position:relative; left:0px; top:0px;">
          <div style="width:100px; background:red; float:left; position:absolute; top:0px; left:0px;">
            Menübereich<br><br><br><br>
          </div>
          <div style="background:green; margin-left:100px;">Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
          </div>
        </div>

        Wenn der umschließende Layer relativ positioniert ist, werden enthaltene Layer innerhalb dieses Layera ausgerichtet, nicht relativ zum Browserfenster.

        Dummerweise schießt jetzt der IE quer.

        Naja, einen Trick hätte ich da noch: Statt margin nehmen wir padding:

        <div style="background:green; padding-left:100px;">Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
            Inhaltsbereich<br>
          </div>

        Und BINGO! Alles da, wo es sein soll.

        Die Rahmen werden jetzt auf zwei Arten erstellt. Der erste Rahmen ist ein border-bottom unterhalb der Headline:

        <div style="background:blue;border-bottom:solid 10px yellow;">Headline</div>

        Netscape 4 versagt da leider. Wenn's wirklich wichtig ist, dann sollte die Linie durch eine Grafik erstellt werden.

        Der senktrechte Balken kann simpel durch ein Hintergrundbild erstellt werden. Auch das wird der Netscape 4 nicht so recht können, bzw. er verschiebt sicherlich das Bild. Eventuell hilft es, das Hintergrundbild in den umschließenden Layer zu packen.

        An diesem Punkt muß man sich eben entscheiden: Gefrickel wegen Netscape 4, oder Zufriedenheit nur für Benutzer aktueller Browser?

        Ach ja: Erst jetzt ist es angebracht, die Style-Attribute aus den DIVs zu entfernen und in ein externes Stylesheet zu packen. Die Layer erhalten dann IDs und eventuell auch noch Klassen zugewiesen, um die Formatierungen zu erhalten. Vorteil bei den style-Angaben: Ich muß bei Änderungen nur eine Datei speichern und kann direkter am Objekt arbeiten. Das geht aber nur eine begrenzte Entwicklungszeit gut.

        - Sven Rautenberg

        1. Hallo Sven,

          danke für die ausführliche Antwort. Der schrittweise Aufbau hat mir noch Einiges klar werden lassen.

          Danke
             Manfred

  2. hi

    Ich hab das Gefühl, das ich viel mehr rumjustieren und
    werkeln muss, als wenn ich keine CSS verwenden würde. Deshalb
    würde ich es mich mal interessieren in was für Fällen ich
    tatsächlich CSS benutzen sollte. Sollte man Elemente
    weiterhin mit Tabellen positionieren? Was ist mit den
    Zellgrößen? Gibt es Fälle wo die momentan verbreitete
    CSS Revision einfach unpraktisch und glatter Overkill ist?

    das ganze wird hier inzwischen einmal am Tag diskutiert. Mein Fazit: was Netscape 4 verträgt ist völlig ok. Wenn der egal ist, kannste CSS1 ohne sorgen verwenden, das Positionierungs-Zeug aus CSS2 sollte man testen, klappt meistens - oft sogar in Netscape 4. Was darüber hinausgeht, ist NN4 und dem MSIE zu hoch.

    Grüße aus Bleckede

    Kai