nicht angemeldet
Tabellenzelle mit relativer groesse UND overflow:scroll?
Hi, mit dem folgenden Code versuche ich es hinzubekommen, dass in der Zelle 'Inahlt' nur innerhalb der Zelle irgendwas angezeigt wird, ohne, dass sich die Zelle vergroessert - weswegen ich zu overflow zurueckgreifen wollte.
Da dies aber anscheinend nicht mit relativen groessenangaben arbeiten kann brauchte ich einen kniff den ich hier irgendwo im forum gefunden habe - der aber auch nicht klappt..
hat jemand eine Idee, wie man das ganze fixt bzw realisieren kann?
Es geht eben darum das Hintegrgrundbild zu nehmen und nur in dem in der mitte abgesteckten stueck inhalt darzustellen.. (drum die tables bei mir)
Falls wer eine sinvollere loesung als Tables hat waer ich auch gluecklich..
Danke schonmal
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; }
#scr {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
overflow:scroll;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>
<body>
<div id="bg"><img src="http://img521.imageshack.us/img521/545/backgroundza2.jpg" width="100%" height="100%" alt=""></div>
<div id="content">
<table border="0" width="100%" height="100%" cellpadding="5">
<tr height="18%">
<td colspan = "3" width="100%" valign="top" align="center"> <font color="#C0C0C0"> </font></td>
<tr height="62%">
<td width="28%" valign="center"> <font color="#C0C0C0"> NAVI </font> </td>
<td valign="top">
<div style="position:relative;height:100%;">
<div id="scr">
<font color="#C0C0C0"> INHALT
</div></div>
</td>
<td width="28%"></td>
<tr height="15%">
<td colspan = "3" width="100%" align="center">
<font color="#C0C0C0"> FOOT </font>
</td>
</table>
</div>
</body>
</html>
-
Hallo,
Es geht eben darum das Hintegrgrundbild zu nehmen und nur in dem in der mitte abgesteckten stueck inhalt darzustellen.. (drum die tables bei mir)
Falls wer eine sinvollere loesung als Tables hat waer ich auch gluecklich..Da das Ganze ja augenscheinlich prozentual mit dem Browserfenster skalieren soll, ist das gar nicht so schwer, das auch den alten IEs beizubiegen. Kompliziert wird es nur, wenn einige der Bereiche (header und/oder footer) fixe Höhen haben sollen.
Ansatz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Beschreibung der Seite</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> html, body { margin:0; padding:0; height:100%; overflow:hidden; color:#ff0; } #background img { position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; } #header { margin:0; padding:0; height:20%; border:1px solid #0f0; } #navi { margin:0; padding:0; height:61.5%; width:27%; float:left; border:1px solid #0f0; } #content { margin:0; padding:0; height:61.5%; width:47%; float:left; overflow:auto; } #rechts { margin:0; padding:0; height:61.5%; width:25%; float:right; border:1px solid #0f0; } #footer { margin:0; padding:0; height:18%; clear:both; border:1px solid #0f0; } </style> </head> <body> <div id="background"><img src="http://img521.imageshack.us/img521/545/backgroundza2.jpg"></div> <div id="header">header</div> <div id="navi"> <ul> <li>navi1</li> <li>navi2</li> </ul> </div> <div id="content"> <h1>Überschrift</h1> <p style="margin-bottom:1000px;">Testtext hoch</p> <p>Testtext</p> <p style="width:1000px;">Testtext breit</p> </div> <div id="rechts">rechts</div> <div id="footer">footer</div> </body> </html>viele Grüße
Axel