✔ Overflow Tabelle... gut so?

Status
Nicht offen für weitere Antworten.
Dem HTML-Dokument fehlt eine Doctype-Deklaration.

Wenn ein Doctype bestimmt wird, kann für die Tabelle das Attribut height="100%" nicht mehr verwendet werden und muss mit CSS definiert werden.

Wenn für die scrollfähige Tabellenzelle die CSS-Klasse .scroll benannt wird, dann sollte diese auch im CSS notiert werden:
Code: 
table.main 
{ 
width: 400px;
height: 100%; 
}

td.scroll
{
height: 300px;
background: #ff0000;
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
</head>

<body>
<div align="center">
  <table class="main">
    <tr>
      <td bgcolor="#FFFF00"><div align="center">Logo</div></td>
    </tr>
    <tr>
      <td class="scroll">
	    <div style="overflow: auto; height: 100%; width: 100%;">
		  <div align="center">
		  <img src="Test.jpg" width="315" height="410">
		  </div>
	    </div>
	  </td>
    </tr>
    <tr>
      <td bgcolor="#FFFF00"><div align="center">Gr&uuml;sse an alle von tutorials.de </div></td>
    </tr>
  </table>
</div>
</body>
</html>
 
Ist das mit dem Doctype so wichtig? Das lösche ich immer.

Meinst du so?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
body {
table.main 
{ 
width: 400px;
height: 100%; 
}

td.scroll
{
height: 300px;
background: #ff0000;
}
-->
</style>
</head>

<body>
<div align="center">
  <table class="main">
    <tr>
      <td bgcolor="#FFFF00"><div align="center">Logo</div></td>
    </tr>
    <tr>
      <td class="scroll">
	    <div style="overflow: auto; height: 100%; width: 100%;">
		  <div align="center">
		  <img src="Test.jpg" width="315" height="410">
		  </div>
	    </div>
	  </td>
    </tr>
    <tr>
      <td bgcolor="#FFFF00"><div align="center">Gr&uuml;sse an alle von tutorials.de </div></td>
    </tr>
  </table>
</div>
</body>
</html>

Danke schonmal.
 
In deinem zuletzt geposteten Quelltext steckt ein Fehler im StyleSheet - es fehlt die schliessende } -Klammer für den body-Selektor:

Code: 
body { }
table.main { }
Hier der valide (= gültige, regelkonforme) Quelltext für deine verlinkte Demo-Seite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<style type="text/css">
<!--
body
{
text-align: center;
}

table.main
{
margin: 0 auto;
width: 400px;
height: 100%;
border: 0;
}

td
{
background: #ffff00;
text-align: center;
}

td.scroll
{
height: 300px;
background: #ff0000;
}
-->
</style>

</head>

<body>

  <table class="main" cellspacing="0" cellpadding="0">
    <tr>
      <td>Logo</td>
    </tr>
    <tr>
      <td class="scroll">
            <div style="overflow: auto; height: 100%; width: 100%; text-align: center;">

                  <img src="Test.jpg" width="315" height="410" alt="Alternativtext">

            </div>
          </td>
    </tr>
    <tr>
      <td>Grüsse an alle von tutorials.de</td>
    </tr>
  </table>

</body>
</html>

  • Browsercheck: FireFox 1.0.2, IE 6.0, Mozilla 1.6, NN 7.0, Opera 8.01
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück