nicht angemeldet
CSS Schachbrettmuster
StruppiWürde gerne den CSS Code so ergänzen das sich ein Schachbrett Muster ergibt.
<title> ... </title>
<style type="text/css">
body {
background-color: gray;
}
#wrap {
margin: auto 20px;
width: 500px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
</div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
</div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
</div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
</div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
</div class="schwarz"></div>
</div>
</body>
</html>
-
Hi Naeva,
Würde gerne den CSS Code so ergänzen das sich ein Schachbrett Muster ergibt.
Welche Informationen fehlen dir denn? Du hast zumindest keinen style für die Klassen schwarz und weiss angegeben, warum nicht? Warum klappt das nicht, was du möchtest?
Ciao
romy-
Hi Naeva,
Würde gerne den CSS Code so ergänzen das sich ein Schachbrett Muster ergibt.
Welche Informationen fehlen dir denn? Du hast zumindest keinen style für die Klassen schwarz und weiss angegeben, warum nicht? Warum klappt das nicht, was du möchtest?Ciao
romyIch bin zur zeit in meiner Prüfungsvorbereitung (Informatik Studium) alle Fragen die gestellt werden in den gängigen Probeklausuren bekomme ich ohne Probleme beantwortet jedoch bei dieser fehlt mir irgendwie jeglicher Anhaltspunkt, google hilft leider auch nicht weiter und in den CSS Büchern die es bei uns in der Bibliothek gibt (nicht gerade viele) finde ich auch nichts zu diesem Thema.
Denke ich brauch einfach nur nen guten Denkanstoß ;)
-
8X8 Tabelle
Für jede zelle eine quadratische Form angeben und zwei verschieden css-definitionen machen, eine für schwarz und eine für weiss....td{
height: 50px;
width: 50px;
}black{
...
}white{
...
}-
8X8 Tabelle
Für jede zelle eine quadratische Form angeben und zwei verschieden css-definitionen machen, eine für schwarz und eine für weiss....td{
height: 50px;
width: 50px;
}black{
...
}white{
...
}Habs jetzt gemacht aber ich habe noch einen fehler und zwar werden die Quadrate untereinander angezeigt und es sieht nicht gerade wie ein schachbrett aus.
Hier mal der Code
<html lang="de-de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Demo</title>
<style type="text/css">body {
background-color: gray; }#wrap {
margin:auto 20px;
width: 50px; }td {
width: 100px;
height: 100px; }.schwarz {
background-color: #000000;
width: 100px;
height: 100px; }.weiss {
background-color: #ffffff;
width: 100px;
height: 100px; }</style>
</head><body>
<div id="wrap">
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div>
<div class="weiss"></div><div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div><div class="weiss"></div>
<div class="schwarz"></div>
</div>
</body>
</html>Im Prinzip sieht es so aus
Schwarz
Weiß
Schwarz
Weiß
Schwarz
Weiß
uswaber es sollte doch eigentlich so sein
Schwarz Weiß Schwarz Weiß Schwarz
Weiß Schwarz Weiß Schwarz Weiß
Schwarz Weiß Schwarz Weiß Schwarz
Weiß Schwarz Weiß Schwarz Weiß
Schwarz Weiß Schwarz Weiß SchwarzNoch jemand eine Idee?
PS Danke schonmal an alle die geholfen haben ;)
-
Hi,
body {
background-color: gray; }#wrap {
margin:auto 20px;
width: 50px; }td {
In deinem HTML gibt es kein td-Element. Verwende stattdessen
#wrap div
Damit sprichst du alle divs an, die innerhalb des Elements mit der id 'wrap' liegen.width: 100px;
height: 100px; }.schwarz {
background-color: #000000;
width: 100px;
height: 100px; }Es reichst wenn du width und height einmal (bei "#wrap div") angibst.
.weiss {
background-color: #ffffff;
width: 100px;
height: 100px; }Siehe letzter Hinweis.
Noch jemand eine Idee?
Ich hab dir vorhin schonmal empfohlen, dass du float brauchst. Damit löst du das von dir angesprochene Problem.
mfG,
steckl -
Habs jetzt gemacht aber ich habe noch einen fehler und zwar werden die Quadrate untereinander angezeigt und es sieht nicht gerade wie ein schachbrett aus.
Wenn du unbedingt mit DIV Elementen arbeiten willst musst du zwei Änderungen einbauen:
#wrap {
margin:auto 20px;
width: 50px; }Tippfehler? Die Breite muss natürlich so gross sein, wie die Anzahl der Kästchen die reinpassen sollen, also 500px
td {
width: 100px;
height: 100px; }td Elemente gibt es in deinem Code nicht, sondern divs und die sollen sich nebeneinander anorden, am sinnvollsten hier mit float.
#wrap div
width: 100px;
height: 100px;
float:left;
}Struppi.
-
Habs jetzt gemacht aber ich habe noch einen fehler und zwar werden die Quadrate untereinander angezeigt und es sieht nicht gerade wie ein schachbrett aus.
Wenn du unbedingt mit DIV Elementen arbeiten willst musst du zwei Änderungen einbauen:
#wrap {
margin:auto 20px;
width: 50px; }Tippfehler? Die Breite muss natürlich so gross sein, wie die Anzahl der Kästchen die reinpassen sollen, also 500px
td {
width: 100px;
height: 100px; }td Elemente gibt es in deinem Code nicht, sondern divs und die sollen sich nebeneinander anorden, am sinnvollsten hier mit float.
#wrap div
width: 100px;
height: 100px;
float:left;
}Struppi.
;)))))))))
Danke jetzt hab ich es ;)
Danke euch allen ;)
-
-
-
-
Hi,
Welche Informationen fehlen dir denn? Du hast zumindest keinen style für die Klassen schwarz und weiss angegeben, warum nicht? Warum klappt das nicht, was du möchtest?
Denke ich brauch einfach nur nen guten Denkanstoß ;)
Hat dir doch romy schon gegeben: Du musst für die Klassen schwarz und weiss einen Style angeben. Wie du die Klassen in CSS ansprechen kannst steht hier.
Die Eigenschaften die du benötigst sind wohl background-color, width, height und float.
Wenn du deine Versuche hier postest erklärt dir sicher jemand, was du falsch gemacht hast.
Außerdem ist da noch ein Fehler in deiner Angabe:
</div class="schwarz"> muss <div class="schwarz"> heißen, sollte also ein öffnendes Tag sein.mfG,
steckl -
Hi Naeva,
Denke ich brauch einfach nur nen guten Denkanstoß ;)
Zu den Links und Hilfen, die du bekommen hast, hilft dir vielleicht dies hier noch weiter. Da ist ein Schachbrettbeispiel drin. (kräftig scrollen)
ciao
romy-
Zu den Links und Hilfen, die du bekommen hast, hilft dir vielleicht dies hier noch weiter. Da ist ein Schachbrettbeispiel drin. (kräftig scrollen)
hmm, das Beispiel ist nicht gerade schön, wenn es darum geht, wie man CSS anwenden kann.
Vielleicht eher so:
.schachbrett { width: 400px; height: 400px; border: solid #000 2px; margin: 0px auto; border-collapse:collapse; } .schachbrett td { width:100px; height:100px; text-align:center; background-color: #000; } .schachbrett td.weiss { background-color: #fff; }und das HTML:
<table class="schachbrett"> <tr> <td class="weiss"></td> <td ></td> <td class="weiss"></td> <td ></td> </tr> <tr> <td ></td> <td class="weiss">Läufer</td> <td ></td> <td class="weiss"></td> </tr> <tr> <td class="weiss"></td> <td ></td> <td class="weiss"></td> <td ></td> </tr> <tr> <td ></td> <td class="weiss"></td> <td ></td> <td class="weiss"></td> </tr> </table>Struppi.
-
-
-
