Dee: scrollbalken verschiebt inhalt

Hallo da draussen,

ich bastel hier an einer Seite auf Tabellen Basis.
Der obere Bereich (Menü und Claim) soll eine Feste Höhe (232px) und Breite (951px) haben.
Der untere Bereich soll eine 100% Höhe und eine Breite von ebenfalls (951px) haben und bei viel Inhalt scrollen.

Ich habe das bisher so umgesetz:

########################################
<body>
<table id="center">
  <tr>
    <td id="center_main">
 <table id="main">
   <tr>
     <td id="main_top">
    <div id="top">oben</div>
  </td>
   </tr>
   <tr>
     <td id="main_bottom">
    <div id="scroll">
      <div id="bottom">unten</div>
    </div>
  </td>
   </tr>
 </table>
 </td>
  </tr>
</table>
</body>

/*--------TABLEs-----------*/

table#center {
 width: 100%;
 height: 100%;
 }

table#main {
 width: 100%;
 height: 100%;
 text-align: left;
 }

/*------------TDs------------*/

td#center_main {
 width: 100%;
 height: 100%;
 text-align: center;
 vertical-align: middle;
 }

td#main_top {
 width: 100%;
 height: 232px;
 vertical-align: top;
 text-align: center;
 }

td#main_bottom {
 width: 100%;
 height: 100%;
 text-align: left;
 }

/*--------------DIVs------------*/

div#top {
 width: 951px;
 height: 201px;
 }

div#scroll {
 width: 100%;
 height: 100%;
 overflow: scroll;
 margin: auto;
 text-align: center;
 }

div#bottom {
 width: 951px;
 height: 100%;
 }

#########################################

Nun verschiebt aber der Scrollbalken die untere Tabelle um einige Pixel nach links und das design(habe ich der Übersichtlichkeit wegen entfernt) wird zerissen.

Nun könnte ich den scrollbalken über overflow: scroll; immer erzwingen und mein div mit einem padding-left versehen um den Abstand wieder auszugleichen. Aber dann habe ich nicht nur einen scrollbalken rechts, sonder auch unten.

Weiß hierzu jemand Rat?! Oder sollte ich den gesamten Seiten aufbau anders angehen?!

Für hilfe waäre ich dankbar....

Gruß

