nicht angemeldet
Hallo Community,
ich habe etwas bemerkenswertes entdeckt. Für Schulungszwecke wollte ich das float-Verhalten von DIV-Containern visualisieren. Dazu erstellte ich drei DIV-Container mit unterschiedlichen Farben und fügte über Javascript die Möglichkeit hinzu die float-Eigenschaft der Container zu verändern.
Meines erachtens ist mein Script wasserdicht, IE7 ignoriert es jedoch, Firefox reagiert teilweise absurd und nur Opera stellt es genauso dar, wie beabsichtigt.
Hier die HTML, oder obigen Link:
<html>
<head>
<title>CSS-Übung</title>
<!-- CSS -->
<style type="text/css">
body {
background-color:#FFFFFF;
color:#000000;
}
a {
color:#000000;
}
#block1 {
background-color:#FF0000;
width:400px;
height:20%;
text-align:center;
display:block;
}
#block2 {
background-color:#00FF00;
width:400px;
height:20%;
text-align:center;
display:block;
}
#block3 {
background-color:#0000FF;
width:400px;
height:20%;
text-align:center;
display:block;
}
</style>
<!-- JavaScript -->
<script language="javascript" type="text/javascript">
function changefloat(block,fluss) {
divblock=document.getElementById("block"+block);
divblock.style.cssFloat=fluss;
textimblock=document.getElementById("t"+block);
textimblock.innerHTML=fluss;
}
</script>
</head>
<body>
<h1>Positionierung von DIV-Boxen</h1>
<h2>Fluss (float) von Objekten</h2>
<div id="block1">
<a href="javascript:changefloat(1,'none');">Float:none</a>|
<a href="javascript:changefloat(1,'left');">Float:left</a>|
<a href="javascript:changefloat(1,'right');">Float:right</a></br>
<h1 id="t1">none</h1>
</div>
<div id="block2">
<a href="javascript:changefloat(2,'none');">Float:none</a>|
<a href="javascript:changefloat(2,'left');">Float:left</a>|
<a href="javascript:changefloat(2,'right');">Float:right</a>
<h1 id="t2">none</h1>
</div>
<div id="block3">
<a href="javascript:changefloat(3,'none');">Float:none</a>|
<a href="javascript:changefloat(3,'left');">Float:left</a>|
<a href="javascript:changefloat(3,'right');">Float:right</a>
<h1 id="t3">none</h1>
</div>
</body>
</html>