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

100% funktioniert, aber overflow:auto; nicht!

Status
Für weitere Antworten geschlossen.
D

disler

Neues Mitglied
Ich habe ein Problem. Der Browser zeigt mir auf den ersten Blick alles richtig an. Nun soll aber der rote und Grüne Kasten ein overflow:auto; erhalten! Der ganze body aber ein overflow:hidden!

Nun macht er dies bei mir aber nicht! Kann mir jemand sagen weshalb?

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

}
body {
    height:100%;
    margin:0;
}
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 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;" 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>

//Edit!

Ich weiss, es hat no ein paar Fehler drin laut HTML Validator, aber an denen liegt es nicht!
 
emmm, das ist das wichtigste! Das sind nur die die Blöcke, und ein klein wenig navi und ein bisschen inhalt zum sehen wegen den scroller, das gibt eben leider schon so viel!
 
habe hier eine kleinere Version, die genau gleich funktionieren sollte! Sind nur umgerechnet ca. 25 zeilen!
Das Hauptdesing, wie es am schluss aussehen sollte siehst du bei Dragons Knonau wobei bei meiner Testseite die Navi grün, der Textbereich blau und der titel Rot ist!
Scrollbalken wie schon gesagt nur bei navi und text, beim Browser selebr hidden!
Danke dir, das du es dir anschausst!

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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html{
    height:100%;
}
body{
    height:100%;
}
-->
</style>
</head>

<body style="margin:auto; background-position:center; background-color:#FFFF00; overflow:hidden">
    <div style="margin:auto; width:800px; height:715px; overflow:hidden; background-color:#FFFF00;">
        <div style="height:65px; width:800px; background-color:#FF0000;">TITEL</div>
        <div style="float:left; width:160px; background-color:#00FF00; height:100%; overflow:auto;">NAVIGATION</div>
        <div style="float:left; background-color:#0000FF; width:640px; height:100%; overflow:auto;">TEST<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test</div>
    </div>
</body>
</html>

Gruss disler
 
Vor ein paar Tagen wurde hier schon mal ähnliches gefragt.
Zu dem Zweck hatte ich ein Beispiel getippt:
css Frame
Vielleicht kannst du damit ja schon mal was anfangen.
Ich hab das mit position : fixed gelöst.
Die Internet Explorer können damit jedoch nicht umgehen. Deshalb gibt es eine
extrawurst.css mit position : absolute und height: expression()

Nachtrag:
Ich hab ein Muster wie du es beschrieben hast hochgeladen.
Auch hier waren wieder 2 css Dateien nötig.
Für den IE5 mac müsstest du noch eine 3. css schreiben
Für Schriften und sowas eine 4. Datei.
Dann funktioniert es in allen Internet Exploren (Win) auch nur mit aktivierten javascript.
Frameklassiker in css
Wenn du eine bessere Lösung finden solltest würde ich mich freuen wenn du sie hier mal vorstellst.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben