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?
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: