Probleme mit <div> Element im Kontext mit JavaScript

tklustig

Erfahrenes Mitglied
Hallo Leute,
folgender, zugebenermaßen unelegante Code stellt auf dem Bildschirm ein Schachbrett da. Seltsamerweise macht die CSS-Anweisung bzgl. der row nicht das, was sie machen sollte. Meine Intention ist es, um das Brett einen blauen Rahmen zu ziehen. Außerdem sollte der Hintergrund des Brettes grau sein und das Schachbrett mit einer Fläche "bedecken", die etwas größer ist, als das Brett selber.
Weiß jemand, wie die CSS-Anweisungen dafür korrekterweise implementiert werden müssten?
HTML:
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> Schachbrett mit Drag&Drop </title>
    <!-- Hier ggf. CSS-Link einfügen, z.B.: <link href="css/selektoren.css" rel="stylesheet"> -->
<style>
.row {
border:2px solid blue;
width: 420px;
height: 420px;
background-color:gray;
}

.box1 {
width: 50px;
height: 50px;
background-color: black;
float: left;
}

.box2 {
width: 50px;
height: 50px;
background-color: green;
float:left;
}
</style>
</head>
<body> <!-- ab hier HTML-Code einfügen -->
<script>
function ZeichneBrettWhite(){
var x=0;
    for(i=1;i<=8;i++){
        if(i%2==1)
            x=1; 
    else if(i%2==0)
            x=2; 
    document.write("<div class='box"+x+"'>");
    document.write("</div>");
    }
}
function ZeichneBrettBlack(){
var x=0;
    for(i=1;i<=8;i++){
        if(i%2==1)
            x=2;
        else if(i%2==0)
            x=1;     
    document.write("<div class='box"+x+"'>");
    document.write("</div>");
    }
}
</script>
<form id="formular" name="formular" action="" method="post"></form>
<h3>Schachbrett mit Drag&Drop</h3>
<div class="row">
<script>
var aufrufe=0;
while(aufrufe<4){
ZeichneBrettWhite();
ZeichneBrettBlack();
aufrufe++;
}
</script>
</div>
 
<?php
?>
</body>
</html>
 
Zuletzt bearbeitet:
Ich würde das Ganze vermutlich ganz anders aufziehen, aber ich will mal nur deine Frage beantworten:
Dieses CSS sollte tun, was Du dir vorstellst:
Code:
.row {
    border: 2px solid blue;
    width: 400px;
    height: 400px;
    background-color: gray;
    padding: 20px;
}
 
Zurück