I'm developing an application that contains a table made by div. The divs are filled according to the results database.
As you can see in the image below.
However, if I put one more item on the bench, just disrupting the entire table. What I would do is to put a rod horizontally so that it could rotate it and so see the other items in the database without messing up the structure.
CODE
CSS
#fundo {
display: block;
height: 550px;
margin-left: -3%;
overflow: scroll;
overflow-y: hidden;
width: 1150px;
}
.vacina, .dose, .aplicacao {
background-color: #D3D3D3;
border-radius: 5px;
float: left;
height: 90px;
margin-top: 6px;
margin-left: 6px;
position: relative;
width: 100px;
}
.vacina {
height: 50px;
}
PHP
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
///////////////////////////////////////////////
////////////////// DIV VACINA /////////////////
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
}
///////////////////////////////////////////////
////////////////// FIM DIV VACINA /////////////
///////////////////////////////////////////////
////////////////// DIV DOSE ///////////////////
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
///////////////////////////////////////////////
////////////////// FIM DIV DOSE ///////////////
///////////////////////////////////////////////
////////////////// DIV APLICACAO //////////////
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
///////////////////////////////////////////////
////////////////// FIM DIV APLICACAO /////////////
}
As you can see in the previous image, has 9 div class Vacina.
If I add a div class Vacina the most, will mess up the table.
What I'd like is to insert more than 9 div class Vacina causing the background div (div class includes all div) increase in width, but leaving it the same way the image, just putting a scroll bar horizontally to display whole div.
If I understood you correctly, I'd try this:
To #fundo, add
white-space: nowrap;
And I replaced float: left; with:
display: inline-block;
Maybe that's what you're looking for.
EDIT:
Okay, I've built an example from scratch (but using javascript, not php, I can't test php atm): JSFiddle.
It's a bit messy but you should be able to code it in PHP if you like to.
Let me know if you've got trouble with this.
EDIT 2:
Just to have it in the answer (not just in its comments), the final solution is: this JSFiddle.
HTML + PHP
<?php
include_once("sessao.php");
if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
header("Location:index.html");
}
else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
header("Location:funcionario.php");
}
?>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Vacina Digital - Cadastrar Vacinação</title>
<script type="text/javascript" src="template/js/script.js"></script>
<link rel="stylesheet" href="template/css/reset.css">
<link rel="stylesheet" href="template/css/fonts.css">
<style>
body {
background-color: #fdfdfd;
overflow-y: auto;
}
#form {
margin-left: 50px;
padding-left: 7%;
padding-top: 50px;
padding-bottom: 10px;
margin-right: 50px;
border: 1px solid #0F935A;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
#form h1 {
text-align: center;
margin-right: 150px;
font-family: "RobotoCondensed";
font-size: 30px;
}
</style>
</head>
<body>
<?php
include_once 'menufuncionario.php';
?>
<div id="form">
<fieldset>
<?php
include_once("db.php");
if(isset($_POST['cns'])) {
$cns = $_POST['cns'];
$_SESSION['paciente'] = $cns;
}
else{
$cns = $_SESSION['paciente'];
}
$sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM populacao WHERE codigoCns = ".$cns;
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
$ds2 = mysql_query($sql2);
$linha=mysql_fetch_assoc($ds2);
$linha2=mysql_fetch_assoc($ds1);
$data_nasc = $linha2['data'];
$data_nasc=explode("/",$data_nasc);
$data=date("d/m/Y");
$data=explode("/",$data);
$anos=$data[2]-$data_nasc[2];
if ($data_nasc[1] > $data[1]) {
$anos = $anos-1;
} if ($data_nasc[1] == $data[1]) {
if ($data_nasc[0] <= $data[0]) {
$anos = $anos;
} else {
$anos = $anos-1;
}
} if ($data_nasc[1] < $data[1]) {
$anos = $anos;
}
$data2=date("d/m/Y");
echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
/*echo "
<div id='caderneta' style='margin-left:-6%'>
";*/
include_once 'caderneta.php';
echo "
</div>";
} else {
echo "<h1>CNS Inválido</h1><br><br>
<center><a href='javascript:window.history.go(-1)'><button style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
";
}
}
?>
</div>
</body>
</html>
Caderneta
<html>
<head>
<link rel="stylesheet" href="template/css/fonts.css">
<style type="text/css">
#fundo {
min-width: 800px;
display: block;
overflow: scroll;
overflow-y: hidden;
margin-left: -3%;
height: 550px;
white-space: nowrap;
}
#pinguim, .vacina, .dose, .aplicacao {
width: 100px;
height: 90px;
background-color: #D3D3D3;
margin-top: 6px;
margin-left: 6px;
border-radius: 5px;
position: relative;
float: left;
}
#pinguim, .vacina {
height: 50px;
}
.vacina, .dose{
background: green;
font-family: RobotoCondensed;
font-size: 14pt;
text-align: center;
color: #ffffff;
}
.vacina{
padding-top: -14px;
line-height: 15px;
}
.dose, .aplicacao{
margin-top: -32px;
}
.dose{
line-height: 29px;
}
.aplicacao, .fonte {
font-family: "RobotoLight";
text-align: center;
}
</style>
</head>
<body>
<div id = "fundo">
<div id = "pinguim">
</div>
<?php
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
$k = 0;
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
}
echo"</div>";
}
}
?>
</div>
</div>
</body>
</html>
Related
I'm trying to create a square, created of smaller red and blue squares. The problem is, when i want to use something wierd happens, every new line is off by 20 px.
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
</style>
<?php
for($a=0;$a<4;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
How it looks like
Using relative position is the problem. Use display:inline-block instead.
Also you can accomplish this only using 2 for loops.
<style>
.box{
background-color: red;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
</style>
<?php
for($a=0;$a<8;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
The proper way to break float is to use clear style attribute. For example add this to your styles:
br{
clear:both;
}
<br /> will now reset the float of the divs after it, so the next ones will be in new line.
Example in here.
Please note that class attribute should be in quotes, your code is not a valid HTML. To make it valid use one of these:
echo "<div class='box'> </div>";
or
echo '<div class="box"> </div>';
From my point of view you have to add one main div as like below code and have to add float left and width to 100%;
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.main {
float:left;
width:100%;
}
</style>
<?php
for($a=0;$a<4;$a++){
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
}
?>
I have HTML in my PHP file, because I'm using data from a database to display on my website. (This is my first time using PHP so my knowledge is really little)
My question is how I could change my image source depending on the value from the database.
The depending value I'm talking about is called = SENT_NUMBER_1
<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";?>
<html>
<head>
<style>
div.image{
transform: rotate(90deg);
width:100px;
height:200px;
background: transparent;
position: absolute;
top:30%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content:url(photo) // This is the url I'm wanting to change into either: Empty.png / 25.png / 50.png / 75.png /100.png || like = content:url(/50.png)
}
</style>
<div class="image"></div>
i also have something like this but I don't know if this works, and where to put it.
if(SENT_NUMBER_1 <= 10){
photo = "10.png"
}
elseif(SENT_NUMBER_1 >= 11 && <=25){
photo = "25.png"
}
elseif(SENT_NUMBER_1 >= 26 && <=49){
photo = "50.png"
}
elseif(SENT_NUMBER_1 >= 50 && <=74){
photo = "75.png"
}
elseif(SENT_NUMBER_1 >= 75 && <=100){
photo = "100.png"
}
Here is a screenshot from the [website], the image I'm wanting to change is the battery you see on the screenshot.
Whole code for if I missed something
<?php
//This line will make the page auto-refresh each 15 seconds
$page = $_SERVER['PHP_SELF'];
$sec = "15";
?>
<html>
<head>
<link rel="shortcut icon" href="/favicon-16x16.ico" type="image/x-icon">
<title>Rattengifmelder</title>
<style>
#font-face {
font-family: Asket Extended; src: url('AsketExtended-Light.otf');
font-family: Asket Extended; font-weight: bold; src: url('AsketExtended-Light.otf');
}
body{
height: 200vh;
}
tbody{
text-align: center;
}
td{
background-color: transparent;
width: 70px;
height: 70px;
}
table, th, td{
font-size: 30px;
width: 100px;
margin-left: auto;
margin-right: auto;
background: transparent;
border: 10px solid white;
font-family: 'Asket Extended', sans-serif;
}
div.image{
transform: rotate(90deg);
width:100px;
height:200px;
background: transparent;
position: absolute;
top:30%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content:url(/100.png)
}
div.image2{
width:100px;
height:200px;
background: transparent;
content:url(/Empty.png)
}
div.image3{
width:100px;
height:200px;
background: transparent;
content:url(/Empty.png)
}
.center{
position: sticky;
top: 0px;
text-align: center;
font-family: 'Asket Extended', sans-serif;
font-size: 50px;
font-weight: bold;
padding-top: 50px;
background-color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: white;
color: white;
text-align: center;
border-top: 1px solid lightgrey ;
}
div.container {
float: left;
margin: 100px;
padding: 20px;
width: 100px;
}
.menu{
position: absolute;
left: 70px;
top: 65px;
width:20px;
height:20px;
content:url(/menu.png)
}
.battery{
position: absolute;
left: 93%;
top: 50px;
width: 30px;
height:60px;
transform: rotate(90deg);
content:url(/100.png)
}
.one{
}
.two{
}
.three{
}
</style>
<!--//I've used bootstrap for the tables, so I inport the CSS files for taht as well...-->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<?php
include("database_connect.php"); //We include the database_connect.php which has the data for the connection to the database
// Check the connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Again, we grab the table out of the database, name is ESPtable2 in this case
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
//Now we create the table with all the values from the database
//loop through the table and print the data into the table
while($row = mysqli_fetch_array($result)) {
$column1 = "RECEIVED_BOOL1";
$column2 = "RECEIVED_BOOL2";
$column3 = "RECEIVED_BOOL3";
$column4 = "RECEIVED_BOOL4";
$column5 = "RECEIVED_BOOL5";
}
?>
<div class="center">
<div class="menu"></div>
<div class="battery"></div>
<p>Rattengifmelder</p>
</div>
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class='active'>
<td style='color: grey;'>Grasveld achter</td>
</tr>
";
while($row = mysqli_fetch_array($result)) {
$cur_sent_bool_1 = $row['SENT_BOOL_1'];
$cur_sent_bool_2 = $row['SENT_BOOL_2'];
$cur_sent_bool_3 = $row['SENT_BOOL_3'];
if($cur_sent_bool_1 == 1){
$label_sent_bool_1 = "label-success";
$text_sent_bool_1 = "Actief";
}
else{
$label_sent_bool_1 = "label-danger";
$text_sent_bool_1 = "Inactief";
}
/*echo "<tr class='info'>";
$unit_id = $row['id'];
echo "<td>" . $row['id'] . "</td>"; */
echo "<td>
<span class='label $label_sent_bool_1'>"
. $text_sent_bool_1 . "</td>
</span>";
}
echo "</table>";
?>
<?php
include("database_connect.php");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM ESPtable2");//table select
echo "<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class='active'>
</tr>
";
while($row = mysqli_fetch_array($result)) {
echo "<tr class='info'>";
echo "<td style='background-color: transparent;'>" . $row['SENT_NUMBER_1'] . "% </td>";
echo "</tr></tbody>";
}
echo "</table>
<br>
";
?>
<div class="footer">
<p></p>
</div>
<div class="image"></div> // this is where the image is displayed
I didn't get where you are getting value of SENT_NUMBER_1 in your php code ??
then
SENT_NUMBER_1 should be $SENT_NUMBER_1
photo should be $photo
if($SENT_NUMBER_1 <= 10){
$photo = "10.png";
}
if($SENT_NUMBER_1 >= 11 && $SENT_NUMBER_1 <=25){
$photo = "25.png";
}
if($SENT_NUMBER_1 >= 26 && $SENT_NUMBER_1 <=49){
$photo = "50.png";
}
if($SENT_NUMBER_1 >= 50 && $SENT_NUMBER_1 <=74){
$photo = "75.png";
}
if($SENT_NUMBER_1 >= 75 && $SENT_NUMBER_1 <=100){
$photo = "100.png";
}
and then
<div class="image"><img src="<?php echo $photo;?>"></div> // this is where the image is displayed
also declare full path of image.
e.g.
$photo = 'imagefolder/100.png';
I got some strange problems with my php-code
when I try to output this echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
sometimes it don´t load the css, even not the div -tags, just the plain "Menu" string
and it´s always printed before my table -tags
how is this possible?
PHP-Code:
<?php
$root_dir = $_SERVER['PHP_SELF'];
echo "<link rel='stylesheet' href='style.css' type='text/css'>";
if (!isset($_GET['command'])) {
echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=show'\">Personaldaten anzeigen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=new'\">neue Person anlegen</div>";
//echo "<div class='button' onclick=\"javascript:location.href='$baseURI?command=work'\">Personaldaten bearbeiten</div>";
} else {
if ($_GET['command'] == "show") {
openSQL();
$sqlbefehl = 'select * from kontakt';
#mysql_query("SET NAMES 'utf8'");
$ergebnis = #mysql_query($sqlbefehl); // SQL-Befehl an die Datenbank schicken
$spalten = #mysql_num_fields($ergebnis);
echo "<table class='style'>";
echo "<tr>";
for ($i = 0; $i < $spalten; $i++) {
echo "<th class='th'>" . mysql_field_name($ergebnis, $i) . "</th>";
}
echo "</tr>";
while (false != ($row = mysql_fetch_row($ergebnis))) {
echo "<tr>";
for ($i = 0; $i < sizeof($row); $i++) {
echo "<td>$row[$i]</td>";
}
echo "</tr>";
}
echo "</table";
}
echo "<div class='button menu' onclick=\"javascript:location.href='$baseURI'\">Menu</div>";
}
function openSQL()
{
$server = "127.0.0.1";
$user = "root";
$passwort = "";
$db = "schule";
$dblink = #mysql_connect($server, $user, $passwort);
if (!#mysql_select_db($db)) {
echo "<br>Keine Verbindung zur Datenbank $db möglich!";
echo "<br>" . mysql_error();
die();
}
}
?>
CSS-Code:
body{
font-family: Verdana;
color: #fff;
background-color: #000;
}
.style{
border-collapse: collapse;
text-align: center;
}
.style table,.style th,.style td {
border: 1px solid white;
}
.style td {
overflow: hidden;
font-size: 12px;
}
.button{
height: 68px;
width: 200px;
border: 3px orange solid;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 5px;
vertical-align: center;
font-size: 24px;
margin-top: 15px;
background-color: #000;
}
.menu{
height: 36px;
width: 75px;
}
.delBtn{
height: 36px;
width: 95px;
}
.del{
background-image: url(del.png);
background-repeat: no-repeat;
width:24px;
height: 24px;
background-size: 25px 25px;
}
.edit{
background-image: url(edit.png);
background-repeat: no-repeat;
background-position: center;
width:24px;
height: 24px;
background-size: 40px 40px;
}
So Im answering my own Question. It was the missing ">" at the closing table-tag. Since I fixed the missing character, the code now work properly.
Thanks for all of your effort <3
I am tryig to make a photo gallery on my website. I have a small problem with making link on images I have in for loop
Since You requested full code here it is:
<html>
<head>
<meta charset="UTF-8">
<title>Fotečky</title>
<style>
.foto{
position: relative;
display: inline-block;
text-align: center;
width: 200px;
border: solid;
margin-left: 6%;
}
#date{
position: relative;
text-align: center;
width: 200px;
}
a { color: #000000; text-decoration: none; }
.menu {
background-color: #FF9933;
height: 10%;
line-height: 300%;
}
</style>
</head>
<body>
<div class="menu">
<center><h2>Upload photo</h2></center>
</div>
<br>
<?php
mb_internal_encoding("UTF-8");
$connect = mysql_connect("","","") or die("Couldn't connect");
mysql_set_charset('utf8',$connect);
mysql_select_db("") or die("Couldn't find db");
$SQLCommand = "SELECT * FROM foto";
$result1 = mysql_query($SQLCommand); $database = array(); $index = 1; // make a new array to hold all your data
while($row1 = mysql_fetch_assoc($result1)) // loop to give you the data in an associative array so you can use it however.
{
$database[$index] = $row1;
$index++;
}
for ($i=1; $i < count($database); $i++) {
echo '<a href="photo.php?id='.$database[$i]['id'].'">';
echo '<div class="foto">';
echo '<img title="'.$database[$i]['description'].'" alt="'.$database[$i]['description'].'" src="data:image/jpg/png/jpeg;base64,'.base64_encode( $database[$i]['image'] ).'" width="200px"/>';
echo "<div id='date'>".$database[$i]['uploaded']."</div>";
echo '</div>';
echo '</a>';
if ((($i % 4) == 0) && ($i != 0)) {
echo '<br><br>';
}
}
?>
</body>
I want to display image one by one and be able to click on them -> link that brings me to photo.php?id= with id of that image. (id is from 1 to n)
db sructure:
enter image description here
I am having trouble figuring out the logic in creating a grid using DIVs. 3 Columns (the $count variable), then fill those columns with however many boxes. ($totalBoxes)
Below is an example of what I would like to accomplish.
I have tried using logic on repeated regions for tables, but I don’t know if that is working right. Most of my code spits out something like this screenshot:
Can someone point me where my logic is wrong?
CSS
<style type="text/css">
#container {
background-color: #FFC;
height: 750px;
width: 900px;
padding: 5px;
}
#container #column {
background-color: #FC6;
width: 200px;
padding: 5px;
float: left;
margin: 5px;
}
#container #column #box {
background-color: #9C3;
height: 150px;
width: 150px;
margin: 5px;
}
</style>
PHP
<div id="container">
<?php
$count = 3;
$totalBoxes = 8;
?>
<?php for ($i = 1; $i <= $totalBoxes; $i++) {
if ($i % $count == 1){ ?>
<div id="column"> Column <?php echo $i; ?>
<?php } else { ?>
<div id="box"> <?php echo $i; ?> </div>
</div>
<?php } } ?>
</div>
You have error in else thread because you have two closing divs in it.
Also you can't have repeated id
I can't understand do you want 3 columns or 3 rows? If you want 3 columns that your code will not work on totalBoxes mote than 9 (it will produce more columns).
I suggest you to use following logic:
<style>
.column {float: left; padding: 10px; width: 100px; border: solid thin red; background-color: green; margin-right: 5px}
.box {width: 100%; height: 100px; background-color: white; margin-bottom: 5px; }
</style>
<?php
$boxes_in_column = ceil($totalBoxes / 3);
echo('<div class="column">Column 1');
for ($i = 1; $i <= $totalBoxes; $i++) {
echo('<div class="box">'.$i.'</div>');
if (($i % $boxes_in_column) === 0){
echo('</div><div class="column">Column '.(ceil($i / $boxes_in_column)+1));
}
}
echo('</div>');
?>
It will produce extra empty column if you have total boxes divided by 3 without remainder. So try to fix it yourself.
Horizontal fill
<style>
.box1 {display: inline-block; width: 100px; height: 100px; background-color: white; margin: 5px; }
.parent {background-color: blue; border: solid thin red; width: 330px}
</style>
<?php
$totalBoxes = 13;
echo '<div class="parent">';
for ($i = 1; $i <= $totalBoxes; $i++) {
echo('<div class="box1">'.$i.'</div>');
}
echo '</div>';
?>