Question

I’ve added information to some boxes, which are alligned with the ‘float’ attribute.

The content of all those boxes together is too big to fit in the webpage, so I want to put those boxes on different pages, and to let the user choose which page he wants to view.

E.g: Choose page: 1 2 3… (last page)

The contents of these ‘pages’ must be in divisions.

For reference, see my css code:

.clear {
clear: both;
}

#over-ons .imagebox,
#over-ons .contentbox
{
background-color: #C4C4A6;
float: left;
margin: 0 10px 40px 0;
padding: 10px;
border: 2px solid black;
}

#over-ons .imagebox {
width: 100px;
text-align: center;
}

#over-ons .contentbox {
width: 200px;
}

Also, see my HTML code of the ‘boxes’ I mentioned:

<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
  Function: blablablabla<br />
  Name: blablabla<br />
  City: Breda<br />
  Education: HBO Informatica<br />
</div>

<div class="clear"></div>

How do I create the ability to let the user view 3 different boxes, depending on the page number he wants to see?

Edit:

My current solution looks like this, only nothing happens when I click ‘page 2’:

<?php
//Vraag pagina op
$page = 1;
if (isset($_POST['page']) && is_numeric($_POST['page']))
$page = $_POST['page'];
?>

<? if ($page == 1) { ?>
<div class="imagebox"><img src="media/images/overons/pieter.png" /></div>
<div class="contentbox">
  Functie: Bedrijfsleider<br />
  Naam: Pieter<br />
  Stad: Deurne<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/patrick.png" /></div>
<div class="contentbox">
  Functie: Verkoper<br />
  Naam: Patrick<br />
  Stad: Roosendaal<br />
  Opleiding: HBO Bedrijfskundige Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/rick.png" /></div>
<div class="contentbox">
  Functie: Ontwikkelaar<br />
  Naam: Rick Gommers<br />
  Stad: Oosterhout<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>
<? } 
else if ($page == 2) { ?>
<div class="imagebox"><img src="media/images/overons/bas.png" /></div>
<div class="contentbox">
  Functie: Salesmanager<br />
  Naam: Bas<br />
  Stad: Breda<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>

<div class="imagebox"><img src="media/images/overons/robbert.png" /></div>
<div class="contentbox">
  Functie: Administrateur<br />
  Naam: Robbert Tuerlings<br />
  Stad: Goirle<br />
  Opleiding: HBO Bedrijfskundige Informatica<br />
</div>

<div class="clear"></div>    

<div class="imagebox"><img src="media/images/overons/timothee.png" /></div>
<div class="contentbox">
  Functie: Implementatie Technicus<br />
  Naam: Timothee<br />
  Stad: Breda<br />
  Opleiding: HBO Informatica<br />
</div>

<div class="clear"></div>
<? } 
else { ?>
<div class="contentbox">
You didn't select a proper page!
</div>
<? } ?>

Answer 1

Imagine your current page is called index.php. So first of all you want to create the links to your pages in your HTML as the following:

<a href="index.php?page=1">Page 1</a>
<a href="index.php?page=2">Page 2</a>
<a href="index.php?page=3">Page 3</a>

And for a clear code you can simply put the content of your “boxes” in an array and then output the corresponding entry for the page:

<?php
   $content = array{ "Page 1 data", "Page 2 data", "Page 3 data" };

   //Fetch the page
   $page = 1;
   if (isset($_GET['page']) && is_numeric($_GET['page']))
      $page = $_GET['page'];
?>
<div class="contentbox">
   <? echo $content[($page - 1)]; ?>
</div>

Another solution (less easy to read and to maintain, but easier if your content is really complex) you can simply fetch the page number and in a regular if else display the box they requested.

<?php
   //Fetch the page
   $page = 1;
   if (isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0)
      $page = $_GET['page'];
?>

<? if ($page == 1) { ?>
<div class="contentbox">
   Your first box for page 1
</div>
<? } 
   else if ($page == 2) { ?>
<div class="contentbox">
   Your second box for page 2
</div>
<? }
   else if ($page == 3) { ?>
<div class="contentbox">
   Your third box for page 3
</div>
<? } 
   else { ?>
<div class="contentbox">
   You didn't select a proper page!
</div>
<? } ?>

But ye, there are 1001 ways to do this. It really depends on your needs and the way you want to do it. The more you hardcode, the uglier the code usually gets.. 😉