Anzeige

Schachbrett mit verschachtelten div - Boxen

Schachbrett mit verschachtelten div - Boxen | PSD-Tutorials.de

Erstellt von mariexhtml, 01.11.2012.

  1. mariexhtml

    mariexhtml Noch nicht viel geschrieben

    Dabei seit:
    01.11.2012
    Beiträge:
    5
    Geschlecht:
    weiblich
    Schachbrett mit verschachtelten div - Boxen
    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:
    1.     <head>
    2.         <title>Schachbrett</title>
    3.     <style type="text/css">
    4.         #box1{
    5.         width: 50px;
    6.         height: 50px;        
    7.         background-color: black;
    8.         float: left;
    9.        
    10.         }
    11.              
    12.       #box2{
    13.         width: 50px;
    14.         height: 50px;
    15.         background-color: green;
    16.         float:left;
    17.         }
    18.        
    19.         #box3 {
    20.         width: 50px;
    21.         height: 50px;        
    22.         background-color: black;
    23.         float: left;
    24.         }
    25.         #box4{
    26.         width: 50px;
    27.         height: 50px;
    28.         background-color: green;
    29.         float:left;
    30.         }            
    31.         #box5 {
    32.         width:50px;
    33.         height: 50px;
    34.         background-color: green;
    35.         float: left;
    36. }
    37.      
    38.     </style>
    39.     </head>
    40.     <body>
    41.  
    42. <h1>Schachbrett</h1>
    43.        
    44.           <div id="box1"></div>
    45.           <div id="box2"></div>
    46.           <div id="box3"></div>
    47.           <div id="box4"></div>
    48.           <div id="box5"></div>
    49.           <div id="box6"></div>
    50.         </body>
    51. </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 von einem Moderator bearbeitet: 02.11.2012
    #1      
  2. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

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

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

    BTW: Drückt dein Username den Grad deiner Verzweiflung aus? ;)
     
    Zuletzt bearbeitet: 01.11.2012
    #2      
  3. mariexhtml

    mariexhtml Noch nicht viel geschrieben

    Dabei seit:
    01.11.2012
    Beiträge:
    5
    Geschlecht:
    weiblich
    Schachbrett mit verschachtelten div - Boxen
    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: 01.11.2012
    #3      
  4. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    Das klarste und übersichtlichste Buch, das ich kenne:
    http://www.amazon.de/dp/3827244668/?tag=psdtutorialde-21
    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: 01.11.2012
    #4      
  5. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Schachbrett mit verschachtelten div - Boxen
    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
     
    #5      
  6. mariexhtml

    mariexhtml Noch nicht viel geschrieben

    Dabei seit:
    01.11.2012
    Beiträge:
    5
    Geschlecht:
    weiblich
    Schachbrett mit verschachtelten div - Boxen
    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: 02.11.2012
    #6      
  7. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    *nachschlag* ... ah ... korrekt. So ist es. Danke.
     
    #7      
  8. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    Wieso sollte es mit classes nicht gehen?
    Mein Hinweis:
    HTML:
    1.  
    2. .class1:hover{ /*Hover für class1*/ }
    3. .class2:hover{ /*Hover für class1*/ }
    4.  
     
    #8      
  9. mariexhtml

    mariexhtml Noch nicht viel geschrieben

    Dabei seit:
    01.11.2012
    Beiträge:
    5
    Geschlecht:
    weiblich
    Schachbrett mit verschachtelten div - Boxen
    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. :(
     
    #9      
  10. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Schachbrett mit verschachtelten div - Boxen
    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.
     
    #10      
  11. mariexhtml

    mariexhtml Noch nicht viel geschrieben

    Dabei seit:
    01.11.2012
    Beiträge:
    5
    Geschlecht:
    weiblich
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    aaaaaaaaaach, ich bin so ein Doofi.

    DANKE!!!! mit background-color hats geklappt!! Vielen, vielen Dank!!
     
    #11      
  12. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    eher so?
    HTML:
    1. .box1:hover {
    2. background-color: red;
    3. }
    4.  
    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.

    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: 02.11.2012
    #12      
  13. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    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 (Text):
    1.  
    2. .rowBlackStart div:nth-of-type(even){background-color:black}
    3. .rowWhiteStart div:nth-of-type(odd){background-color:black}
    4.  
     
    #13      
  14. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    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: 02.11.2012
    #14      
  15. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Schachbrett mit verschachtelten div - Boxen
    #15      
  16. rodemund

    rodemund :)

    Dabei seit:
    23.09.2010
    Beiträge:
    882
    Geschlecht:
    männlich
    Ort:
    Westensee bei Kiel
    Software:
    iMac MacOS 10.6.8 / Adobe CS5
    Kameratyp:
    Canon - kompakt und DSLR
    Schachbrett mit verschachtelten div - Boxen
    AW: Schachbrett mit verschachtelten div - Boxen

    Ich konnte mich auch nicht ausreichend gegen Spieltrieb und Funktionslust wehren ... aber im Gegensatz zu mir hast du offenbar Ahnung davon :)

    Und das Ganze mit SO WENIG Code??? *staun*
     
    #16      
  17. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Schachbrett mit verschachtelten div - Boxen
    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 ;)
     
    #17      
x
×
×