Kachelgestaltung

[Thomas Luethi]

Hallo

Also das normale Layout auf dem Rechner soll in diesem 3x3 Raster sein. Bei Handy dann nur noch eine Spalte runter.

Allgemeine Hinweise:

1. Da Du ja wohl ein präzises Layout anstrebst, würde ich für alle Längenangaben (Abstände u.s.w.) nur Pixel verwenden, keine Prozentwerte (welche abhängig sind von der Grösse des Eltern-Elements, und somit ggf. unberechenbar).

2. Du hast nur die Hintergrundfarbe (Schwarz) angegeben. Wenn der Browser als Schriftfarbe ebenfalls Schwarz nimmt - was der übliche Standard ist - dann ist der Text unsichtbar.
   Also: Wenn Du eine Hintergrundfarbe angibst, gib auch gleich eine dazu passende Schriftfarbe an.
   Und auch noch die Linkfarben.
   W3C QA Tips: If You Pick One Color, Pick Them All

Zur Anordnung der Elemente (Kreise):

Weitaus am einfachsten (und IMHO auch am sinnvollsten) wäre es, wenn Du nur eine maximale Breite für das umgebende Element angibst (um zu erreichen, dass maximal 3 Elemente nebeneinander in einer Reihe stehen) und alle Elemente links floaten lässt.

Stark vereinfachtes Beispiel:
Voraussetzungen: ein Element ist 250 Pixel breit und hoch, und Du hast 9 Elemente.

<ul id="kreise">  
  <li>Kreis 1</li>  
  <!-- ... -->  
  <li>Kreis 9</li>  
</ul>

ul#kreise {  
            list-style-type:none;  
            margin: 0 auto; padding:0;  
            max-width:752px;  
          }  
  
ul#kreise li {  
        float: left;  
        width: 250px; height: 250px;  
        margin:0; border-radius: 200px; padding:0;  
}

Wenn das Fenster genug breit ist (d.h. mindestens 750 Pixel), gibt es 3 Elemente pro Reihe:
1 2 3
4 5 6
7 8 9

Wenn das Fenster etwas schmaler ist (zwischen 500 und 749 Pixel), gibt es 2 Elemente pro Reihe:
1 2
3 4
5 6
7 8
9
(Das ist natürlich etwas unschön, weil in der letzten Reihe ein einzelnes Element steht.)

Wenn das Fenster noch schmaler ist, also unter 500 Pixel, werden die Elemente untereinander angezeigt.

Das alles macht der Browser automatisch.
Online-Beispiel mit DIV / Online-Beispiel mit UL/LI

Wenn Du genau das erreichen willst, was Du beschreibst, nämlich bei genug breiten Bildschirmen ein Raster mit 3x3 Elementen, sonst alle Elemente in einer Spalte untereinander, könntest Du mit Media Queries arbeiten:

/* "Normalangaben": */  
  
ul#kreise {  
            list-style-type:none;  
            margin: 0 auto; padding:0;  
            width:752px; height:752px;  
          }  
  
ul#kreise li { /* siehe oben */ }  
  
/* Spezialangaben fuer Browserfenster bis maximal 760px Breite: */  
  
@media screen and (max-width: 760px)  
   {  
    ul#kreise { width:250px; height:2254px; }  
   }  

Online-Beispiel mit schwarzen Kreisen / Online-Beispiel mit bunten Kreisen

Ich hoffe, das hilft Banana-Split oder sonst wem.
Und sonst war es eine nette Fingerübung für mich ...

Lesetipps:
A List Apart - Responsive Web Design
Responsive Webdesign (Wikipedia)

Freundliche Grüsse
Thomas

P.S. Jaja, ich weiss, dass der ID-Name "kreise" pfui ist, da Layout-bezogen.
Da wir aber nicht wissen, wozu die Kreise (semantische) gut sein sollen ...