Antworten auf deine Fragen:
Neues Thema erstellen

Schachbrett mit verschachtelten div - Boxen

M

mariexhtml

Guest

Hallo Leute,

Ich hoffe sehr, dass ihr mir weiterhelfen könnt.
Ich muss ein Schachbrett codieren und verschachtelte div-Boxen mit float und clear Befehlen verwenden. Bis jetzt hab ich das:

HTML: 
<html>
    <head>
        <title>Schachbrett</title>
    <style type="text/css">
        #box1{
        width: 50px;
        height: 50px;        
        background-color: black;
        float: left;
        
        }
             
      #box2{
        width: 50px;
        height: 50px;
        background-color: green;
        float:left;
        }
        
        #box3 {
        width: 50px;
        height: 50px;        
        background-color: black;
        float: left;
        }
        #box4{
        width: 50px;
        height: 50px;
        background-color: green;
        float:left;
        }            
        #box5 {
        width:50px;
        height: 50px;
        background-color: green;
        float: left;
}
      
    </style>
    </head>
    <body>

<h1>Schachbrett</h1>
        
          <div id="box1"></div>
          <div id="box2"></div>
          <div id="box3"></div>
          <div id="box4"></div>
          <div id="box5"></div>
          <div id="box6"></div>
        </body>
</html>

Das sind daweil 4 Boxen nebeneinander, und das 5te irgendwo drunter, bei der 6ten Box hab ich aufgegeben. Habt ihr vielleicht einen Tipp für mich?
Wäre wirklich sehr, sehr toll.

Liebe Grüße
 
Zuletzt bearbeitet von einem Moderator:

rodemund

rodemund

:)

AW: Schachbrett mit verschachtelten div - Boxen

Sind die ID vorschrift? ist eigentlich quatsch, weil sich das zeug ständig wiederholt.
So vielleicht?:

<html>
<head>
<title>
Schachbrett
</title>
<style type="text/css">
.row {
width: 400px;
height: 50px;
background-color: #fff;
float: clear;
}

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

.box2 {
width: 50px;
height: 50px;
background-color: green;
float:left;
}
</style>
</head>
<body>
<h1>Schachbrett</h1>
<div class="row">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="row">
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
</div>
<div class="row">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="row">
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
</div>
<div class="row">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="row">
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
</div>
<div class="row">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<div class="row">
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box1">
</div>
</div>
</body>
</html>
Zum Vergrößern anklicken....

müsste noch kürzer gehen, aber erstmal ...

BTW: Drückt dein Username den Grad deiner Verzweiflung aus? ;)
 
Zuletzt bearbeitet:
M

mariexhtml

Guest

AW: Schachbrett mit verschachtelten div - Boxen

SEHR COOL!!!!!!! hat funktioniert. Vielen, vielen Dank!!!

aber jetzt sollt ich auch noch verstehen was da passiert ist... :/
Wie hast du das gemacht?
Und was bedeutet eigentlich das float: clear; ?
Bin noch totaler html/css anfänger und sollte das eigentlich schon verstehen...

achja: wenn du das mit classes gemacht hast, wirds schwer gehen, die Schachbrettfelder mit hover als "Memoryspiel" umzucoden oder?
Weil eigentlich sollte ich ein 4x4 großes Schachbrett erstellen, das man zuerst einfach nur schwarz und grün sieht und auf der nächsten Seite solln sie wieder weiß sein mit rand und wenn man mit der maus drüber fährt, solln jeweils 2 die gleiche Farbe haben.
Das geht jetzt nicht mehr oder?

Und ja, ich bin sehr verzweifelt. ^^
 
Zuletzt bearbeitet von einem Moderator:
rodemund

rodemund

:)

AW: Schachbrett mit verschachtelten div - Boxen

Das klarste und übersichtlichste Buch, das ich kenne:

