Ratlos: 100% bei html

Sali

Ich habe ein riesiges Problem! Ich möchte ein Layout aufbauen, wo ein div Block ums gaze herum hat, dann über die ganze Länge (800px) einen titel. Unter dem Titel mit Float Left kommt die navigation, Links an die navi der Text bereich. Die Navi und der Textbereich sollen immer nach ganz unten gehen, egal ob man Browser vergrössert oder nicht! Ich habe dies mit 100% versucht, aber sobald der Text länger ist, als er Platz hat(habe ich mit overflow:auto; programmiert) zeigt er es einfach nicht an! Und ich weiss jetzt nicht mehr weiter! Zudem soll nicht der Browser, sondern nur die Boxen Navi und Text, fals nötig, einen Scrollbalken erstellen!

Quellcode:

<!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=iso-8859-1" />
<title>Testing something</title>
<style type="text/css">
<!--
html {
 height:100%;

}
body {
 height:100%;
 margin:0;
}
#test_table {
 margin:auto;
 height:100%;
 width:800px;
 border:0;
}
div {

}
.titel {
 height:65px;
 color:#FFFFFF;
}
.navi {
 width:160px;
 overflow:auto;
}
.hpdiv {
 height:100%;
 background-color:#FFFF00;
 margin:0;
 border:0;
 background-position:center;
 overflow:hidden;
}
.text{
 overflow:auto;
}
.tdoverflow {
 overflow:auto;
}
#table_navi {
 width:240px;
 overflow:auto;
}
#text {
 overflow:
}
-->
</style>
</head>
<body>
<div class="hpdiv">
<table id="test_table" cellpadding="0" border="0" cellspacing="0" >
 <tr height="65px">
  <td colspan="2" bgcolor="#000022"><span class="titel">Titel</span>
  </td>
 </tr>
 <tr>
  <td valign="top" width="160" bgcolor="#00CC33" class="tdoverflow"><div class="navi"><p><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin:auto; overflow:auto; width:160px;" bordercolor="#111111" width="150px;">
    <tr>
      <td background="menu_data/zeile.jpg" height="20" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/news/news.htm" style="text-decoration: none">
      <font color="#FFFFFF">News</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td background="menu_data/zeile.jpg" align="center" height="20"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/geschichte/geschichte.htm" style="text-decoration: none">
      <font color="#FFFFFF">Geschichte</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td background="menu_data/zeile.jpg" align="center" height="20"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/unihockey/unihockey.htm" style="text-decoration: none">
      <font color="#FFFFFF">Unihockey</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/termine/termine.htm" style="text-decoration: none">
      <font color="#FFFFFF">Termine</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
  <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/vorstand/vorstand.htm" style="text-decoration: none">
      <font color="#FFFFFF">Vorstand</font></a></font></b></td>
    </tr>
     <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="cgi-bin/guestbook.php" style="text-decoration: none">
      <font color="#FFFFFF">Gästebuch</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/bildergalerie/bildergalerie.htm" style="text-decoration: none">
      <font color="#FFFFFF">Fotogalerie</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/links/links.htm" style="text-decoration: none">
      <font color="#FFFFFF">Links</font></a></font></b></td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/herren/herren.htm" style="text-decoration: none">
      <font color="#FFFFFF">Herren</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/junioren_a/junioren_a.htm" style="text-decoration: none">
      <font color="#FFFFFF">A Junioren</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" href="seiten/junioren_b/junioren_b.htm" style="text-decoration: none">
      <font color="#FFFFFF">B Junioren</font></a></font></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <a style="text-decoration: none" target="main" href="seiten/junioren_c/junioren_c.htm">
      <font face="Arial" size="2" color="#FFFFFF">C Junioren</font></a></b></td>
    </tr>
    <tr>
      <td height="4"></td>
    </tr>
    <tr>
      <td height="20" background="menu_data/zeile.jpg" align="center"><b>
      <font face="Arial" size="2" color="#FFFFFF">
      <a target="main" style="text-decoration: none" href="seiten/plausch/plausch.htm">
      <font color="#FFFFFF">Unihockey-Plausch</font></a></font></b></td>
    </tr>
  </table></td>
  <td bgcolor="#CC3300"  class="tdoverflow" valign="top"><div id="text">
    <p>Test<br />
      <br />
      blablabla</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
    <p>blblbl</p>
  </div></td>
 </tr>
