I am using w3-css and bog-standard css.
I have a png of a word: INSPIRE, whose lettering is transparent. Behind the letters are coloured rectangles. In front of the coloured rectangles are white rectangles that give the impression of the INSPIRE letters being filled up, depending on how high the rectangles reach. The example (under the link) has the white rectangles set to 50% height. In the original, these heights are determined by numbers pulled from a database and not set the way they are in the script.
The filling of the INSPIRE happens thus:
There is a 'w3 div' called w3-third, within this sits another div called w3-card, within this is an ordinary div - styled in the header - called back and within this sits the divs for each letter block and finally the div for the INSPIRE png. I make use of z values so the png sits on top.
I cannot for the life of me get the INSPIRE image to sit centrally within the w3-card div.
If I could wave a magic wand then I would 'center' the #back div. I've tried setting a width...
#back {
position: absolute;
width: 294px;
margin: 0 auto;
z-index: 0;
}
But it makes no difference.
Please, please help before my head explodes...
Below is the full page code for the link:
<html>
<head>
<title>
INSPIRE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
#back {
position: absolute;
width: 294px;
margin: 0 auto;
z-index: 0;
}
#behindI {
position: absolute;
left: 0px;
z-index: 1;
}
#behindN {
position: absolute;
left: 33px;
z-index: 1;
}
#behindS {
position: absolute;
left: 80px;
z-index: 1;
}
#behindP {
position: absolute;
left: 113px;
z-index: 1;
}
#behindII {
position: absolute;
left: 160px;
z-index: 1;
}
#behindR {
position: absolute;
left: 200px;
z-index: 1;
}
#behindE {
position: absolute;
left: 247px;
z-index: 1;
}
#front {
position: absolute;
z-index: 3;
}
#myCanvasI {
z-index: 2;
}
</style>
<script>
var i = 0.5;
var n = 0.5;
var s = 0.5;
var p = 0.5;
var ii = 0.5;
var r = 0.5;
var e = 0.5;
</script>
</head>
<body>
<div class="w3-third">
<div class="w3-card-2 w3-padding-top w3-black w3-center" style="min-height:460px">
<h3>Characteristics of Learning</h3><br>
<p>How are you doing in each area? </p>
<p>Are you the full INSPIRE? </p>
<div id="back">
<div id="front">
<img src="images/fullinspire33.png" />
</div>
<div id="behindI">
<canvas id="myCanvasI" width="33" height="33">
<script>
var z=document.getElementById("myCanvasI");
var ctx=z.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,33,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,33,33*i);
ctx.stroke();
</script>
</canvas></div>
<div id="behindN">
<canvas id="myCanvasN" width="47" height="33">
<script>
var y=document.getElementById("myCanvasN");
var ctx=y.getContext("2d");
ctx.fillStyle="orange";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*n);
ctx.stroke();
</script>
</canvas> </div>
<div id="behindS">
<canvas id="myCanvasS" width="33" height="33">
<script>
var x=document.getElementById("myCanvasS");
var ctx=x.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,33,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,100,33*s);
ctx.stroke();
</script></canvas></div>
<div id="behindP">
<canvas id="myCanvasP" width="47" height="33">
<script>
var w=document.getElementById("myCanvasP");
var ctx=w.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*p);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindII">
<canvas id="myCanvasII" width="40" height="33">
<script>
var v=document.getElementById("myCanvasII");
var ctx=v.getContext("2d");
ctx.fillStyle="blue";
ctx.fillRect(0,0,40,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,40,33*ii);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindR">
<canvas id="myCanvasR" width="47" height="33">
<script>
var u=document.getElementById("myCanvasR");
var ctx=u.getContext("2d");
ctx.fillStyle="indigo";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*r);
ctx.stroke();
</script>
</canvas>
</div>
<div id="behindE">
<canvas id="myCanvasE" width="47" height="33">
<script>
var t=document.getElementById("myCanvasE");
var ctx=t.getContext("2d");
ctx.fillStyle="violet";
ctx.fillRect(0,0,47,33);
ctx.stroke();
ctx.fillStyle="white";
ctx.fillRect(0,0,47,33*e);
ctx.stroke();
</script>
</canvas>
</div>
</div>
</div>
</div>
</body>
</html>Just add another div that wraps the div with id black like this
<div style="
display: inline-block;
width: 295;
height: 35px;
margin: auto;
">
<div id="back"> you stuff in this div </div>
</div>
Just in case you want to keep your div with id black as position:absolute;
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments