vertikal Fixed, horizontal scrollbar

thilda

Hallo zusammen,
ich suche eine Lösung für einen vertikal fixen Bereich der aber mit dem Rest der Seite bei zu kleinem Fenster horizontal mitscrollt.

Hier ein kleines Bsp:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <meta http-equiv="cache-control" content="no-cache">
      <link rel="stylesheet" href="layer.css" type="text/css" media="screen"><!--für Browser-->


   <title>Ihr Account Frau Musterman</title>
</head>


<body>


<div id="inhalt">
<div id="planeten_res_overview">
<table>
   <tr class="kategorie">
      <th>Arbeiter</th>
      <th>verfügbare Arbeitskräfte</th>
      <th>Energie</th>
      <th>Eisen</th>
      <th>Silizium</th>
      <th>Kohlenstoff</th>
      <th>Wasser</th>
      <th>Sauerstoff</th>
      <th>Wasserstoff</th>
      <th>Lagerstand</th>
   <tr>
   <tr>
      <td>30.000</td>
      <td>261</td>
      <td>35.587</td>
      <td>17.548</td>
      <td>19.824</td>
      <td>6.540</td>
      <td>654</td>
      <td>987</td>
      <td>98.785</td>
      <td>67 %</td>
   </tr>
</table>
</div>
         <div id="container">


           <div id="gebaeude_bauen">
<h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1>


<table>
   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td><span class="fehler_res">300</span></td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>
</table>
</div>
         </div>
      </div>
</body>
</html>

Alles anzeigen

Code

#inhalt {
      position: absolute;
      top: 120px;
      left: 17em;
      right: 0;
      bottom: 25px;
      overflow: auto;
      margin: 0;
      padding: 0;
   }
   #container {
      min-width: 50em;
      margin: 0;
      padding: 0px 10px 50px 10px;
   }
   #planeten_res_overview {
      background: #ccc;
      position: fixed;
      right: 1.3em;
      left: 18em;
      margin: 0;
      padding: 0.5em 0;
   }
   #gebaeude_bauen h1 { margin: 3em 0 0 0;}

Alles anzeigen

Das Div mit der id="planeten_res_overview" ist das was mir Sorgen bereitet.
Freu mich über alle Anregungen.
Danke

yeti66

Verstehe ich das richtig, das Du ein Fenster mit fester Höhe haben möchtes und einem fixen Bildhintergrund, die Tabelle aber horizontal scrollt??

thilda

Ich sag jetzt mal ja.
Wobei der Hintergrund eh erstmal egal ist...

yeti66

So etwa?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="cache-control" content="no-cache">
<!--<link rel="stylesheet" href="layer.css" type="text/css" media="screen">-->
<!--für Browser-->
<title>Ihr Account Frau Musterman</title>
<style type="text/css">
<!--
body {text-align:center;}
#inhalt {width:1000px;margin: 120px auto;}
#tabelle {height:500px;width:100%;overflow:scroll;}
h1 {margin: 1em 0 0 0;}
-->
</style>
</head>
<body>
<div id="inhalt">
  <table cellpadding="0" cellspacing="0" width="100%" >
    <tr class="kategorie">
      <th>Arbeiter</th>
      <th>verfügbare Arbeitskräfte</th>
      <th>Energie</th>
      <th>Eisen</th>
      <th>Silizium</th>
      <th>Kohlenstoff</th>
      <th>Wasser</th>
      <th>Sauerstoff</th>
      <th>Wasserstoff</th>
      <th>Lagerstand</th>
    </tr>
    <tr>
      <td>30.000</td>
      <td>261</td>
      <td>35.587</td>
      <td>17.548</td>
      <td>19.824</td>
      <td>6.540</td>
      <td>654</td>
      <td>987</td>
      <td>98.785</td>
      <td>67 %</td>
    </tr>
  </table>
  <h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1>
  <div id="tabelle">
    <table cellpadding="0" cellspacing="0"  >
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td><span class="fehler_res">300</span></td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9" class="fehler_bauauftrag"><p>Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</p></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
      <tr class="kategorie">
        <th colspan="9">Gebäude</th>
      </tr>
      <tr>
        <td>Bauzeit</td>
        <td>Bevölkerung</td>
        <td>Energie</td>
        <td>Eisen</td>
        <td>Silizium</td>
        <td>Kohlenstoff</td>
        <td>Wasser</td>
        <td>Sauerstoff</td>
        <td>Wasserstoff</td>
      </tr>
      <tr>
        <td>11:11:11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr class="bau_auftrag">
        <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