Das hat mir CSS erklärt, und das will was heißen.
Was passiert im Code?
Du brauchst nur drei CSS-Klassen: row (die Zeile), box1 (schwarz) und box2 (grün).
Mehr Eigenschaften gibt es nicht zu beschreiben.
Wichtig: "class" (.box1), nicht "id" (#box1) - denn die Elemente wiederholen sich. "id" nur bei elementen, die sich nicht wiederholen. Diese aber wiederholen sich: "row" gibt es 8x, "box1" und "box2" jeweils 32x.
Die kriegen also ihre Maße und Farben verpasst.
Wenn nichts anders angesagt ist, werden Blockelemente ("div") untereinander angeordnet.
"float: left;" sagt, dass das nächste Element nicht darunter angeordnet wird, sondern rechts daneben, den das betreffende Element soll "links schwimmen". Dieser Vorgang bildet die Zeile.
"float: clear;" bedeutet, das ein beliebiges "float:" aufgehoben wird. Ich bin mir nicht sicher, ob das hier nötig ist, aber es schadet nicht. Das war's auch schon :)

http://fwpf-webdesign.de/css/float-und-clear
 
Zuletzt bearbeitet:
Myhar

Myhar

Hat es drauf

AW: Schachbrett mit verschachtelten div - Boxen

Vorneweg: float:clear gibt es nicht. Entweder float:none oder clear:both (oder andere gültige Werte für diese beiden Attribute.
Ich weiß ja nicht, was die Vorgaben dieser Aufgabe sind, aber wenn nur moderne Browser unterstützt werden müssen, dann lässt sich das auch ohne box1 und box2 lösen.
Mit dem CSS3 Pseudo-Selektor nth-of-type lassen sich zB gerade und ungerade Subelemente selektieren.
Mit diesem nth-child Tester kann man das gut nachvollziehen
 
M

mariexhtml

Guest

AW: Schachbrett mit verschachtelten div - Boxen

Und wie geht das jetzt, dass wenn man mit der Maus drüber fährt, dass sich die Farbe verändert? :(
Ich weiß dass es mit hover geht, aber in diesem Fall mit den 2 vorgegeben classes geht's doch nicht oder?

Ist das überhaupt möglich wenn man class verwendet?

Wäre dir sehr dankbar wenn ihr mir da auch noch helfen könntets.
 
Zuletzt bearbeitet von einem Moderator:
Myhar

Myhar

Hat es drauf

AW: Schachbrett mit verschachtelten div - Boxen

Wieso sollte es mit classes nicht gehen?
Mein Hinweis:
HTML: 
.class1:hover{ /*Hover für class1*/ }
.class2:hover{ /*Hover für class1*/ }
 
M

mariexhtml

Guest

AW: Schachbrett mit verschachtelten div - Boxen

Naja in diesem Fall hab ich ja die verschiedenen Boxen, also hab ich "geschrieben":
.box1:hover {
color: red;
}

aber das funktioniert leider nicht. :(
 
Myhar

Myhar

Hat es drauf

AW: Schachbrett mit verschachtelten div - Boxen

Weil in deinen Boxen auch nichts drinnen steht.
color ist für die Schriftfarbe, background-color für die Hintergrundfarbe. Wenn du die Schriftfarbe änderst, aber keinen Text hast, siehst du auch nichts.
 
M

mariexhtml

Guest

AW: Schachbrett mit verschachtelten div - Boxen

aaaaaaaaaach, ich bin so ein Doofi.

DANKE!!!! mit background-color hats geklappt!! Vielen, vielen Dank!!
 
rodemund

rodemund

:)

AW: Schachbrett mit verschachtelten div - Boxen

mariexhtml schrieb:
.box1:hover {
color: red;
}

aber das funktioniert leider nicht. :(
Zum Vergrößern anklicken....
eher so?
HTML: 
.box1:hover {
background-color: red;
}
color:red; macht doch nur rote Schrift, oder?


:nth-of-type(n) ist ja hochspannend, danke dafür.

Für's 4x4-Schachbrett müsste man aber für n eine Formel schreiben, denn die Farbe wechselt ja nach dem Muster 2 - 4 - 5 - 7 - 10 - 12 - 13 - 15.

odd oder even als Werte gehen also nicht so ohne weiteres.

mariexhtml schrieb:
Weil eigentlich sollte ich ein 4x4 großes Schachbrett erstellen, das man zuerst einfach nur schwarz und grün sieht und auf der nächsten Seite solln sie wieder weiß sein mit rand und wenn man mit der maus drüber fährt, solln jeweils 2 die gleiche Farbe haben.
Zum Vergrößern anklicken....

Für das hovern selbst ist es ja egal, es hovert ja immer dort, wo die Maus gerade ist, ob class oder id. Ich hab noch keine rechte Idee, wie ein zweites Feld in der selben Farbe aufleuchten soll.
 
Zuletzt bearbeitet:
Myhar

Myhar

Hat es drauf

AW: Schachbrett mit verschachtelten div - Boxen

alterneuling schrieb:
:nth-of-type(n) ist ja hochspannend, danke dafür.

Für's 4x4-Schachbrett müsste man aber für n eine Formel schreiben, denn die Farbe wechselt ja nach dem Muster 2 - 4 - 5 - 7 - 10 - 12 - 13 - 15.

odd oder even als Werte gehen also nicht so ohne weiteres.
Zum Vergrößern anklicken....

Warum so kompliziert? Es gibt genau zwei unterschiedliche Arten von Reihen: Eine, die mit Schwarz und eine, die mit Weiß beginnt.
Dann hat man folgendes CSS:
Code: 
.rowBlackStart div:nth-of-type(even){background-color:black}
.rowWhiteStart div:nth-of-type(odd){background-color:black}
 
rodemund

rodemund

:)

AW: Schachbrett mit verschachtelten div - Boxen

@Myhar: Du hast natürlich mal wieder recht.

Bleibt noch der gleichzeitige Farbwechsel von ZWEI einander zugeordneten Feldern, wenn der Mauszeiger über EIN Feld fährt. Vermutlich denke ich auch da zu kompliziert, aber ich habe noch keine rechte Idee.

Da die Boxen ja einander zugeordnet werden müssen, kann's ja ohne IDs schlecht gehen?
 
Zuletzt bearbeitet:
cebito

cebito

undefined

AW: Schachbrett mit verschachtelten div - Boxen

thx :) - aber war eigentlich ganz einfach, die Frage ist wie bekomme ich zwei zusammengehörige Lampen zum leuchten und wie verteil ich die mehr oder weniger zufällig auf der Fläche. Da ich nicht vom restlichen "wie positionier ich"-Post beinflusst war, blieb der (mir nicht unbekannte) Tunnelblick aus ;)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 70 (Mitglieder: 1, Gäste: 69)
Robots: 562

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben