Na ganz einfach zumindest die Lösung die ich dir hier geb.
Du fügst einfach folgenden Code in deiner index.php vom Layout.
<div class="container">
<div class="row">
<div class="col-lg-4">
<?=$this->getBox('article', 'article'); ?>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4">
<?=$this->getBox('forum', 'forum'); ?>
</div>
</div>
</div>
Wen du ein bisschen was lernen willst dann hier der weg bis zur Umsetzung.
Bootstrap was wir verwenden um Layouts in Mobile, Tablet und Desktop ordentlich darstellen zu lassen ist ein Grid System welches bis zu 12 spalten geht um die volle breite zu erhalten.
Also brauchen wir zuerst die Eingrenzung der breite welche wir durch den container bekommen.
<div class="container"></div>
Anschließend brauchen wir ein row Kinderelement im container Elternelement um die Spalten horizontal darstellen zu können
<div class="container">
<div class="row"></div>
</div>
hierwiederrum brauchen wir weitere Kinderelement für die Spalten.
Du möchtest 3 Boxen nebeneinander also müsste man einfach 12 durch 3 rechnen was 4 ergibt.
Also legen wir 3 Spalten col- mit einer breite von jeweils 4 col-lg-4 an.
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
In diesen fall hab ich col-lg verwendet damit die Boxen in Mobile und Tablet untereinander angezeigt werden und ab Desktop nebeneinander.
Nun müssen wir einfach nur noch die fertigen Boxen von den Modulen nehmen welche man im Layout mit $this->getBox('moduleKey', 'boxKey') einbinden kann.
<div class="container">
<div class="row">
<div class="col-lg-4">
<?=$this->getBox('article', 'article'); ?>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4">
<?=$this->getBox('forum', 'forum'); ?>
</div>
</div>
</div>
Für die dritte Box Favorites Games gibt es so noch kein Modul bzw Box und diese zu programmieren schaffe ich gerade Zeit technisch nicht.
Hoffe konnte dir trotzdem damit ein bisschen weiter helfen
Grob stylen bzw. voneinander trennen könnte man es zb. so
.v-head-boxes .container {
border: 2px solid #fff;
}
.v-head-boxes .container .row {
display: flex;
flex-direction: column;
}
@media (min-width: 1200px) {
.v-head-boxes .container .row {
flex-direction: row;
}
}
.v-head-boxes .container .row div {
border-bottom: 2px solid #fff;
}
@media (min-width: 1200px) {
.v-head-boxes .container .row div {
border-right: 2px solid #fff;
border-bottom: 0;
}
}
.v-head-boxes .container .row div:last-child {
border-bottom: 0;
}
@media (min-width: 1200px) {
.v-head-boxes .container .row div:last-child {
border-right: 0;
}
}
Wobei wir dann auch die die Klasse v-head-boxes noch mit hinzufügen müssen um nur den bereich der Boxen zu Stylen und nicht zb alles wenn wir unseren Style auf den container und row anwenden.
<div class="v-head-boxes">
<div class="container">
<div class="row">
<div class="col-lg-4">
<?=$this->getBox('article', 'article'); ?>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4">
<?=$this->getBox('forum', 'forum'); ?>
</div>
</div>
</div>
</div>
Natürlich gibt es oft mehrere Lösungen um sein Ziel zu erreichen und dieser ist einer davon.
Zuletzt modifiziert von Siggi am 23.09.2018 - 21:53:04
soweit klappt elles nach Plan denk ich 