Alles anzeigen

thilda

Das sieht schonmal ganz nett aus, scheint aber nicht das zu sein was ich letztendlich verbauen kann. Ich schau es mir aber mal nochmal genauer an.

thilda

Nach längerem probieren bin ich leider nicht zum gewünschten Erfolg gekommen : (

Das Problem ist das es zuviele Scrollbalken in dem Bsp von yeti gibt.
Ansonten ist es ein superansatz, den ich aber leider nicht umsetzen kann.
Vielleicht verstehe ich ja aber nur das System nicht : (

yeti66

Zuviel Scrollbalken? Es sind zwei vertikale und je nach Fenstergröße 1-2 horizontale Scrollbalken. Wenn Du genauer beschreibst, was Du anstrebst findet sich sicher auch eine Lösung. Eine Alternative wäre ja dann nur noch eine fixe Fenstergröße und der Inhalt (die Tabelle) wird unter einem Fixen Rahmen (Header, Footer oder Maske ) darunter weggescrollt.

thilda

OK, entschhuldigung das ich mich leider etwas komisch ausgedrückt habe.
Ein neuer Versuch:

Der Bereich, soll wie im Bsp. gezeigt, auf der rechten Seite sein.
Und es befinden sich darüber ein weiterer für Werbung und Zeit, sowie darunter ein Bereich für Impressum, AGB und der gleichen.
Links ist über die ganze länge ein Menü.

Die beiden Divs, #inhalt und #container, benötige ich derzeit. Da somit ein fixer Bereich geschaffen wird. Sollte es jedoch eine weitere Möglichkeit geben, würde ich mich auch davon trennen.

Die Tabelle ganz oben soll vertikal immer fixiert sein. Horizontal jedoch soll sich mit dem Rest mitlaufen ohne einen eigenen Scrollbalken zu haben.

Der gesamte Bereich darf nur einen Scrollbalken Horizontal und einen Vertikal haben. Auch wenn das Browserfenster verkleinert wird.
----------

So, ich hoffe das nun alles abgedeckt wurde. Entschuldigung nochmals für die mangelhafe Beschreibung zuvor.
Deine Idee, Yeti66, war schonmal ein kleiner Lichtblick für mich. Nur leider hat es im nachhinein nicht den gewünschten Effekt gebracht.
Danke jedoch schonmal bis hierhin das du dich so reinkniest für mich.

Alles liebe
thilda

yeti66

Dann meinst Du sicher etwas in der Art:http://www.cssplay.co.uk/layouts/body2.html

thilda

Das Layout stimmt schonmal. Was mir aber halt das Kopfzerbrechen bereitet ist das die Tabelle wenn sie fix positioniert wird horizontal nicht mitläuft und dann inhalte bei zu kleinem Fenster verschwinden.

Da wir scheinbar anfangen etwas an einander vorbei zu reden... Hier mal das zu erschaffende Endprodukt
Klick mich

yeti66

Hmm,ok.
1.Zeile 107 fehlt ein Slash </td>
Ja ich glaube es ist erst einmal eine Frage der Kommunikation.:-D
Aber wenn Du die Tabelle fest (nicht fix sondern eine feste Breite) formatierst sollte es gehen, Tabellebreite,Spaltenbreite usw. Dann lasst sich die Tabelle horizontal und vertikal frei verschieben.

yeti66

So etwa :

HTML

.....................<table id="Tabelle2" cellpadding="0" cellspacing="0">
   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td class="spalte">Bauzeit</td>


      <td class="spalte">Bevölkerung</td>
      <td class="spalte">Energie</td>
      <td class="spalte">Eisen</td>
      <td class="spalte" >Silizium</td>
      <td class="spalte">Kohlenstoff</td>
      <td class="spalte">Wasser</td>
      <td class="spalte">Sauerstoff</td>
      <td class="spalte">Wasserstoff</td>
   </tr>................................
/*der Beispielcode CSS*/
#Tabelle2{ width:900px;}
#Tabelle2 .spalte{ width:200px;}

Alles anzeigen

So bekommst Du eine Tabelle mit fest formatierten Größen die Du dann wie ein Blatt im Fenster (id="planeten_res_overview") hin und her schieben kannst.

thilda

Aber wie bekomme ich sie vertikal fixiert... das habe ich jetzt aus deiner Beschreibung nicht ganz verstanden.

yeti66

Höhe der Spalte? {line-height: 40px;}

Schau mal hier: http://www.thestyleworks.de/basics/tables.shtml
. Der Mann hat sich viel Mühe gegeben.

thilda

Da wir leider immer noch etwas an ein ander vorbeireden hier mal ein Bsp was ich, durch neue Denkanstöße durch dich, gefunden habe.

fixer Tabellenkopf

Auf der Seite sagt mir Methode#1 sehr zu. Nur leider habe ich es nooch nicht hinbekomme das ganze für mich umzuschreiben.

yeti66

Ahh, jetzt verstehe ich. Ja so ist das mit der Kommunikation. Heute Abend schaue ich es mir mal an und setze es um:D.

yeti66

So ich habe den Entwurf mal auf Deine Seite hin adaptiert und auf das wesentliche gekürzt. Die Tabelle selbst ist vollständig außer Deine Klassen.Die mußt Du nochmal einpflegen.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ background-color:#CCC;}
.outer {position:relative;padding:4em 0 3em 0;width:54em;background: #CCC;margin:0 auto 3em auto;}
.innera {overflow:auto;width:54em;height:40em;background:#CCC;}
.outer table caption {position:absolute;width:53em;text-align:center;top:0;left:0;height:1.5em;background:#697210;border:0.1em solid #fff;color:#fff;}
.outer thead tr {position:absolute;top:1.5em;height:1.5em;left:0;width:53em}
.outer tfoot td {position:absolute;width:51.5em;text-align:center;background:#f0c992;border:0.1em solid #000;color:#000;bottom:0;left:0;}
.outer th, .outer td {width:10em;text-align: center;}
.outer th, .braun{background:#724a10;color:#fff;}
.outer .dk {background:#fff;}
.green {background:#697210;color:#fff;}
-->
</style>
</head>
<body>
   <div class="outer">
  <div class="innera">
    <table>
      <caption>
      Gebäude errichten auf Planet &quot;Kolonie 1&quot; (555:555:A)
      </caption>
      <thead>
        <tr>
          <th scope="col">Bauzeit</th>
          <th scope="col">Bevölkerung</th>
          <th scope="col">Energie</th>
          <th scope="col">Eisen</th>
          <th scope="col">Silizium</th>
          <th scope="col">Kohlenstoff</th>
          <th scope="col">Wasser</th>
          <th scope="col">Sauerstoff</th>
          <th scope="col">Wasserstoff</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="5">Tabellefooter</td>
        </tr>
      </tfoot>
      <tbody>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr>
          <td>11:11:11</td>
          <td><span class="fehler_res">300</span></td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td>
        </tr>
        <tr>
          <td colspan="9" class="green" >Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr>
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
        <tr>
          <td colspan="9" class="green">Gebäude</td>
        </tr>
        <tr class="braun">
          <td>Bauzeit</td>
          <td>Bevölkerung</td>
          <td>Energie</td>
          <td>Eisen</td>
          <td>Silizium</td>
          <td>Kohlenstoff</td>
          <td>Wasser</td>
          <td>Sauerstoff</td>
          <td>Wasserstoff</td>
        </tr>
        <tr class="dk">
          <td>11:11:11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
          <td>11</td>
        </tr>
        <tr class="bau_auftrag">
          <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</body>
</html>

Alles anzeigen

thilda

Ich habe mich auch heute nochmal probiert nur komme ich an ein paar stellen nicht mehr weiter...

Hier erstmal der Code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <meta http-equiv="cache-control" content="no-cache">
      <link rel="stylesheet" href="layer.css" type="text/css" media="screen"><!--für Browser-->


   <title>Ihr Account Frau Musterman</title>


<style type="text/css">
<!--
   body {
      background: #eee url(img/menu.png) no-repeat fixed 5px -230px;/*url(img/all.png)*/
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica;
      font-size: 12px;
      color: #000;
      overflow: hidden;
   }
table tr td { text-align: center;}
#inhalt {
      border: 1px solid red;
      position: absolute;
      top: 120px;
      left: 17em;
      right: 0;
      bottom: 25px;
      margin: 0;
      padding: 0;
      overflow: hidden;
   }
   #container {
   border: 2px solid green;
      width: 100%;
   height: 70%;
      margin: 5em 0 0 0;
      padding: 0;
      overflow: auto;
   }
   #gebaeude_bauen {
   border: 2px solid orange;
      background: #ccc;
      min-width: 50em;
      margin: 0;
      padding: 0 0 3em 0;
   }
   table.blub {
   border: 1px solid yellow;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 5em;
      margin: 0;
      padding: 0;
   }
   #xgebaeude_bauen h1 { margin: 3em 0 0 0;}
-->
</style>
</head>
<body>
<div id="inhalt">
<div id="container">
<table class="blub">
<thead>
   <tr class="kategorie">
      <th>Arbeiter</th>
      <th>verfügbare Arbeitskräfte</th>
      <th>Energie</th>
      <th>Eisen</th>
      <th>Silizium</th>
      <th>Kohlenstoff</th>
      <th>Wasser</th>
      <th>Sauerstoff</th>
      <th>Wasserstoff</th>
      <th>Lagerstand</th>
   <tr>
   <tr>
      <td>30.000</td>
      <td>261</td>
      <td>35.587</td>
      <td>17.548</td>
      <td>19.824</td>
      <td>6.540</td>
      <td>654</td>
      <td>987</td>
      <td>98.785</td>
      <td>67 %</td>
   </tr>
</thead>
</table>
<div id="gebaeude_bauen">
<table>
<tr>
<td colspan="9"><h1>Gebäude errichten auf Planet "Kolonie 1" (555:555:A)</h1></td>
</tr>
   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td><span class="fehler_res">300</span></td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9" class="fehler_bauauftrag">Sie haben leider nicht genügend Rohstoffe um dieses Gebäude auszubauen.</td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9" class="fehler_bauauftrag">Sie können dieses Gebäude nicht ausbauen, da Sie nach dem Ausbau nicht mehr ausreichend Energie für ein Wohngebäude und nicht mehr ausreichend freie Bevölkerung für einen Solarpark haben.</td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


   <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>


      <tr class="kategorie">
      <th colspan="9">Gebäude</th>
   </tr>
   <tr>
      <td>Bauzeit</td>
      <td>Bevölkerung</td>
      <td>Energie</td>
      <td>Eisen</td>
      <td>Silizium</td>
      <td>Kohlenstoff</td>
      <td>Wasser</td>
      <td>Sauerstoff</td>
      <td>Wasserstoff</td>
   </tr>
   <tr>
      <td>11:11:11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
   </tr>
   <tr class="bau_auftrag">
      <td colspan="9"><a href="" title="">Ausbauen auf Stufe X</a></td>
   </tr>
</table>
</div>
         </div>
      </div>
</body>
</html>

Alles anzeigen

Jetzt kurz meine Problembeschreibung:
- Dem äußersten Container (#inhalt) habe ich ein overlfow: hidden; verpasst damit alles nur in diesem Bereich bleibt. jedoch verhindert das das scrollen der "festen" tabelle.
- die höhenzuordnung für den 2. container (#container) kann ich nicht richtig wählen. wenn ich den Wert auf 100% setze wird der Scrollbalken bei zu kleinem Fenster abgeschnitten und eine andere Angabe in px, em, pkt... ist nicht wirklich möglich da das div (#inhalt) sich an der fenstergröße orientiert.
---------------

Soviel erstmal zu meinen Problemen. Ich schau mir mal noch an was du mir schönes gezaubert hast yeti66.

yeti66

Du wirst schon mit einer festen #inhalt/Tabellenhöhe vorlieb nehmen müssen. Sonst wird das nichts. Der Browser brauch einen festen Wert zum rechnen. Einzige Möglichkeit wäre die Höhe des Fensters mit JS auszuloten und den Wert an #inhalt zu übergeben.

thilda

Nun kann ich aber nicht darauf vertrauen ads jeder User JS an hat...
gibt es denn keine andere möglichkeit.
Ich habe schon versucht das ganze mal über position zu klären aber irgendwie zerschießt er mir dann das Layout, warum nur?

vertikal Fixed, horizontal scrollbar

Tags

Benutzer online in diesem Thema