I am trying to put a graphic behind some text boxes and have all the items center aligned. The basic idea is teh graphic shows a specific area of interest, and teh boxes are used to determine specific events and color coded based on the stats, much like. a traditional dashboard.
Here is my layout:
The graphics would scale to fit the screen size so when projected on a large monitor it will fill the screen. I used classes since the graphics will be repeated just with different text. The text and background colors will ultimately be determined using variables, based on the reported values. Right now I am just trying to get teh layout to work as I want.
I tried a Flexbox but could not get the graphic behind the items in the flex box. I used a container set to 100% width but it does not resize when I move the browser and the arrow graphic moves out of alignment.
I’ve hardcoded in some parameters to see how the work, with the intention of only hardcoding items that have fixed position on the screen, I,i.e the black graphic. The White box color and text is changeable. I use an SVG since they scale well.
I can get everything to line up fine on my 14″ screen, but when I move it to a 24″ screen it doesn’t fill the screen, even with a refresh, and the black arrow (“LineofOperationArrow.svg”)is no longer aligned.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0 0 1em 0;
}
.container {
width: 100%;
height: 10%;
padding: 10px;
position: absolute;
top: 10%;
left: 20%;
}
.item {
width: 100px;
height: 100px;
padding: 10px;
background-color: rgb(255,255,255);
border: 2px solid black;
transform: translate(50%, -10%);
display: inline-block;
vertical-align: middle;
text-align: center;
;
border-radius: 15px;
box-sizing: border-box;
}
.item_LoO_Name {
width: 150px;
height: 150px;
padding: 10px;
background-color: black;
border: 2px solid black;
transform: translate(50%, -6%);
display: inline-block;
vertical-align: middle;
text-align: center;
color: white;
border-radius: 15px;
box-sizing: border-box;
}
.space {
width: 20px;
height: 100px;
padding: 10px;
/*transform: translate(50%, 50%);*/
display: inline-block;
vertical-align: middle;
text-align: center;
}
.logo{position:absolute;top:0;left:0;
z-index: -1;
transform: translate(-95%, 40%)}
</style>
</head>
<body>
<!-- <img src="LineofOperation.png"
width=90%
height= auto
position: absolute;
top: 10px;
left: 20%;>-->
<div class="container">
<div class="item_LoO_Name">LoO</div>
<div class="space"></div>
<div class="item">One</div>
<div class="space"></div>
<div class="item">One</div>
<div class="space"></div>
<div class="item">Two<br>Two</div>
<div class="space"></div>
<div class="item">Three<br>Three<br>Three</div>
<div class="space"></div>
<div class="space"></div>
<div class="item_LoO_Name">Outcome</div>
<div class="logo" style = "width: 100%; height: 80%;">
<img src="LineofOperationArrow.svg"; style = "width: 250%; height: 70%">
</div>
</body>
</html>