sarahgrse
Neues Mitglied
Hallo ich bin absoluter Neuling in diesem Thema, ich behandle gerade das Thema Html und Css in der Schule und mein Lehrer kann mir komischerweise auch nicht richtig weiter helfen. Meine Aufgabe ist es mit divs Kacheln zu erstellen. Zu beginn sollen sie 4x3 sein, wenn die Seite kleiner als 600px wird, sollen diese zu 6x2 Kacheln werden. Die Kacheln in 4x3 habe ich geschafft zu erstellen, jetzt bekomme ich es aber nicht hin dass sie zu 6x2 Kacheln werden..
mein Html und mein Css sehen so aus:
HTML:
<body><!-- Beginn des sichtbaren Inhalts -->
<!-- <div class="flex-container"> -->
<div class="Feld1">
<div class="Menu"> </div>
<div class="Menu1"> </div>
<div class="Menu1"> </div>
</div>
<div class="Feld2"> Feld 2 </div>
<div class="Feld3"> Feld 3 </div>
<div class="Feld4"> Feld 4 </div>
<div class="Feld5"> Feld 5 </div>
<div class="Feld6"> <a href="Kacheln-2.html"> <img src="Berlin1.jpg"> </a> </div>
<div class="Feld7"> <a href="Kacheln-3.html"> <img src="Berlin2.jpg"> </a> </div>
<div class="Feld8"> Feld 8 </div>
<div class="Feld9"> Feld 9 </div>
<div class="Feld10"> Feld 10 </div>
<div class="Feld11"> Feld 11 </div>
<div class="Feld12"> Feld 12 </div>
</body>
CSS:
div {height: 33.333%; width: 25%; float: left; box-sizing: border-box; margin: 0 auto; padding: 0}
div.Menu {background: white; width: 50%; margin-left: 25%; margin-right: 25%; height: 7%; margin-top: 90px}
div.Menu1 {background: white; width: 50%; margin-left: 25%; margin-right: 25%; height: 7%; margin-top: 15px}
div.Feld1 {background: #8B008B}
div.Feld2 {background: #9932CC}
div.Feld3 {background: #BF3EFF}
div.Feld4 {background: #B23AEE}
div.Feld5 {background: #9A32CD}
div.Feld6 {background: #68228D}
div.Feld7 {background: #9400D3}
div.Feld8 {background: #BA55D3}
div.Feld9 {background: #E066FF}
div.Feld10 {background: #D15FEE}
div.Feld11 {background: #B452CD}
div.Feld12 {background: #7A378B}
Danke für jede einfache Hilfe :)
mein Html und mein Css sehen so aus:
HTML:
<body><!-- Beginn des sichtbaren Inhalts -->
<!-- <div class="flex-container"> -->
<div class="Feld1">
<div class="Menu"> </div>
<div class="Menu1"> </div>
<div class="Menu1"> </div>
</div>
<div class="Feld2"> Feld 2 </div>
<div class="Feld3"> Feld 3 </div>
<div class="Feld4"> Feld 4 </div>
<div class="Feld5"> Feld 5 </div>
<div class="Feld6"> <a href="Kacheln-2.html"> <img src="Berlin1.jpg"> </a> </div>
<div class="Feld7"> <a href="Kacheln-3.html"> <img src="Berlin2.jpg"> </a> </div>
<div class="Feld8"> Feld 8 </div>
<div class="Feld9"> Feld 9 </div>
<div class="Feld10"> Feld 10 </div>
<div class="Feld11"> Feld 11 </div>
<div class="Feld12"> Feld 12 </div>
</body>
CSS:
div {height: 33.333%; width: 25%; float: left; box-sizing: border-box; margin: 0 auto; padding: 0}
div.Menu {background: white; width: 50%; margin-left: 25%; margin-right: 25%; height: 7%; margin-top: 90px}
div.Menu1 {background: white; width: 50%; margin-left: 25%; margin-right: 25%; height: 7%; margin-top: 15px}
div.Feld1 {background: #8B008B}
div.Feld2 {background: #9932CC}
div.Feld3 {background: #BF3EFF}
div.Feld4 {background: #B23AEE}
div.Feld5 {background: #9A32CD}
div.Feld6 {background: #68228D}
div.Feld7 {background: #9400D3}
div.Feld8 {background: #BA55D3}
div.Feld9 {background: #E066FF}
div.Feld10 {background: #D15FEE}
div.Feld11 {background: #B452CD}
div.Feld12 {background: #7A378B}
Danke für jede einfache Hilfe :)