Responsive Anordnung vom 3x3 quadratischen DIVs

kercon · 12 Juli 2019

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!

basti1012 · 12 Juli 2019

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 ?

Sailor · 13 Juli 2019

Mit FlexBox eine leichte Übung - Tabellen Layout wäre eher weniger zu empfehlen, da Tabellen bei ihrem responsiv Verhalten eher schlecht zu manipulieren sind.

kercon · 15 Juli 2019

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>

kercon · 15 Juli 2019

Leider nicht... Habs gefunden nachdem wusste, nach was ich suchen muss...

kercon · 15 Juli 2019

Dankeschön!

kercon · 15 Juli 2019

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>

kercon · 16 Juli 2019

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!

kercon · 16 Juli 2019

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...

kercon · 16 Juli 2019

Genau... und sich wieder ganz normal "einreihen"

kercon · 16 Juli 2019

Vielen Dank! Woher hast Du gewusst, dass ich "7" hervorheben will ? ;-)

Leider funktioniert das mit dem Rücksetzen nicht... Ich habe den Script als externe Datei im <head> eingebunden

Sempervivum schrieb:
for (var i = 0; i < thelinks.length; i++) {

Mein Editor bemängelt die "0"...

kercon · 16 Juli 2019

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?

kercon · 16 Juli 2019

nochmals vielen Dank! Jetzt habe ich's so, wie ich es mir vorgestellt habe.

Responsive Anordnung vom 3x3 quadratischen DIVs

kercon

Mitglied

basti1012

Senior HTML'ler

Sailor

Aktives Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

kercon

Mitglied

Neueste Beiträge