Dee

  1. Hello out there!

    width: 951px;
    Oder sollte ich den gesamten Seiten aufbau anders angehen?!

    Ja, denn bei etlichen Nutzern ist der Viewport schmaler als 951 Pixel; und horizontales Hin- und Herscrollen ist verständlicherweise sehr unbeliebt.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hello out there!

      width: 951px;
      Oder sollte ich den gesamten Seiten aufbau anders angehen?!

      Ja, denn bei etlichen Nutzern ist der Viewport schmaler als 951 Pixel; und horizontales Hin- und Herscrollen ist verständlicherweise sehr unbeliebt.

      See ya up the road,
      Gunnar

      Hallo Gunnar,

      ok, also das sehe ich ein. (ich werde diese Breiten angaben zwar beibehalten müssen [Kunde ist König], aber um hier niemanden zu verwirren , setze ich die Breite mal auf 600px)

      Damit habe ich aber immer noch die verschiebung des untern divs um ca. 8px...

      ##############################################

      /*--------TABLEs-----------*/

      table#center {
       width: 100%;
       height: 100%;
       }

      table#main {
       width: 100%;
       height: 100%;
       text-align: left;
       }

      /*------------TDs------------*/

      td#center_main {
       width: 100%;
       height: 100%;
       text-align: center;
       vertical-align: middle;
       }

      td#main_top {
       width: 100%;
       height: 232px;
       vertical-align: top;
       text-align: center;
       }

      td#main_bottom {
       width: 100%;
       height: 100%;
       text-align: left;
       }

      /*--------------DIVs------------*/

      div#top {
       width: 600px;
       height: 201px;
       }

      div#scroll {
       width: 100%;
       height: 100%;
       overflow: scroll;
       margin: auto;
       text-align: center;
       }

      div#bottom {
       width: 600px;
       height: 100%;
       }

      <body>
      <table id="center">
        <tr>
          <td id="center_main">
       <table id="main">
         <tr>
           <td id="main_top">
          <div id="top">oben</div>
        </td>
         </tr>
         <tr>
           <td id="main_bottom">
          <div id="scroll">
            <div id="bottom">unten</div>
          </div>
        </td>
         </tr>
       </table>
       </td>
        </tr>
      </table>
      </body>

      ###########################################

      Gruß Dee

      1. Hello out there!

        ich werde diese Breiten angaben zwar beibehalten müssen

        Warum kein flexibles Layout? Die <http://de.selfhtml.org/css/layouts/index.htm@title=CSS-basierten Layouts> in SELFHTML geben Anregungen ...

        [Kunde ist König]

        Eben. Und zwar nicht DEIN Kunde, sondern DESSEN Kunden, also die Nutzer von dessen Website. Das solltest du versuchen, deinem Kunden klarzumachen.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hello out there!

          ich werde diese Breiten angaben zwar beibehalten müssen

          Warum kein flexibles Layout? Die <http://de.selfhtml.org/css/layouts/index.htm@title=CSS-basierten Layouts> in SELFHTML geben Anregungen ...

          [Kunde ist König]

          Eben. Und zwar nicht DEIN Kunde, sondern DESSEN Kunden, also die Nutzer von dessen Website. Das solltest du versuchen, deinem Kunden klarzumachen.

          See ya up the road,
          Gunnar

          Ok Danke,

          ich wollte eigentlich keien Grundsatzdiskussion über Kunden vom Zaun brechen, sonder Hilfe bei meinen CSS Problem...

          Deine Antwort (so wie ich sie interpretiere): 'Fang noch mal von vorne an', werde ich nun beherzigen.

          Ich versuchs nochmal mi DIVs!

          Gruß Dee

          1. Hello out there!

            Deine Antwort (so wie ich sie interpretiere): 'Fang noch mal von vorne an', werde ich nun beherzigen.

            Ich wollte eigentlich nur anmerken, auf Breitenangaben in Pixel zu verzichten. Aber table für Layoutzwecke muss wirklich nicht sein.

            Ich versuchs nochmal mi DIVs!

            Nur soviele wie nötig, so wenig wie möglich.

            Also nur dort, wo sie zur Gruppierung anderer Elemente sinnvoll sind; ansonsten verwendest du die HTML-Elemente zur Auszeichnung, deren Semantik für den jeweiligen Dokumentabschnitt passt.

            Pass auf, dass du dich nicht mit Divitis infizierst!

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
            1. Hallo Gunnar,

              Ich wollte eigentlich nur anmerken, auf Breitenangaben in Pixel zu verzichten. Aber table für Layoutzwecke muss wirklich nicht sein.

              es müssen manchmal aber feste Breitenangaben sein!
              Und das mit den Tables für Layout Zwecke weiss ich, ist hässlich...

              !! Ich habe nur bisher noch kein Möglichkeit gefunden, 2DIVs zu definieren (ein DIV oben feste Höhenangabe /*--wichtig!--*/, ein DIV unten, das den Rest der Seite ausfüllt) !!

              Wenn Du da einen Lösungsansatz für mich hast, bin ich sehr dankbar!

              Gruß Dee

              1. Hello out there!

                es müssen manchmal aber feste Breitenangaben sein!

                Das wage ich zu bezweifeln.

                Du kannst aber gerne versuchen, meine Zeifel mit einem Beispiel auszuräumen.

                !! Ich habe nur bisher noch kein Möglichkeit gefunden, 2DIVs zu definieren (ein DIV oben feste Höhenangabe /*--wichtig!--*/, ein DIV unten, das den Rest der Seite ausfüllt) !!

                Wozu brauchst du letzteres?

                See ya up the road,
                Gunnar

                --
                “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                1. Hello out there!

                  es müssen manchmal aber feste Breitenangaben sein!

                  Das wage ich zu bezweifeln.

                  Du kannst aber gerne versuchen, meine Zeifel mit einem Beispiel auszuräumen.

                  ich weiss ja, das Ihr Programmierer einem schicken Quellcode immer den Vorzug lasst, aber wenn ich ein .psd Design vorgesetzt bekomme, das ich eins zu eins umzusetzen habe, muss ich mich fügen, oder meinen Arbeitsplatz für jemand räumen der das kann!!!!!!!!!!!!

                  !! Ich habe nur bisher noch kein Möglichkeit gefunden, 2DIVs zu definieren (ein DIV oben feste Höhenangabe /*--wichtig!--*/, ein DIV unten, das den Rest der Seite ausfüllt) !!

                  Wozu brauchst du letzteres?

                  mit einem Beispiel, oder der Antwort: 'das geht nicht' wäre mir bestimmt mehr geholfen!

                  1. Hello out there!

                    aber wenn ich ein .psd Design vorgesetzt bekomme, das ich eins zu eins umzusetzen habe,

                    Aua!! Immer diese Werbefuzzis, die immer noch nicht begriffen haben, dass Webdesign kein Printdesign ist! Die sollten weiter ihre tollen Hochglanzprospekte erstellen, aber von Dingen, von denen sie keine Ahnung haben (also vom Webdesign) die Finger lassen! Warum können Werbeagenturen keine guten WWW-Seiten schreiben?

                    muss ich mich fügen, oder meinen Arbeitsplatz für jemand räumen der das kann!!!!!!!!!!!!

                    Wenn du es schaffst, auf der Grundlage des grafischen Entwurfs ein flexibles Layout zu erstellen, dann bist du goldrichtig auf diesem Platz!

                    !! Ich habe nur bisher noch kein Möglichkeit gefunden, 2DIVs zu definieren (ein DIV oben feste Höhenangabe /*--wichtig!--*/, ein DIV unten, das den Rest der Seite ausfüllt) !!

                    Wozu brauchst du letzteres?

                    mit einem Beispiel, oder der Antwort: 'das geht nicht' wäre mir bestimmt mehr geholfen!

                    Mit der Überlegung, ob du das wirklich brauchst, um den beabsichtigten Effekt zu erzielen, eventuell noch mehr. Deshalb meine Nachfrage.

                    See ya up the road,
                    Gunnar

                    --
                    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
                    1. Hello out there zurück,

                      ich habe die Lösung: und die war (wie immer) ganz einfach.

                      Der Hinweis der mir gefehlt hat:

                      keine 100% Höhenangabe für das untere Div, sonder

                      keine Höhenangabe, dafür aber entsprechende top: und bottom: Angaben.

                      Selbstverständlich muss man sich noch einige workaraunds für den IE einfallen lassen...

                      also es geht doch!

                      Gruß Dee

                      1. Hallo,

                        ich habe die Lösung: und die war (wie immer) ganz einfach.

                        keine 100% Höhenangabe für das untere Div, sonder
                        keine Höhenangabe, dafür aber entsprechende top: und bottom: Angaben.
                        also es geht doch!

                        natürlich geht es - aber ich verstehe immer noch nicht, wozu du da noch ein div haben willst. Nach deinen bisherigen Ausführungen erscheint es mir sinnfrei. Würdest du es weglassen, dann hättest du auch nicht das Problem mit der verzwickten Größenangabe.
                        Merke: Der größte Teil der tatsächlich eingesetzten div-Elemente ist bei genauerer Betrachtung überflüssig. Zu oft wird übersehen, dass man jedes andere, ohnehin vorhandene Element genausogut formatieren und positionieren kann, sei es ein p, ein ul, ein img, oder gar das body-Element selbst.

                        So long,
                         Martin

                        --
                        Lieber Blödeleien als blöde Laien.