• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kacheln in Html an Seite anpassen

sarahgrse

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 :)
 
Werbung:
sarahgrse schrieb:
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:
Zum Vergrößern anklicken....
Dein Ansatz ist schon falsch. float war früher mal für Layouts üblich und notwendig, ist aber schon ewig veraltet - heute gibt es dafür flex und grid-Layouts. Für dich könnte die grid-Seite zu responsive Rastern interessant sein, dort wird beschrieben wie sich deine Kacheln automatisch auf unterschiedliche Spaltenanzahlen anpassen lassen. Mit media querys lässt sich die Darstellung aber auch umschalten - aber vergiss dafür die Einheit Pixel!
 
Unser Problem ist das wir nicht wissen, was du an HTML und CSS verwenden darfst.

Ich habe mal ein Beispiel mit CSS-Grid erstellt:


Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   @media all {
      body {
         min-height: 100vh;
         margin: 0;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
      }
      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;
      }
   }
   @media only screen and (min-width: 600px) {
      body {
         grid-template-columns: repeat(4, 1fr);
      }
   }

   </style>
</head>
<body>
   <div class="Feld1"> Feld 1 </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"> Feld 6 </div>
   <div class="Feld7"> Feld 7 </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>
</html>
 
Werbung:
tk1234 schrieb:
Dein Ansatz ist schon falsch. float war früher mal für Layouts üblich und notwendig, ist aber schon ewig veraltet - heute gibt es dafür flex und grid-Layouts. Für dich könnte die grid-Seite zu responsive Rastern interessant sein, dort wird beschrieben wie sich deine Kacheln automatisch auf unterschiedliche Spaltenanzahlen anpassen lassen. Mit media querys lässt sich die Darstellung aber auch umschalten - aber vergiss dafür die Einheit Pixel!
Zum Vergrößern anklicken....
Danke, die Seite sieht wirklich interessant aus. Die divs, die ich erstellt habe verfallen dann einfach oder sind die dann auch noch notwendig ?
 
MrMurphy schrieb:
Unser Problem ist das wir nicht wissen, was du an HTML und CSS verwenden darfst.

Ich habe mal ein Beispiel mit CSS-Grid erstellt:


Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   @media all {
      body {
         min-height: 100vh;
         margin: 0;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
      }
      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;
      }
   }
   @media only screen and (min-width: 600px) {
      body {
         grid-template-columns: repeat(4, 1fr);
      }
   }

   </style>
</head>
<body>
   <div class="Feld1"> Feld 1 </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"> Feld 6 </div>
   <div class="Feld7"> Feld 7 </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>
</html>
Zum Vergrößern anklicken....
Ich darf alles verwenden, wir müssen uns auch alles ein wenig selbst beibringen. Das erschwert es ein wenig ..

Ist das jetzt alles in CSS drin? Das sieht auch aus wie HTML..?
 
Ist das jetzt alles in CSS drin?
Zum Vergrößern anklicken....

Ja. Alles zwischen

Code: 
<style>
...
</style>

ist das komplette CSS nach den aktuellen CSS-Regeln.

Das CSS kann ohne Änderungen in eine externe Datei ausgelagert werden, dann muss der Link zu der CSS-Datei noch eingefügt werden. Zum Testen und Veröffentlichen schreibe ich das CSS gerne in direkt in die HTML-Datei, das nennt sich Inside-CSS.

So können Interessierte den Inhalt einfach komplett in eine Datei kopieren, ausprobieren und bei Bedarf direkt Änderungen ausprobieren.
 
Werbung:
MrMurphy schrieb:
Ja. Alles zwischen

Code: 
<style>
...
</style>

ist das komplette CSS nach den aktuellen CSS-Regeln.

Das CSS kann ohne Änderungen in eine externe Datei ausgelagert werden, dann muss der Link zu der CSS-Datei noch eingefügt werden. Zum Testen und Veröffentlichen schreibe ich das CSS gerne in direkt in die HTML-Datei, das nennt sich Inside-CSS.

So können Interessierte den Inhalt einfach komplett in eine Datei kopieren, ausprobieren und bei Bedarf direkt Änderungen ausprobieren.
Zum Vergrößern anklicken....
Wow, vielen Dank!, das mit dem anpassen an die Seite funktioniert jetzt! :) wie schaffe ich es nun das alle meine Kästen die selbe Größe haben ? Die in der Mitte sind irgenwie dicker als die oben und unten ..
 
In meinem Beispiel sind alle Kästen (div) gleich groß. Ob und was für Änderungen du vorgenommen hast weiß ich nicht. Ich musste deine Angaben ja auch anpassen, da mir zum Beispiel die Bilder nicht zur Verfügung stehen.

Grundsätzlich sind Webseiten dafür gedacht Inhalte anzuzeigen. Dein Beispiel hat keinen Inhalt in dem Sinn. Dieses Forum hat zum Beispiel Inhalte. Hauptsächlich Informationen in Form von Fragen und Antworten.

Dabei sollen sich die Seite und die Elemente der Seite an den Inhalt anpassen. Für gleichbleibende Größen sind eher Textverarbeitungen, Zeichenprogramme und ähnliches gedacht.

Schließlich sollen Webseiten auf vielen Ausgabegeräten angezeigt werden. Vom Smartphone über Tablets und Laptops bis zu Großbildschirmen. Andere Ausgabegeräte wie Drucker oder Besucher mit Handicap haben Anfänger meist überhaupt nicht auf der Rechnung. Das Layout muss also sehr flexibel sein.

Webseiten sind nicht dazu da Ästhetikeitsfanatiker zufriedenzustellen. Damit kann man zwar etwas rumspielen wie in meinem Beispiel, mit korrekten Webseiten hat das aber nichts zu tun.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben