Franz: Tabelle in die Mitte

Hi!

Ich habe mir eine Website erstellt, ähnlich dem Muster von
http://www.pixy.cz/blogg/clanky/css-3col-layout/

Nun möchte ich eine Tabelle in die Mitte bauen ("Middle Col"), die so breit ist, dass sie die Mitte vollständig füllt. (nur von der Breite her)

Was muss ich da bei width in die Tabelle eintragen? Vielleicht muss man auch andere CSS-Angaben mit margin oder padding machen?

Franz

  1. Hallo,

    Was muss ich da bei width in die Tabelle eintragen? Vielleicht muss man auch andere CSS-Angaben mit margin oder padding machen?

    margin: 0;
    padding: 0;
    width: 100%;

    Gruß,
    KonRad -

    --
    "Was Gott zusammengeführt hat ..." :: polithink.org -
    the politicultural e-zine :: http://www.polithink.org
    1. Hi Konrad!

      War ja gut gedacht - klappt aber nicht. wenn ich width:100% eintrage, wird die Tabelle so groß wie das Browserfenster, z.B. 760 px, das Fenster scollt dann auch vertikal. Das soll aber nicht so sein, sondern die Tabelle soll nur so breit wie die mittlere Spalte sein.

      Hat noch jemand eine Idee?

      Franz

      1. Hi franz,

        Hat noch jemand eine Idee?

        ja ich: 95% und mittig ausgerichtet !

        dein Weihnachtsmann

        1. Hat noch jemand eine Idee?
          ja ich: 95% und mittig ausgerichtet !

          Die Idee ist zwar schon besser, richtig gut aber noch nicht :-( Denn 95% sind bei 15 Zoll ja weniger als bei 21 Zoll. Das muss jetzt noch behoben werden.

          Giobt es vielleicht einen Trick?

          Franz

          1. Hat noch jemand eine Idee?
            ja ich: 95% und mittig ausgerichtet !

            Die Idee ist zwar schon besser, richtig gut aber noch nicht :-( Denn 95% sind bei 15 Zoll ja weniger als bei 21 Zoll. Das muss jetzt noch behoben werden.

            hmm, ich möchte ja nicht meckern ... aber ich hatte recht: es gehört width: 100%!

            Bei mir klappt das auch...

            Gruß,
            KonRad -

            --
            "Was Gott zusammengeführt hat ..." :: polithink.org -
            the politicultural e-zine :: http://www.polithink.org
            1. hmm, ich möchte ja nicht meckern ... aber ich hatte recht: es gehört width: 100%!

              Bei mir klappt das auch...

              Gruß,
              KonRad -

              Ja, es gehört width: 100%!

              Klappt bei mir auch.

              Du musst es aber zwingend mit CSS definieren, wenn du es mit HTML definierst kann das nicht passen.

              1. Danke erstmal an alle!

                Ich hab es jetzt mal mit anderen Browsern probiert (Mozilla, Firebird, Opera) und dort klappt es wunderbar mit width:100%. Nur der Internet Explorer 6 + SP1 will es icht so recht schlucken.

                Ihr KonRad und Badman, schreibt, dass es bei euch klappt. Darf ich fragen, welchen Browser ihr verwendet?

                Gibt es einen Trick, dass es beim IE funktioniert?

                Mfg.

                Franz

                1. Ihr KonRad und Badman, schreibt, dass es bei euch klappt. Darf ich fragen, welchen Browser ihr verwendet?

                  Moz:FiBi 0.7, aber im MSIE geht es auch.

                  Allerdings verwende ich folgende leicht vereinfachte Version:

                  \\ <?xml version="1.0" encoding="UTF-8"?>

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

                  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
                      <head>
                          <title>Test</title>

                  <style type="text/css">
                              div
                              {
                                  border: 1px solid;
                                  border: none;
                              }

                  .clearer
                              {
                                  border: none;
                                  clear: both;
                                  height: 1px;
                                  visible: hidden;
                              }

                  #left
                              {
                                  float: left;
                                  width : 15%;
                              }

                  #centre
                              {
                                  float: left;
                                  width: 70%
                              }

                  #centre table
                              {
                                  border: 1px solid;
                                  width: 100%;
                              }

                  #right
                              {
                                  float: right;
                                  width: 15%;
                              }
                          </style>
                      </head>

                  <body>
                          <h1>Test</h1>
                          <div id="top">
                              Top top top top top top top top top top top top top top top top
                          </div>
                          <div id="left">
                              Left left left left left left left left left left left left left
                          </div>
                          <div id="centre">
                              Centre centre centre centre centre centre centre centre centre
                              <table>
                                  <tbody>
                                      <tr>
                                          <td>foo</td>
                                          <td>bar</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                          <div id="right">
                              Right right right right right right right right right right right
                          </div>
                          <div class="clearer"> </div>
                          <div id="bottom">
                              Bottom bottom bottom bottom bottom bottom bottom bottom bottom
                          </div>
                      </body>
                  </html>
                  ///

                  sieht besch*ssen aus, klappt aber und kann durch fesches CSS ja angepaßt werden.

                  Gruß,
                  KonRad -

                  --
                  "Was Gott zusammengeführt hat ..." :: polithink.org -
                  the politicultural e-zine :: http://www.polithink.org
                  1. ...womit wir immer noch nicht weiter wären.
                    Also nochmal mit URLs:

                    Schau dir mal diese Seite mit einem IE und einem Mozilla an (falls du solche Browser hast):
                    http://rademaj.ratsgymnasium-pe.de/franz1/index.html
                    Du wirst sehen, dass im IE die Tabelle nach unten verschoben ist und im Mozilla ist alles so wie es sein soll. Die Tabelle ist so breit wie die mittlere Spalte.

                    Zu der Seite gehört diese CSS-Datei:
                    http://rademaj.ratsgymnasium-pe.de/franz1/css.html
                    Dies ist übrigens eine Kopie der richtigen CSS-Datei. Ich habe eine HTML davon gemacht, damit du sie im Browser anschauen kannst.

                    Die Links in der Datei funktionieren übrigens nicht, da die Seite alleine hochgeladen ist.

                    Franz

                    1. Hi,

                      http://rademaj.ratsgymnasium-pe.de/franz1/index.html
                      Du wirst sehen, dass im IE die Tabelle nach unten verschoben ist und im Mozilla ist alles so wie es sein soll. Die Tabelle ist so breit wie die mittlere Spalte.

                      bei mir nicht. Sowohl IE als auch Mozilla hängen rechts neben die Seite einen gelben Block an (der wohl rechts unter die Heftübersicht soll).

                      Dies ist übrigens eine Kopie der richtigen CSS-Datei. Ich habe eine HTML davon gemacht, damit du sie im Browser anschauen kannst.

                      Nett gemeint, aber nicht wirklich nötig...

                      Da Du ohnehin übermäßig viele Tabellen einsetzt, würde ich Dir raten, _eine_ große Layouttabelle mit drei Spalten zu machen. Oder setze konsequent auf CSS und verzichte ganz auf die Tabellen - nötig sind die hier nicht.

                      freundliche Grüße
                      Ingo