PHP Map with Parallelogram shapes
Map with Rhomb cells

In this page I added PHP and CSS code snippets that can be used to create dynamically a Map with PHP.
CSS is used to display the map cells in different shapes: rectangles, parallelograms, and rhombs.
- The cells are <div> elements added in <blockquote> tags for each row. You can define the number of cels and columns.

Simple PHP Map with Rectangle shapes

<?php
// https://coursesweb.net/php-mysql

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rectangles</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abcdef;
 border: 1px solid #000;
 font-weight: bold;
 text-align: center;
 line-height:400%;
 font-size: 20px;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like in this image:
            PHP Map - Rectangles

PHP Map with Parallelogram shapes

<?php
// https://coursesweb.net/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'">'. ($addtxt == 1 ? $i : '') .'</div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Parallelograms</title>
<style type="text/css">
div.map_cell{
 float: left;
 margin:1px 1px 0 0;
 width: 100px;
 height: 75px;
 background: #abefcd;
 -webkit-transform: skew(30deg);
 -moz-transform: skew(30deg);
 -o-transform: skew(30deg);
 font-weight: bold;
 font-size: 20px;
 text-align: center;
 line-height: 350%;
}
blockquote.rw1 {
 margin: 0 0 0 99px;
}
blockquote:first-child {
 margin: 0 0 0 45px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Parallelograms

Map with Rhomb cells

<?php
// https://coursesweb.net/php-mysql/

$nr = 20;                   // HERE add the number of cells (php will auto complete the last row wih the remaining cells)
$cols = array(4, 5);        // HERE add the number of alternate cols to each row
$css_class = 'map_cell';        // css class added in each cell
$addtxt = 1;                // when is 1 add text in cell (cell number)
$map_html = '';             // stores the returned html code

// variables used to alternate the number of cells to each row
$x = 1;
$b = $cols[$x];

// creates the html code
for($i=1; $i<=$nr; $i++) {
  if($b == $cols[$x % 2]) {
    $blk1 = '<blockquote class="rw'. ($x % 2) .'">';
    $blk2 = '</blockquote>';
    $use = $x % 2;
    $b = 1;
    $x++;
  }
  else {
    $b++;
    $blk1 = '';  $blk2 = '';
  }
  $map_html .= $blk1 .'<div class="'. $css_class .'"><div>'. ($addtxt == 1 ? $i : '') .'</div></div>'. $blk2;

  // adds the remaining cells to complete the row
  if($addtxt == 1 && $i == $nr) {
    $addtxt = 0;
    $nr += $cols[($use + 1) % 2] - $b;
  }
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PHP Map - Rhombs</title>
<style type="text/css">
div.map_cell {
 position: relative;
 float: left;
 width: 0;
 height: 0;
 margin-top: -49px;
 border: 50px solid transparent;
 border-bottom: 55px solid #05ed08;
}

div.map_cell:after {
 position: absolute;
 left: -50px;
 top: 55px;
 width: 0;
 height: 0;
 border: 50px solid transparent;
 border-top: 55px solid #05ed08;
 content: '';
}

div.map_cell div {
 position: relative;
 margin: 45px auto 0 -10px;
 font-weight: bold;
 font-size: 20px;
 z-index: 888;
 text-align: center;
}
blockquote.rw1 {
 margin: 0 0 0 90px;
}
blockquote {
 clear: both;
}
</style>
</head>
<body>
<?php echo $map_html; ?>
</body>
</html>
- Result a map like this:
            PHP Map - Rhombs

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute specifies the HTTP method (GET, POST) used to submit the form-data?
action method value
<form action="script.php" method="post"> ... </form>
Which CSS property allows to add shadow to boxes?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Which function removes the first element from an array?
pop() push() shift()
var fruits = ["apple", "apricot", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicate the function that can be used to check if a PHP extension is instaled.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO is available."
Dynamically PHP Maps with Rectangle, Parallelogram, and Rhomb Shapes

Last accessed pages

  1. Register and show online users and visitors (30283)
  2. jQuery ajax() method (16137)
  3. HTML Course - Free Lessons (12775)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (51026)
  5. Node.js Move and Copy Directory (6000)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (720)
  2. Contact page - CoursesWeb (703)
  3. Tabs effect with CSS (700)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (231)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (172)