Problem mit Kuh



  • Ich hab ne Kuh in HTML gemacht. Im IE siehts nicht so gut aus. Warum sind da die div nicht so hoch, wenns nur 7px sein sollen?
    Kann man noch was verbessern?
    PS: Javascript muss ein sein.

    <html>
    <style type="text/css">
    .horn{
    background:#666
    }
    .kuh{
    background:#de9b31
    }
    .boden{
    background:#0eeb11
    }
    .kuh2{
    background:#de7b41
    }
    .ein{
    background:#0e7b01
    }
    </style>
    <body>
    <div class="horn" style="position:absolute; top:135px; left:166px; width:5px; height:15px; "></div>
    <div class="horn" style="position:absolute; top:135px; left:176px; width:5px; height:15px; "></div>
    <div class="kuh" style="position:absolute; top:150px; left:150px; width:50px; height:30px; z-index:2;"></div>
    <div class="kuh" style="position:absolute; top:180px; left:180px; width:30px; height:40px; "></div>
    <div class="kuh" style="position:absolute; top:220px; left:185px; width:170px; height:60px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:190px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:210px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:310px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:335px; width:10px; height:70px; "></div>
    <div id="s1" class="kuh2" style="position:absolute; top:230px; left:355px; width:7px; height:70px; "></div>
    <div id="s2" class="kuh2" style="display:none; position:absolute; top:230px; left:355px; width:70px; height:7px; "></div>
    <div id="s3" class="kuh2" style="display:none; position:absolute; top:240px; left:355px; width:17px; height:7px; "></div>
    <div id="e" class="ein" style="display:none; position:absolute; top:160px; left:50px; width:17px; height:6px; z-index:0"></div>
    
    <div class="boden" style="position:absolute; top:350px; left:0px; width:100%; height:70px; "></div>
    
    <div class="kuh2" style="position:absolute; top:440px; left:355px; width:70px; height:20px; "
         onclick="doOut()">Raus</div>
    
    <div class="kuh2" style="position:absolute; top:440px; left:155px; width:70px; height:20px; "
         onclick="doIn()">Rein</div>
    
    </body>
    
    <script>
    var pos = 240;
    var inPos = 50;
    var inNr = 0;
    
    function doIn() {
    	if(inPos != 50) return;
    	document.getElementById('e').style.display='block';
    	window.setTimeout("insert()", 400);
    }
    
    function insert() {
    	var elem = document.getElementById('e');
    	elem.style.left = inPos;
    	inPos+=10;
    	if(inPos < 160) {
    		window.setTimeout("insert()", 200);
    	} else {
    		inPos = 50;
    		elem.style.left = inPos;
    		elem.style.display = 'none';
    		inNr++;
    	}
    }
    
    function doOut() {
    	if(pos != 240) return;
    	if(inNr <= 0) {
    		alert('Nix drin du Dummkopf!');
    		return;
    	}
    	document.getElementById('s2').style.display='block';
    	document.getElementById('s1').style.display='none';
    	pos = 240;
    	inNr--;
    	window.setTimeout("goDown()", 400);
    }
    
    function goDown() {
    	var elem = document.getElementById('s3');
    	elem.style.display='block';
    	elem.style.top = pos;
    	if(pos < 350) {
    		window.setTimeout("goDown()", 100);
    	} else {
    		window.setTimeout("endOut()", 300);
    	}
    
    	pos += 10;
    }
    
    function endOut() {
    	document.getElementById('s2').style.display='none';
    	document.getElementById('s1').style.display='block';
    	pos = 240;
    	var elem = document.getElementById('s3');
    	elem.style.display='none';
    	elem.style.top = pos;
    }
    </script>
    </html>
    


  • im ie ist das boxenmodel kaputt

    du musst ihn dazu bewegen in den standardmodus zu schalten ( der etwas weniger kaputt ist)

    das geht mit einer doctype anweisung

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    


  • looooooooooooool



  • So sieht es immer noch nicht besser aus. ­čś×

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <style type="text/css">
    .horn{
    background:#666
    }
    .kuh{
    background:#de9b31
    }
    .boden{
    background:#0eeb11
    }
    .kuh2{
    background:#de7b41
    }
    .ein{
    background:#0e7b01
    }
    </style>
    <body>
    <div class="horn" style="position:absolute; top:135px; left:166px; width:5px; height:15px; "></div>
    <div class="horn" style="position:absolute; top:135px; left:176px; width:5px; height:15px; "></div>
    <div class="kuh" style="position:absolute; top:150px; left:150px; width:50px; height:30px; z-index:2;"></div>
    <div class="kuh" style="position:absolute; top:180px; left:180px; width:30px; height:40px; "></div>
    <div class="kuh" style="position:absolute; top:220px; left:185px; width:170px; height:60px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:190px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:210px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:310px; width:10px; height:70px; "></div>
    <div class="kuh" style="position:absolute; top:280px; left:335px; width:10px; height:70px; "></div>
    <div id="s1" class="kuh2" style="position:absolute; top:230px; left:355px; width:7px; height:70px; "></div>
    <div id="s2" class="kuh2" style="display:none; position:absolute; top:230px; left:355px; width:70px; height:7px; "></div>
    <div id="s3" class="kuh2" style="display:none; position:absolute; top:240px; left:355px; width:17px; height:7px; "></div>
    <div id="e" class="ein" style="display:none; position:absolute; top:160px; left:50px; width:17px; height:6px; z-index:0"></div>
    
    <div class="boden" style="position:absolute; top:350px; left:0px; width:100%; height:70px; "></div>
    
    <div class="kuh2" style="position:absolute; top:440px; left:355px; width:70px; height:20px; "
         onclick="doOut()">Raus</div>
    
    <div class="kuh2" style="position:absolute; top:440px; left:155px; width:70px; height:20px; "
         onclick="doIn()">Rein</div>
    
    </body>
    
    <script>
    var pos = 240;
    var inPos = 50;
    var inNr = 0;
    
    function doIn() {
        if(inPos != 50) return;
        document.getElementById('e').style.display='block';
        window.setTimeout("insert()", 400);
    }
    
    function insert() {
        var elem = document.getElementById('e');
        elem.style.left = inPos;
        inPos+=10;
        if(inPos < 160) {
            window.setTimeout("insert()", 200);
        } else {
            inPos = 50;
            elem.style.left = inPos;
            elem.style.display = 'none';
            inNr++;
        }
    }
    
    function doOut() {
        if(pos != 240) return;
        if(inNr <= 0) {
            alert('Nix drin du Dummkopf!');
            return;
        }
        document.getElementById('s2').style.display='block';
        document.getElementById('s1').style.display='none';
        pos = 240;
        inNr--;
        window.setTimeout("goDown()", 400);
    }
    
    function goDown() {
        var elem = document.getElementById('s3');
        elem.style.display='block';
        elem.style.top = pos;
        if(pos < 350) {
            window.setTimeout("goDown()", 100);
        } else {
            window.setTimeout("endOut()", 300);
        }
    
        pos += 10;
    }
    
    function endOut() {
        document.getElementById('s2').style.display='none';
        document.getElementById('s1').style.display='block';
        pos = 240;
        var elem = document.getElementById('s3');
        elem.style.display='none';
        elem.style.top = pos;
    }
    </script>
    </html>
    


  • Ich habs mir jetzt nicht genau angeguckt, aber das Problem an sich kenn ich.
    f├╝g mal ein "overflow: hidden;" im style-attribut hinzu


Log in to reply