Timo Kraske: Designtabelle in der Tabelle?

Hallo,

ich habe gerade ein kleines Problem und zwar möchte in Content einrahmen und habe mir gedacht, das mache ich am besten mithilfe einer Tabelle, also border=1. Nun möchte ich innerhalb dieses Rahmens weiteren Content mithilfe von helfenden Tabellen anordnen, dieser Content soll dann nicht mehr umrahmt sein. Damit man sich das etwas besser vorstellen kann, hier eine Skizze:

http://img480.imageshack.us/img480/7361/htmlji7.jpg

Wie kann ich das am Besten umsetzen?

Danke

  1. Hallo,

    Hallo.

    ich habe gerade ein kleines Problem und zwar möchte in Content einrahmen und habe mir gedacht, das mache ich am besten mithilfe einer Tabelle, also border=1. Nun möchte ich innerhalb dieses Rahmens weiteren Content mithilfe von helfenden Tabellen anordnen, dieser Content soll dann nicht mehr umrahmt sein. Damit man sich das etwas besser vorstellen kann, hier eine Skizze:

    http://img480.imageshack.us/img480/7361/htmlji7.jpg

    Wie kann ich das am Besten umsetzen?

    Am besten ohne Tabellen. Verwende hierfür <div>s. Wie man das macht, sieht man hier.
    Alles zu Rand/Rändern (border) ist da.

    Danke

    MfG.

    1. Hallo,

      Verwende hierfür <div>s.

      CSS-Layout != div-Layout.

      Statt dessen sollte man strukturell sinnvolle Elemente wählen.

      <ul>/<ol> für Listen/Navigationsleisten
      <h*> für Überschriften
      <table> für Tabellen
      <p> für Absätze
      <strong>/<em> um Texte hervorzuheben
      <blockquote> für größere Zitate

      usw…
      <div>s dienen lediglich zur Gruppierung, und auch nur dann, wenn es für den jeweiligen Zweck keine sinnvolle Alternative gibt.

      mfg. Daniel

      1. Hallo,

        <div>s dienen lediglich zur Gruppierung, und auch nur dann, wenn es für den jeweiligen Zweck keine sinnvolle Alternative gibt.

        Na, ganz kann ich da als fast-Purist nicht zustimmen. <div> Teilt ein Dokument in sinnvolle Abschnitte, z.B. Inhaltsbereich und Navigationsbereich. Diese <div> sind dann schon dazu gedacht, mit CSS formatiert zu werden.
        Allerdings, sollte ein Dokument ohne Stylesheets mit <div> identisch wie  ein Dokument ohne <div> aussehen.

        Gruß;

        1. Hallo,

          <div> Teilt ein Dokument in sinnvolle Abschnitte, z.B. Inhaltsbereich

          Hierbei handelt es sich IMHO auch um eine Gruppierung, für die es keinen sinnvollen Ersatz gibt.

          und Navigationsbereich.

          Hier finde ich <div>s meistens überflüssig. Man kann eine <ul> i.d.R. genauso gut formatieren. Es gibt aber auch Ausnahmen: z.B. wenn man einen fixierten Bereich mit Außenabstand scrollbar machen möchte.

          Diese <div> sind dann schon dazu gedacht, mit CSS formatiert zu werden.

          Wenn sie unbedingt nötig sind, ja.

          Allerdings, sollte ein Dokument ohne Stylesheets mit <div> identisch wie  ein Dokument ohne <div> aussehen.

          <anspielung gemeint="nicht ganz ernst">
          Gut, dann schreibe ich gleich mal folgende Regel in mein user-Stylesheet:
          div {border:1px dotted red; margin:1em;}
          </anspielung>

          mfg. Daniel

          1. Hallo,

            Hier finde ich <div>s meistens überflüssig. Man kann eine <ul> i.d.R. genauso gut formatieren. Es gibt aber auch Ausnahmen: z.B. wenn man einen fixierten Bereich mit Außenabstand scrollbar machen möchte.

            Ja das stimmt, ich bin mal frech vom letzteren ausgegangen ;)

            <anspielung gemeint="nicht ganz ernst">
            Gut, dann schreibe ich gleich mal folgende Regel in mein user-Stylesheet:
            div {border:1px dotted red; margin:1em;}
            </anspielung>

            Ich bin mir nicht sicher, ob ich das anspielung-Element richtig verstehe.

            Ich meinte den Vergleich zweier Dokumente mit deaktivierten Stylesheets.

            In dem Dokument ohne <div> sollten Bilder z.B. nicht nebeneinander stehen, wenn sie im Dokument mit <div> untereinander stehen, weil sie mit <div> gruppiert wurden.

            Gruß;

            1. Hallo,

              <anspielung gemeint="nicht ganz ernst">
              Gut, dann schreibe ich gleich mal folgende Regel in mein user-Stylesheet:
              div {border:1px dotted red; margin:1em;}
              </anspielung>

              Ich bin mir nicht sicher, ob ich das anspielung-Element richtig verstehe.

              Ich meinte den Vergleich zweier Dokumente mit deaktivierten Stylesheets.

              Bei deaktivierten Stylesheets wirken auch weiterhin die Browser/User-Stylesheets.

              Ohne diese, könnte eine Überschrift z.B. nicht groß und fett sein. Gänzlich ohne Stylesheet würde also bedeuten, dass nur noch ein langer Textblock angezeigt wird. Keine Strukturierung, keine Zeichenumbrüche, nur blanker Text.

              In dem Dokument ohne <div> sollten Bilder z.B. nicht nebeneinander stehen, wenn sie im Dokument mit <div> untereinander stehen, weil sie mit <div> gruppiert wurden.

              OK, das klingt logisch. Nur hängt es halt von Browser/User-Stylesheet ab, ob Bilder inline-Blöcke sind, oder halt richtige Block-Elemente.

              Aber ich denke mal, dass kein Browser-Hersteller auf die Idee kommt, Bilder als Block-Elemente darzustellen.

              mfg. Daniel

              1. Hallo,

                Bei deaktivierten Stylesheets wirken auch weiterhin die Browser/User-Stylesheets.

                Ja, aber bei zwei Dokumenten, die sich nur darin Unterscheiden, dass eines zusätzlich mit <div> strukturiert ist und das andere nicht, sollte es keinen Unterschied geben, denn <div> ist ganz und gar unformatiert (bis auf die Tatsache, dass es ein Blockelement ist).

                OK, das klingt logisch. Nur hängt es halt von Browser/User-Stylesheet ab, ob Bilder inline-Blöcke sind, oder halt richtige Block-Elemente.

                Ok, war eventuell ein schlechtes Beispiel. Ersetze "Bild" durch "Text", der sollte immer inline sein.

                Gruß;

                1. Hallo,

                  […]
                  denn <div> ist ganz und gar unformatiert (bis auf die Tatsache, dass es ein Blockelement ist).

                  Hm, das hatte ich bei meiner <anspielung> nicht beachtet, Sorry.

                  Somit wäre es wohl mein Problem, wenn ich allen <div>s unbedingt eine bestimmte Formatierung zuweisen will und das irgendwo Probleme bereitet.

                  Ok, war eventuell ein schlechtes Beispiel.

                  Nein, ich fand es eigentlich recht zutreffend. Aber man muss ja irgendwie eine Ausrede finden ;-)

                  Ersetze "Bild" durch "Text", der sollte immer inline sein.

                  Naja, wer packt <div>s schon in Text…

                  mfg. Daniel

                  1. Hallo,

                    Naja, wer packt <div>s schon in Text…

                    Nein andersrum, wie sollte man auch <div> in Bilder bekommen? ;-)
                    Text in <div> und das wird leider sehr oft gemacht..

                    Gruß;

                    1. Hallo,

                      Naja, wer packt <div>s schon in Text…

                      Nein andersrum, wie sollte man auch <div> in Bilder bekommen? ;-)

                      <object data="bild.jpg" type="image/jpeg"><div>das ist ein &lt;div&gt;</div></object>

                      ;-)

                      Text in <div> und das wird leider sehr oft gemacht..

                      Stimmt.

                      mfg. Daniel

                      1. Hallo,

                        <object data="bild.jpg" type="image/jpeg"><div>das ist ein &lt;div&gt;</div></object>

                        Hehehe. Soll ich das gelten lassen? IE kann das meines wissens nämlich nicht :p

                        Gruß;

                        1. Hallo,

                          <object data="bild.jpg" type="image/jpeg"><div>das ist ein &lt;div&gt;</div></object>

                          Hehehe. Soll ich das gelten lassen? IE kann das meines wissens nämlich nicht :p

                          Hm, interessant. Zuerst kommt da so'n komisches Fenster wegen ActiveX und dann zeigt er das Bild noch nicht mal an.
                          Firefox zeigt das Bild dagegen ohne Probleme sofort an - genau wie Opera.

                          Ich dachte, dass der IE mittlerweile wenigstens mit solchen Kleinigkeiten klar kommt… :-(

                          Naja, Mosaic lässt grüßen ;-)

                          mfg. Daniel

                          1. Hallo,

                            Hm, interessant. Zuerst kommt da so'n komisches Fenster wegen ActiveX und dann zeigt er das Bild noch nicht mal an.

                            Darauf bezog ich mich eher, der IE ist nichtmal dazu in der Lage, die Alternative anzuzeigen, in diesem Fall das div-Element.

                            Ich dachte, dass der IE mittlerweile wenigstens mit solchen Kleinigkeiten klar kommt… :-(

                            Welche Version hast du getestet, IE7 müsste zumindest den Fallback anzeigen können, aber bei Bildern haben IEs ja allgemein Probleme.

                            Naja, Mosaic lässt grüßen ;-)

                            Hm, naja, ob das so stimmt. Ah, vielleicht sollte Microsoft mal wieder einen neuen Browser "einkaufen" ;-)

                            Gruß;

                            1. Hallo,

                              Ich dachte, dass der IE mittlerweile wenigstens mit solchen Kleinigkeiten klar kommt… :-(

                              Welche Version hast du getestet, IE7 müsste zumindest den Fallback anzeigen können, aber bei Bildern haben IEs ja allgemein Probleme.

                              Ich habe im 7-er getestet und tatsächlich, er zeigt die Fallback-Variante an. Das hatte ich übrigens ganz versäumt zu testen :-(

                              Naja, Mosaic lässt grüßen ;-)

                              Hm, naja, ob das so stimmt.

                              Wenn man überlegt, dass das Teil noch nicht mal mit prototypischer Erweiterung des DOM klar kommt, könnte man aber durchaus in's stutzen kommen. In NS4 waren die Einschränkungen zwar noch extremer, aber eine gewisse Ähnlichkeit besteht meiner Einung nach schon.

                              Ah, vielleicht sollte Microsoft mal wieder einen neuen Browser "einkaufen" ;-)

                              [x] dafür
                              Aber dann nicht selbst weiterentwickeln, sondern nur „updaten“.

                              mfg. Daniel

                              1. Hallo,

                                Ich habe im 7-er getestet und tatsächlich, er zeigt die Fallback-Variante an. Das hatte ich übrigens ganz versäumt zu testen :-(

                                Schön, dass immerhin das jetzt funktioniert.

                                Wenn man überlegt, dass das Teil noch nicht mal mit prototypischer Erweiterung des DOM klar kommt, könnte man aber durchaus in's stutzen kommen. In NS4 waren die Einschränkungen zwar noch extremer, aber eine gewisse Ähnlichkeit besteht meiner Einung nach schon.

                                Wobei der IE natürlich auch Altersschwäche hat.
                                Habe vor kurzem gelesen wir (d.h. Webautoren) sollten froh sein, weil der Markt mit IE6 eingefroren ist, da im Vergleich Netscape 4 wesentlich beschränkter war, als der Markt mit diesem eingefroren ist.
                                Nur leider sieht man heute noch Gletscher der NS4-Eiszeit und wenn ich da mit IE6 vorwärts rechne ...
                                Da ist man schon froh, dass der IE6 einen standardkonformen Modus besitzt.

                                [x] dafür
                                Aber dann nicht selbst weiterentwickeln, sondern nur „updaten“.

                                Frage mich, ob IE wirklich wie NS endet oder doch noch die Kurve kratzt.

                                Gruß;

  2. Hallo,

    ich habe gerade ein kleines Problem und zwar möchte in Content einrahmen

    Ähm, du willst also ein Block-Element einfügen, dem du über CSS einen Rahmen gibst oder?

    und habe mir gedacht, das mache ich am besten mithilfe einer Tabelle, also border=1.

    Ist das, abgesehen davon, dass eine Tabelle für Tabellarische Daten gedacht ist, nicht irgendwie ziemlich umständlich?

    Nun möchte ich innerhalb dieses Rahmens weiteren Content mithilfe von helfenden Tabellen anordnen, dieser Content soll dann nicht mehr umrahmt sein.

    Auch das lässt sich mit CSS ohne Probleme machen.

    Damit man sich das etwas besser vorstellen kann, hier eine Skizze:

    http://img480.imageshack.us/img480/7361/htmlji7.jpg

    Wie kann ich das am Besten umsetzen?

    OK, das könnte man noch als Tabellarische Daten durchgehen lassen ;-)

    Also verwendest du genau *eine* Tabelle. Mit CSS gibst du der Tabelle einen Rahmen und entfernst gleichzeitig den, der einzelnen Zellen.

      
    table {border:2px outset gray;}  
    td {border:0;}  
    
    

    …und schon hättest du dein Vorhaben umgesetzt.
    Beschäftige dich mit http://de.selfhtml.org/css/index.htm@title=CSS und lerne, dass man viele http://de.selfhtml.org/css/layouts/index.htm@title=Layouts damit viel einfacher umsetzen könnte.

    mfg. Daniel

  3. Das mit dem CCS klappt super, allerdings gibt es da das nächste Problem und zwar soll der ganze Text in ein Portal eingegliedert werden und wenn ich das tue, werden alle Sachen, die nicht zum Content gehören eben auch umrandet. Kann man das irgendwie verhindern oder kann jemand doch nochmal den Weg über die <div> genauer beschreiben?

    Danke