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

Responsive Anordnung vom 3x3 quadratischen DIVs

kercon

Mitglied
Hallo Leute,
irgendwie fehlt mir der rechte Ansatz... Wie bekomme ich 9 quadratische DIV's responsive so angeordnet, dass diese immer in 3 Zeilen á 3 Spalten stehen?

Danke!
 
Da gibt es ein paar möglichkeiten.
Flexbox , Grid , und natürlich mit ganz normalen Css und das altmodische Tabellen Layout.

Am wichtigsten ist es aber erstmal die Container richtig zu setzen,
wenn da ein Container falsch geschlossen wird bringt das beste Css kaum noch was.

Wie sehen denn deine versuche aus ?
 
Mit FlexBox eine leichte Übung - Tabellen Layout wäre eher weniger zu empfehlen, da Tabellen bei ihrem responsiv Verhalten eher schlecht zu manipulieren sind.
 
Vielen Dank für Eure Antworten! Tabellen wollt' ich eh nicht - ich habs mal mit Grid probiert. Bekomme den Text aber irgendwie nicht in der Mitte der Box zentriert... Jetzt muss nur noch mein Wordpress mitspielen ;-)

Code:
<html>
<head>

<style>

.container {
    position:relative;
     width: 50%;
    }
    
@media (max-width: 800px) {
    .container {
        width: 100%;
        }
}

.container:before {
    content: "";
    display:block;
    padding-top: 100%;
    }

.grid-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    }

.grid_3x3 {
    display: inline-block;
    height:100%;
    width:100%;
    position: relative;
    text-align:center;
    }

.block {
    float: left; 
    top: 0;
    width: 33.3333%;
    height: 33.3333%; 
    position: relative;
    display: inline-block;
    width: 33.3333%;
    height: 33.3333%;
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden;
    Border:#000 solid 1px;
    }

.block .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     }

.grafik01 {background-image: url("");}
.grafik02 {background-image: url("");}
.grafik03 {background-image: url("");}
.grafik04 {background-image: url("");}
.grafik05 {background-image: url("");}
.grafik06 {background-image: url("");}
.grafik07 {background-image: url("");}
.grafik08 {background-image: url("");}
.grafik09 {background-image: url("");}
    
</style>

</head>
<body>

<div class="container">
<div class="grid-container">
  <div class="grid_3x3">
    <div class="block"><div class="img grafik01">Lorem ipsum dolor sit amet.</div></div>
    <div class="block"><div class="img grafik02">Consetetur sadipscing elitr.</div></div>
    <div class="block"><div class="img grafik03">Sed diam nonumy eirmod tempor invidunt ut</div></div>
    <div class="block"><div class="img grafik04">Consetetur sadipscing elitr.</div></div>
    <div class="block"><div class="img grafik05">Sed diam nonumy eirmod tempor invidunt ut.</div></div>
    <div class="block"><div class="img grafik06">Lorem ipsum dolor sit amet.</div></div>
    <div class="block"><div class="img grafik07">Sed diam nonumy eirmod tempor invidunt ut.</div></div>
    <div class="block"><div class="img grafik08">Lorem ipsum dolor sit amet.</div></div>
    <div class="block"><div class="img grafik09">Consetetur sadipscing elitr.</div></div>       
 </div>
</div>
</div>

</body>
</html>
 
Ich habe noch eine Navigation eingefügt. Jetzt muss nur noch der Link-Text verschwinden - vorm Mouseover steht an dieser Stelle eine Grafik...

Code:
nav a {
    display:none;
    }
zerschießt das Layout ...und
Code:
nav a {
    visibility:hidden;
    }
   
nav a:focus, nav a:hover, nav a:focus, nav a:hover {
    visibility:visible !important;
    }
bringt mich auch nicht zum Erfolg :-( Hier nochmal der komplette Code:

Code:
<html>
<head>

<style>

.container {
    position:relative;
     width: 75%;
    }
   
@media (max-width: 750px) {
    .container {
        width: 100%;
        }
}

.container:before {
    content: "";
    display:block;
    padding-top: 100%;
    }

.grid-container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    }

.grid_3x3 {
    display: inline-block;
    height:100%;
    width:100%;
    position: relative;
    text-align:center;
    }

