I am trying to make a webpage which displays rectangles of different sizes in a grid.
The code below works to display 3 rectangles all height: 50px and width equal to $rectangleWidth = "200px".
<html>
<head>
<style>
<?php
$rectangleWidth = "200px";
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
<?php echo ".rectangleRed {
height: 50px;
width: " . $rectangleWidth . ";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}";
?>
</style>
</head>
<body>
<div class="grid-container">
<?php
for ($x = 0; $x < 3; $x++) {
echo '<div><pre class="rectangleRed"></pre></div>';
}
?>
</div>
</body>
</html>
I have an array with three different widths $rectangleWidths = ["100px", "200px", "300px"]. I am struggling to make the rectangles change size according to the widths.
I tried to put the CSS code for .rectangleRed { } into a php block with the width as a variable so that the width of the rectangle is redefined each increment of the loop. This didn't work. The CSS code was displayed on screen instead of redefining the width of the rectangle. Here is the code from my attempt:
<html>
<head>
<style>
<?php
$rectangleWidths = ["100px", "200px", "300px"];
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
</style>
</head>
<?php
for ($x = 0; $x < 3; $x++) {
$rectangleWidth = $rectangleWidths[$x];
echo "<style><head>.rectangleRed {
height: 50px;
width: \"" . $rectangleWidth . "\";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}</style></head>";
echo '<body><div class="grid-container"><div><pre class="rectangleRed"></pre></div></div></body>';
}
?>
</html>
My only guess for why this doesn't work is that maybe I incorrectly used the , , and tags. I'm not sure how I could do this differently to make it work.
I looked at similar questions including Apply CSS Styling to PHP output and How to add CSS styles to a PHP code within a loop?. The solutions for those questions did not resolve my issue.
.rectangkeWidth100etc. Than add that specific class to the rectangle that needs it.rectangleRed.w100 { width: 100px; } .rectangleRed.w200 { width: 200px; }etc. Then use those in the class like<pre class="rectangleRed w200"...... as an example.<pre>does now have a class attribute