</table>
</div>
</body>
</html>

  1. Wenn du willst, dass gescrollt wird. Overflow:scroll; ...

    1. Wenn du willst, dass gescrollt wird. Overflow:scroll; ...

      Nun, nur leider macht er bei mir das nicht!
      Würdest du dir bitte mal den Quellcode aus dem ersten anschauen? Ich bin schon über 3 Stunden dran, um herauszufinden, an was es liegen sollte!

      mfg ratlos

      1. Wenn du willst, dass gescrollt wird. Overflow:scroll; ...

        Nun, nur leider macht er bei mir das nicht!
        Würdest du dir bitte mal den Quellcode aus dem ersten anschauen? Ich bin schon über 3 Stunden dran, um herauszufinden, an was es liegen sollte!

        mfg ratlos

        Hi,

        ja ich habs versucht aber ich blicke da nicht ganz durch. Du arbeitest mit Tabellen, dasmag ich schon gar nicht. Mir ist nicht ganz klar, was du machen willst. http://jendryschik.de/wsdev/einfuehrung/ diesen Link kann ich dir empfehlen. Da lernst du wie du das alles sauber aufbaust. Warum haste da immer overflow auto und hidden? Da liegt irgendwo das Problem. Warum soll man im Browser nicht scrollen dürfen?

        Das größe Problem der Tabellen ist die Unübersichtlichkeit. Du kannst den Quellcode um ein vielfaches kürzen mit CSS und DIv Struktur. Da kann man sich doch nicht durchwühlen. Dann sitze ich auch eine Stunde dran. In 20min kann man aber sauberen und lesbaren Code mit CSS erzeugen.

        Ciao

        1. ja ich habs versucht aber ich blicke da nicht ganz durch. Du arbeitest mit Tabellen, dasmag ich schon gar nicht. Mir ist nicht ganz klar, was du machen willst. http://jendryschik.de/wsdev/einfuehrung/ diesen Link kann ich dir empfehlen. Da lernst du wie du das alles sauber aufbaust. Warum haste da immer overflow auto und hidden? Da liegt irgendwo das Problem. Warum soll man im Browser nicht scrollen dürfen?

          Das größe Problem der Tabellen ist die Unübersichtlichkeit. Du kannst den Quellcode um ein vielfaches kürzen mit CSS und DIv Struktur. Da kann man sich doch nicht durchwühlen. Dann sitze ich auch eine Stunde dran. In 20min kann man aber sauberen und lesbaren Code mit CSS erzeugen.

          Ciao

          Also, ich muss eben für meinen verein die Seite umschreiben! Und die wollen das gleiche Design(siehe www.dragons-knonau.ch)! Ich wüsste eben nicht, wie ich das sonst hinkriegen könnte!
          Bei der angegebenen Site, musst du die Browsergrösse mal ein bisschen verändern, und die Scrollbalken ein bisschen beachten! so sollte es dann bei uns auch aussehen!

          gruss Ratlos

          1. Also, ich muss eben für meinen verein die Seite umschreiben! Und die wollen das gleiche Design(siehe www.dragons-knonau.ch)! Ich wüsste eben nicht, wie ich das sonst hinkriegen könnte!

            Schau dir den Link, da habe ich das alles gerlernt. Da du schon Kenntnisse hast, dauert das nicht lange und du kannst ordentlich CSS und XHTML hinterher. Da lernste du das alles. Das meiste habe ich auch da gelernt.

            Bei der angegebenen Site, musst du die Browsergrösse mal ein bisschen verändern, und die Scrollbalken ein bisschen beachten! so sollte es dann bei uns auch aussehen!

            Ja, ich persönlich finde das nicht gut, aber jedem das seine. Wenn du das machen musst, haste ja keine Wahl.

            Normalerweise ist das ein DIV, was du ja Text genannt hast, dem gibt man dann "overflow: scroll" und das wars. Die Balken sind dann aber immer da, was auch niht sonderlich schön ist.

            bin jetzt weg, ciao

            1. Tipp: bei overflow:auto; kommt er nur, wenn es von nöten ist! ;-)

              1. Tipp: bei overflow:auto; kommt er nur, wenn es von nöten ist! ;-)

                anscheinend nicht... :D

              2. Tipp: bei overflow:auto; kommt er nur, wenn es von nöten ist! ;-)

                .auto
                    Die Einstellung ist Browserabhängig, sollte aber scroll sein.