.block {
    float: left;
    top: 0;
    width: 33.3333%;
    height: 33.3333%;
    position: relative;
    display: inline-block;
    width: 33.3333%;
    height: 33.3333%;
    box-sizing: border-box;
    padding: 0px;
    overflow: hidden;
    /*Border:#000 solid 1px;*/
    background-color:#CCC;
    }

.block .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     }
   
div.img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size:contain;
    }
       
.grafik01 {background-image: url("grafik01.jpg");}
.grafik02 {background-image: url("grafik02.jpg");}
.grafik03 {background-image: url("grafik03.jpg");}
.grafik04 {background-image: url("grafik04.jpg");}
.grafik05 {background-image: url("grafik05.jpg"); background-color:#e31a20; color:#FFFFFF;}
.grafik06 {background-image: url("grafik06.jpg");}
.grafik07 {background-image: url("grafik07.jpg");}
.grafik08 {background-image: url("grafik08.jpg");}
.grafik09 {background-image: url("grafik09.jpg");}

nav a {
    display: flex;
    text-decoration: none;
    height:inherit;
    align-items: center;
    justify-content: center;
    color:#000;
    padding:10px;
    }
   
nav a:focus, nav a:hover, nav a:focus, nav a:hover {
    background-color:#0069b4;
    color:#FFFFFF;
    width:100%;
    padding:10px;
    }


</style>

</head>
<body>

<div class="container">
<div class="grid-container">
  <nav>
  <div class="grid_3x3">
    <div class="block"><div class="img grafik01"><a href="#">Lorem ipsum dolor sit amet.</a></div></div>
    <div class="block"><div class="img grafik02"><a href="#">Consetetur sadipscing elitr.</a></div></div>
    <div class="block"><div class="img grafik03"><a href="#">Sed diam nonumy eirmod tempor invidunt ut</a></div></div>
    <div class="block"><div class="img grafik04"><a href="#">Consetetur sadipscing elitr.</a></div></div>
    <div class="block"><div class="img grafik05"><h2>Sed diam nonumy eirmod tempor invidunt ut.</h2></div></div>
    <div class="block"><div class="img grafik06"><a href="#">Lorem ipsum dolor sit amet.</a></div></div>
    <div class="block"><div class="img grafik07"><a href="#">Sed diam nonumy eirmod tempor invidunt ut.</a></div></div>
    <div class="block"><div class="img grafik08"><a href="#">Lorem ipsum dolor sit amet.</a></div></div>
    <div class="block"><div class="img grafik09"><a href="#">Consetetur sadipscing elitr.</a></div></div>    
</div>
</nav>
</div>
</div>

</body>
</html>
 
Ich habe den Nav mal eine Höhe zugewiesen... geändert hatte sich aber nichts. Ich habe mal den Link auf transparent gesetzt... nun schaut es so aus, wie ich es gerne hätte ;-)

Code:
nav {
    height:100%;
    }

nav a {
    display: flex;
    text-decoration: none;
    color:transparent !important;
    /*visibility:hidden;*/
    height:inherit;
    align-items: center;
    justify-content: center;
    color:#000;
    padding:10px;
    }
    
nav a:focus, nav a:hover, nav a:focus, nav a:hover { 
    background-color:#0069b4;
    /*visibility:visible !important;*/
    color:#FFFFFF !important;
    width:100%;
    padding:10px;
    }

Eine weitere Frage hätte ich dennoch ;-) Oder sollte ich lieber einen neuen Post aufmachen?
jetzt, nachdem ich meine Quadrate mit "Leben" gefüllt habe, hätte ich eines der Kästchen gern als "over" voreingestellt, was sich dann aber wieder ganz normal ins Menü einordnet. Geht das?

Danke!
 
Eigentlich nicht so ganz... ;-) Vom Grunde aus ist es nur eine Grafik, die sich aus den 9 Feldern zusammensetzt und die einzelnen Punkte sollen bei Over hervorgehoben werden. Mit dem, von vornherein hervorgehobenen Feld wollte ich anregen, auch auf die anderen Felder zu klicken...
 
Super! funktioniert - auch in meiner WP-Installation

Eine Frage, des Verständnisses wegen... Wieso sind in den Styles
nav: a:focus
nav a:hover
doppelt angelegt?
 
Zurück
Oben