Einfaches Table Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Einfaches Table Problem

    Ich habe das schon tausendmal hingekriegt, aber jetzt will es einfach plötzlich nicht mehr gehen. Ich drehe noch durch. Ich möchte ganz einfach eine Tabelle, welche GENAU den gesamten Fensterbereich ausfüllt. Dazu habe ich folgenden Code erstellt:
    Code:
    ...
    <body>
     <table class="layout">
      <tr>
       <td class="navigation"></td>
       <td class="h-block-1"></td>
       <td class="content"></td>
      </tr>
     </table>
    </body>
    ...
    Ausserdem habe ich folgenden CSS Code:
    Code:
    ...
    body { margin:0px; padding-left:20px; padding-right:20px; }
    table.layout { width:100%; height:100%; table-layout:fixed; border-collapse:collapse; }
    td.navigation { width:160px; }
    td.h-block-1 { width:40px; }
    td.content { }
    ...
    Sieht jemand den Fehler, der mir bald die letzten Nerven raubt?

    [Edit] Ach ja, noch was...gibt es eine Möglichkeit (JScript, vielleicht?) ein nichtscrollendes Menü ohne frames hinzukriegen?
    Zuletzt geändert von zagibu; 14.11.2003, 12:44.

  • #2
    was soll das padding im body???
    it's not a bug,
    it's a feature!

    Kommentar


    • #3
      Original geschrieben von XGremliN
      was soll das padding im body???
      Aller wahrscheinlichkeit nach einen Innenabstand bestimmen! Aber moeglicherweise versucht er damit ja auch ein koestliches Kaeseomlette zu erzeugen.

      Kommentar


      • #4
        Hmm,

        also ich habe es getestet und bei mir funktioniert es auch so wie Du es meinst.

        @XGremliN:

        Das Padding bewirkt nix neues, nur das lediglich weniger geschrieben wird, als wenn man Margin richtig ausrichten würde.

        Wie sagt man so schön! "Viele weg führen nach Rom!"

        Bye
        Heinzelmännchen

        Kommentar


        • #5
          Innenabstand im Body? Das wäre mir neu! Ich mach sowas eigentlich nur bei Tabellen.
          it's not a bug,
          it's a feature!

          Kommentar


          • #6
            Original geschrieben von XGremliN
            Innenabstand im Body? Das wäre mir neu! Ich mach sowas eigentlich nur bei Tabellen.
            Naja ich würde das mit Margin-Left und -Right machen. Jeder jedoch auf seine Art und weise.

            Kommentar


            • #7
              Jedes Blockelement kann einen Innenabstand haben. Und da body ein Blockelement ist...

              Padding braucht man auch sehr häufig in div-Containern.

              Kommentar


              • #8
                Ok, vielleicht habe ich das falsch verstanden, aber margin zeichnet doch ausserhalb den background nicht, oder doch? Naja, vielleicht würde es beim body ja gehen...egal. Das Problem ist immer noch, dass die Tabelle in der Höhe nicht das gesamte Fenster ausfüllt. Warum nicht?

                [Edit] Ach ja, noch was: Wenn man ein Element mit width:100px hat und dann noch mit border:2px, ist dann der innere Bereich des Elementes nur noch 196 px gross, oder ist die gesamte Grösse des Elementes dann 204px?

                [Edit2] Habe die im [Edit] Bereich gestellte Frage herausgefunden: Die Rahmendicke wird zur width/height dazugezählt.
                Zuletzt geändert von zagibu; 14.11.2003, 13:47.

                Kommentar


                • #9
                  Original geschrieben von zagibu
                  Das Problem ist immer noch, dass die Tabelle in der Höhe nicht das gesamte Fenster ausfüllt. Warum nicht?
                  da die höhe der elternelemente (in deinem falle body und html) von der höhe der tabelle anhängt, beisst sich die katze hier selbst in den schwanz.

                  definiere für alle elternelemente der tabelle ebenfalls height:100%, dann sollte es funktionieren.
                  I don't believe in rebirth. Actually, I never did in my whole lives.

                  Kommentar


                  • #10
                    Das hatte ich schon mal. Hab dem Body ne width und height von 100% gegeben, aber dann war er zu gross! Man musste scrollen...wieso weiss ich nicht.

                    [Edit] Ok, jetzt weiss ich wieso. Padding wird zur Gesamtgrösse dazugezählt. Dann werde ich es mal ohne das Padding versuchen.

                    [Edit2] Hey, das funktioniert ja sogar! Habe beim body die width und height auf 100% gestellt, das padding durch leere Tabellenzellen ersetzt und jetzt ist alles tiptop.
                    Zuletzt geändert von zagibu; 14.11.2003, 16:18.

                    Kommentar


                    • #11
                      Ok, neues Problem: Ich verschachtle zwei Tabellen, und plötzlich ist meine Seite wieder zu gross, obwohl die zweite Tabelle nicht einmal eine festgelegte Höhe hat! Langsam kackts mich gewaltig an. Entweder sehe ich da etwas Grundlegendes nicht, oder dieser IE macht einfach immer noch Scheisse!
                      Ich erstelle jetzt mal das Layout auf www.rockundpop.ch und wäre froh, wenn mir jemand sagen könnte, wie ich das hinkriege, ohne dass die Seite zu gross wird und ein Scrollbar erscheint.

                      [Edit] Der CSS Quelltext:
                      Code:
                      /* This is the layout css file for [url]www.rockundpop.ch[/url] */
                      /* Created 2003-11-13 by [email]zagibu@gmx.ch[/email] */
                      
                      body { width:100%; height:100%; margin:0px; padding:0px; font-family:Helvetica, Arial, sans-serif; font-size:11pt; background-color:silver; }
                      
                      table.layout { width:100%; height:100%; table-layout:fixed; border-collapse:collapse; }
                      td.h-block-1 { width:30px; height:100%; }
                      td.navigation { width:150px; height:100%; vertical-align:top; border-left:2px solid blue; border-right:2px solid blue; background-color:lightblue; }
                      td.content { width:auto; height:100%; border-left:2px solid blue; border-right:2px solid blue; background-color:lightblue; }
                      
                      table.navigation { width:100%; table-layout:fixed; border-collapse:collapse; }
                      td.logo { width:100%; height:150px; vertical-align:middle; text-align:center; }
                      td.link { width:100%; height:50px; vertical-align:middle; text-align:center; }
                      
                      div.logo { width:130px; height:70px; vertical-align:middle; text-align:center; border:2px solid blue; background-color: silver; }
                      div.link { width:130px; height:40px; vertical-align:middle; text-align:center; border:2px solid blue; background-color: silver; }
                      [Edit2] Unglaublich! Jetzt hab ich sogar das innere Table durch lauter div tags ersetzt, aber die Seite ist immer noch ca. 1px zu gross, so dass dieser verdammte Scrollbalken erscheint! GNAAAH!

                      [Edit3] Ok! Egal was man in die Layout Tabelle einsetzt, die Seite wird dann um ca. 1 pixel zu gross. Leer wird sie wunderbar dargestellt, aber sobald auch nur ein Buchstabe drinsteht, hab ich einen blöden Scrollbalken am Rand...
                      Zuletzt geändert von zagibu; 14.11.2003, 17:04.

                      Kommentar

                      Lädt...
                      X