Primeiro de tudo:Como você deseja buscar vários tópicos do banco de dados, você deve remover o
LIMIT 1 da consulta e if($j >= 1) continue; no loop foreach, pois ambos estão restringindo sua saída a apenas 1 tópico. Em seu loop foreach para
$toppics (ortografia correta:tópicos;P) você atualmente apenas ecoa uma marca de âncora (link), mas o que você quer é (usar suas palavras aqui) um 'bloco'. Qualquer que seja a aparência desse bloco, o local para defini-lo é dentro desse loop foreach. Agora eu não sei quais elementos, classes ou estilos você usa/quer usar, então vou fazer um exemplo de um bloco que consiste em um título e abaixo dele o link:
//rename $topic keys to the names of your DB columns
foreach($toppics as $topic){
echo '<div>';
echo '<h3>'.$topic['title'].'</h3><br>';
echo '<a href="#section'.$topic['id'].'">'.$topic['link_text'].'</a>';
echo '</div><br>';
}
Eu sei que minha solução não será exatamente como sua imagem fornecida, mas deve mostrar como e onde você pode construir seus blocos.
Eu acho que esse problema deveria ter sido facilmente solucionado quando você conhece o básico de HTML, então eu realmente recomendo que você aprenda um pouco mais sobre HTML antes de trabalhar em grandes projetos.
Editar após a edição da pergunta:
Como mencionei na minha resposta,
my solution will not look exactly like your given image porque I don't know what elements, classes or stylings you use . Seu problema restante agora é o uso das tags html, classes e estilos corretos. Parece que o elemento pai das divs geradas é estilizado da maneira que você deseja que os blocos únicos se pareçam.
Então, o que você pode fazer é remover o elemento pai e usá-lo como uma substituição da div gerada, assim :
<div class="col-md-6">
<div class="well dash-box">
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Stel jezelf voor</h2>
<h5><a href="https://tom.lbmedia.nl/onderwerp"> Laat wetn wie jij en je business zijn</a></h5>
</div>
</div>
<div class="col-md-6">
<!--<div class="well dash-box">-->
<h2><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 12</h2>
<?php
$toppics = $app->get_topics();
$i = 0;
foreach($toppics as $topic){
echo '<div class="well dash-box">';
echo '<h3>'.$topic['onderwerp'].'</h3><br>';
echo '<a href="#section' . $i++ . '">' .$topic['omschrijving'].'</a>';
echo '</div><br>';
}
?>
<!--</div>-->
</div>
nota lateral :não concordo com a construção do atributo href #section1. Ao construir essas seções, você teria que saber o índice exato daquele loop foreach anterior. Em vez disso, use algum atributo do próprio tópico, talvez seu ID, título ou descrição (como fiz no primeiro bloco de código). Dessa forma, quando você estiver construindo as seções, poderá saber facilmente como definir o atributo id dos elementos.
