• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

dynamische tabellen.

Status
Für weitere Antworten geschlossen.
S

sw0ce

Neues Mitglied
Hi zsammen.

Ich habe folgendes Problem und als Anfänger weiß ich nicht wie ich das realisieren soll.

Ich würde gerne mein gesamtes Design aus drei Großen Tabellen aufbauen.
Eine Tabelle für den Banner, eine für den Body und eine letzte für copyright usw. Die ersten beiden Tabellen sollen nun eine fixe Größe haben. die letzte Tabelle soll sich allerdings imm der jeweiligen Fenstergröße bzw. Auflösung anpassen.

Ich bekomme das einfach nicht hin

Hier ein Codebeispiel:

HTML: 
<html>
<head>
</head>
<body>
  <table name="banner" width="100%" height="200">
    <tr>
      <td>
      <td>
    </tr>
  </table>
  <table name="body" width="100%" height="300">
    <tr>
      <td>
      <td>
    </tr>
  </table>
  <table name="bottom" width="100% height="100%">
    <tr>
      <td>
      <td>
    </tr>
  </table>
</body>
</html>

Vielen Dank schonmal für eure Hilfe

Mfg sw0ce
 
Keine Ahnung ob es sinnvoll ist, aber meinst du sowas:

HTML: 
<html>
<head>
</head>
<body>
  <table style="background-color:#000;" name="banner" width="100%" height="20%">
    <tr>
      <td>
      <td>
    </tr>
  </table>
  <table style="background-color:#fff;" name="body" width="100%" height="30%">
    <tr>
      <td>
      <td>
    </tr>
  </table>
  <table style="background-color:green; height:50%!important;" name="bottom" width="100%>
    <tr>
      <td>
      <td>
    </tr>
  </table>
</body>
</html>
 
Nicht ganz.

In diesem Fall würde sich die größe der ersten beiden tabellen je nach Auflösung auch verändern. Diese Tabellen sollen aber eine fixe Größe haben. nur die letzte Tabelle soll immer mit dem unteren Rand abschließen.
Die unterste Tabelle ist also so etwas wie ein Lückenfüller.
 
Ahso, ich vermute mal, das dies nur über eine JavaScript Lösung
machbar sein wird. Denn wenn man es so versucht, wäre der untere
Bereich 100% + deine 500px. D.h. also, du müsstest über eine JS Funktion
den passenden Wert errechnen, und danach über
document.getElementById("bottom").style.height = neuerWert;
den Wert einsetzen. Irgendwo habe ich dafür schonmal eine Lösung gehabt,
ich suche mal. Falls es noch einen anderen Weg gibt, weiss ich ihn nicht :>
 
vielen dank für deine hilfe... jetzt weiß ich wenigstens das es mit html nicht geht :). Fals du die Lösung noch findest währe es echt nett sie hier zu posten.
Danke nochmal
 
So habs.
HTML: 
<html>
<head>
<script>
function windowHeight() {
        var windowHeightY;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) // all but Explorer Mac
      {
        windowHeightY = document.body.scrollHeight;
      }
      else // Explorer Mac;
           //would also work in Explorer 6 Strict, Mozilla and Safari
      {
        windowHeightY = document.body.offsetHeight;
      } 
      document.getElementById("bottom").style.height = (windowHeightY - 500)+ "px";    
}
</script>
<style>
  *
  { 
    margin:0px; padding:0px; 
  }
  
</style>
</head>
<body onload="windowHeight()">
  <div style="background-color:#000; height:200px;" name="banner" width="100%">
    jo
  </div>
  <div style="background-color:#fff; height:300px;" name="body" width="100%">
    jo
  </div>
  <div style="background-color:green;" id="bottom" width="100%">
    jo
  </div>
</body>
</html>
Der CSS Kram ist dafür da, um die Abstände die per default gewählt werden,
auf 0 zu setzen, damit die Werte auch stimmen.
Mmh ich sehe gerade, war etwas voreilig, natürlich passt sich der Bereich der Größe nur
beim Laden der Seite an, nicht wenn man den Browser vergrößert/verkleinert. Aber dafür
eine Lösung zu schreiben würde den Rahmen glaube ich sprengen ^^

Grüße prosta
 
Zuletzt bearbeitet:
Auf JavaScript kann man an der Stelle verzichten wenn man dem Body den Hintergrund gibt den der untere Abschnitt erhalten soll. Also so:

Code: 
[B]<html>[/B]
[B]<head>[/B][B]<style>[/B]
* [B]{[/B] [B]margin:[/B][COLOR=#800000]0px[/COLOR][B];[/B] [B]padding:[/B][COLOR=#800000]0px[/COLOR][B];[/B] [B]}[/B]
body [B]{[/B] [B]background-color:[/B][COLOR=#800000]green[/COLOR][B];[/B] [B]}[/B] 
[B]</style>[/B][B]
</head>
[/B][B]<body>[/B][B]
<div[/B][COLOR=#008000] style=[/COLOR][COLOR=#aa0000]"background-color:#000; height:200px;width: 100%;"[/COLOR][COLOR=#008000] name=[/COLOR][COLOR=#aa0000]"banner"[/COLOR][B]>[/B]
jo
[B]</div>[/B]
[B]<div[/B][COLOR=#008000] style=[/COLOR][COLOR=#aa0000]"background-color:#fff; height:300px;width: 100%"[/COLOR][COLOR=#008000] name=[/COLOR][COLOR=#aa0000]"body"[/COLOR][B]>[/B]
jo
[B]</div>[/B]
[B]<div[/B][COLOR=#008000] style=[/COLOR][COLOR=#aa0000]"background-color:green;"[/COLOR][COLOR=#008000] id=[/COLOR][COLOR=#aa0000]"bottom"[/COLOR][B]>[/B]
jo
[B]</div>[/B]
[B]</body>[/B][B]</html>[/B]
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben