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.
Related
i need to loop the code so i tried to print it from php
i can't get it to work
<html>
<head>
<style>
.percentbar { background:#CCCCCC; border:1px solid #666666; height:10px;
}
.percentbar div { background: #28B8C0; height: 10px; }
</style>
</head>
<body>
<?php
$scale=1.0
$procentused[0]=3;
$scale100=$scale*100;
$cpu1g=round($procentused[0]*$scale);
echo '<div class="percentbar" style="position:relarive; width:10px;
height:'.$scale100.'px;">';
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"></div></div>';
?></body></html>
I expect the output to be the vertical "usage bar"
From this code i get only background of the bar
It's modified code to be vertical from
https://joshuawinn.com/quick-and-simple-css-percentage-bar-using-php/
I don't have reputation to post img unfortunatly
Edit 1: repaired syntax errors from lukasz's answer , still not working
Edit 2: added more details of result
You have some syntax errors in your code:
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"</div</div>';
should be:
echo '<div style="width:10px; position: absolute; bottom: 0;
height:'.$cpu1g.'px;"></div></div>';
Found the problem
position:relarive
should be
position:relative
I think this is a more css + php elegant solution for the vertical bar using flexbox. The color area will automatically scale to the .percentbar element. There is no need to calculate the number of pixel of the .used element.
<?php
// an array of percentage inputs
$percentUsedArray = [30, 20, 50, 80, 12, 19, 5, 3, 1, 0, 70, 80, 45, 56];
?>
<html>
<head>
<style>
.percentbar-container {
display: flex;
height: 100px;
align-items: stretch;
}
.percentbar {
background: #CCCCCC;
border: 1px solid #666666;
display: flex;
flex-direction: column-reverse;
align-items: stretch;
width: 10px;
}
.percentbar .used {
height: 0;
background: #28B8C0;
}
.percentbar .unused {
flex: 1;
background: transparent;
}
</style>
</head>
<body>
<div class="percentbar-container">
<?php foreach ($percentUsedArray as $percentUsed): ?>
<div class="percentbar" title="<?php echo $percentUsed; ?>%">
<div class="used" style="height: <?php echo $percentUsed; ?>%;"></div>
<div class="unused"></div>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
I want to find a way to make hexagons be a good looking container for text at all window widths. At this point it only looks alright at a few window widths. I'd like to make it so that I can have code that will only show at the good width then hide itself when the screen width changes to a new range so that a new piece of code that does look good can take its place. How am I to do this?
My php code:
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"href="css/styleshexagon.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
//for Medium screen width
print"<div class = \" d-none d-md-block d-lg-none\"\>\n";
$numHexes=3;
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \">\n";
print" <span class=\"text\">XYZ</span>\n";
print" </div>\n";
}
for($i = 0;$i<$numHexes;$i++)
{
print"<div class=\"hexagon \" style = \"
margin-left:auto ;
margin-bottom: auto;
\">\n";
print" <span class=\"text\">XYZ</span>\n";
print"</div>\n";
}
print"</div>\n";
//for Small screen width
/*Code for that goes here*/
?>
</body>
</html>
My SASS code:
$hex-size: 300px;
$hex-height: $hex-size / sqrt(3);
$hex-color: #C6538C;
.hexagon {
position: relative;
display:inline-block;
width: $hex-size;
height: $hex-height;
background-color: $hex-color;
margin: $hex-height/2;
margin-left:auto;
margin-bottom:auto;
left:-10px;
}
.hexagon .text {
position: absolute;
top: -80px;
left: 0;
font: 12px sans-serif;
color: #ff00ff;
width: $hex-size;
height: $hex-height;
text-align: center;
overflow: hidden;
line-height: $hex-height;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: $hex-size/2 solid transparent;
border-right: $hex-size/2 solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: $hex-height/2 solid $hex-color;
}
.hexagon:after {
top: 100%;
left: 0;
width: 0;
border-top: $hex-height/2 solid $hex-color;
}
It seems your asking for a few different things here. Displaying only certain elements at certain screen sizes, and formatting elements so they are suitable for most if not all screen sizes.
#media (max-width: 700px) {
.mydiv {
width: 100%; /* adds full width to mydiv which is best for mobiles */
display: block; /* displays mydiv as a block */
}
.mydiv-2 {
display: none; /* Doesn’t display mydiv-2 at screen sizes upto 700px */
}
}
Note that you can use both max-width and min-width
Hope this helps!
One possible solution is to use the #media CSS rule Which can apply different styling based on different display media. In your case, to customize based on screen size you could use the min-width and max-width properties.
This example would hide someElement if the screen was smaller than 200 pixels wide.
#media min-width: 200px {
someElement {
display: none
}
}
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I am trying to make a log-in/register website, and it is all going well, but then when I came to do the nav bar.
EDIT: That works, but the nav bar buttons defined in the PHP code are not clickable.
index.php code
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
</head>
<header>
</header>
<body>
<nav id="menu">
<ul id="menu">
<li onclick="document.getElementById('content_box').src='pages/home.html'">Home</li>
<li onclick="document.getElementById('content_box').src='pages/videos.html'">Videos</li>
<li onclick="document.getElementById('content_box').src='pages/news.html'">News</li>
<?php
session_start();
if(isset($_SESSION['username']))
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/php/user.php" . ">Account</li>";
}
else
{
echo "<li onclick=" . "document.getElementById(" . "content_box" . ").src=" . "pages/accounts/login.html". ">Log In</li>";
}
?>
</ul>
</nav>
<iframe id="content_box" src="pages/home.html" style="border: none;"></iframe>
</body>
</html>
Stylesheet
#blue_dl_button {
width: 200;
height: 50;
background-color: 00cffc;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 00cffc;
border-radius: 0;
padding: 0;
margin 0;
float:left;
}
#green_dl_button {
width: 200;
height: 50;
background-color: 33CC00;
color: ffffff;
font-family: Tahoma;
font-size: 14;
border-color: 33CC00;
border-radius: 0;
padding: 0;
margin 0;
float: left;
}
#red_dl_button {
width: 200;
height: 50;
background-color: CC3300;
color: ffffff;
font-family: Tahoma;
font-feature-settings:
font-size: 14;
border-color: CC3300;
border-radius: 0;
padding: 0;
margin 0;
float:left
}
#header_image{
max-width: 100%;
width: auto;
height: auto;
}
header{
background-image: url("/header.png");
width: 100%;
padding: 169px 0px;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-position: center;
}
#content_box{
max-width: 100%;
width: 99.85%;
height: 100%;
}
ul#menu{
background-color: #00C1A7;
overflow: hidden;
font-family: Tahoma;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
ul#menu li{
display: inline-block;
padding: 20px;
}
ul#menu li:hover{
background: #00FFE1;
}
#news_title{
font-family: Tahoma;
font-size: 28;
}
#text{
font-family: Tahoma;
font-size: 18;
}
It ends up looking like https://puu.sh/9uVEy/5b39cb95e6.png
I am stumped as I have looked all over for a solution and could not find one!
Updated code with echo (PHP Bit only)
<?php
session_start();
if($_SESSION['username'])
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/php/user.php''>Account</li>";
}
else
{
echo "<li onclick='document.getElementById('content_box').src='pages/accounts/login.html''>Log In</li>";
}
?>
Your li item is in the php tag. You need to either echo it out, or push it out of the php coding. I would do it outside of it, since you use single as well double quotes within it.
Try
<?php
session_start();
if($_SESSION['username'])
{
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/php/user.php'">Account</li>
<?php
} else {
?>
<li onclick="document.getElementById('content_box').src='pages/accounts/login.html'">Log In</li>
<?php
}
?>
Also, it's $_SESSION not _$SESSION. I fixed that too.
Last but not least. Your file extention. You use the index.html file as readout. HTML files cant read the php code and won't accept your script within the <?php ?> tags. They will read over it, but won't execute it, because HTML won't do server side scriptwork. So in your case, simply change index.html to index.php and it should work fine.
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>';
?>