Pelzameise
Sachse
- Registriert
- Apr. 2008
- Beiträge
- 5.221
Hi Leute,
Schaut euch mal den Anfang meines Werkes an: Tipps sind gerne gesehen, bin grade am anfangen.
HTML:
CSS:
Bitte das Javascript nicht beachten, das war nur zum Ausprobieren (übrigens geht das Script von IE4 aufwärts
)
Das Problem:
Der IE7 und abwärts zeigt die Tabelle nicht in voller Höhe an, sondern nur so, als ob hight:100% in table und body nicht da wären.
Auch wird overflow:hidden vom IE7 nicht unterstützt, d.h. es sind Scrollbalken vorhanden.
Könnt ihr mir Alternativen dazu sagen? Wichtig ist, dass das Hintergrundbild immer über das ganze Fenster gestreckt wird. (Strassenkreuzung von oben)
Schaut euch mal den Anfang meines Werkes an: Tipps sind gerne gesehen, bin grade am anfangen.
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ampelschaltung</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="format.css" />
<script language="JavaScript" type="text/javascript">
<!--
function BilderVorladen()
{
ampelbilder = new Array();
if(document.images){
ampelbilder[0] = new Image();
ampelbilder[0].src = "bilder/rot.jpg";
ampelbilder[1] = new Image();
ampelbilder[1].src = "bilder/rotgelb.jpg";
ampelbilder[2] = new Image();
ampelbilder[2].src = "bilder/gelb.jpg";
ampelbilder[3] = new Image();
ampelbilder[3].src = "bilder/gruen.jpg";
ampelbilder[4] = new Image();
ampelbilder[4].src = "bilder/fussrot.jpg";
ampelbilder[5] = new Image();
ampelbilder[5].src = "bilder/fussgruen.jpg";
}
}
//-->
</script>
</head>
<body onload="BilderVorladen(), zaehler();">
<script language="JavaScript" type="text/javascript">
<!--
var x=0;
function zaehler()
{
x = x + 1;
if(x==5) alert("faettisch");
setTimeout("zaehler()", 2000);
}
//-->
</script>
<div id="bg">
<img src="bilder/strasse.jpg" width="1" height="1" alt="Bildhintergrund" id="hintergrund" />
</div>
<div id="tabelle">
<table>
<tr>
<td>text1</td>
<td>text</td>
<td></td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text1</td>
<td>text</td>
<td><div align="center"><img align="center" src="bilder/gruen.jpg"></div></td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text1</td>
<td><div align="center"><img align="center" src="bilder/gruen.jpg"></div></td>
<td>text</td>
<td><div align="center"><img align="center" src="bilder/gruen.jpg"></div></td>
<td>text</td>
</tr>
<tr>
<td>text1</td>
<td>text</td>
<td><div align="center"><img align="center" src="bilder/gruen.jpg"></div></td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text1</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
</body>
</html>CSS:
Code:
html {
width:100%;
height:100%;
}
body {
width:100%;
height:100%;
overflow:hidden;
}
img#hintergrund {
position: fixed;
top: 0em;
left: 0em;
width: 100%;
height: 100%;s
}
table{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
div#tabelle {
position: absolute;
top: 0em;
left: 0em;
right: 0em;
bottom: 0em;
overflow: auto;
padding: 2em;
}
td{
width:20%;
height:20%;
border:1px solid #ffffff;
}
tr{
height:20%;
}Bitte das Javascript nicht beachten, das war nur zum Ausprobieren (übrigens geht das Script von IE4 aufwärts
)Das Problem:
Der IE7 und abwärts zeigt die Tabelle nicht in voller Höhe an, sondern nur so, als ob hight:100% in table und body nicht da wären.
Auch wird overflow:hidden vom IE7 nicht unterstützt, d.h. es sind Scrollbalken vorhanden.
Könnt ihr mir Alternativen dazu sagen? Wichtig ist, dass das Hintergrundbild immer über das ganze Fenster gestreckt wird. (Strassenkreuzung von oben)
