Unable to send canvas div to front - html

Question is very simple becuase there is sample markup which is showing a problem.
How can i make input type="file" clickable in following example? I tried to work with z-index but it seems to do nothing here.
<html>
<div style="z-index: 0">
<img src="#" width="350" style="position: absolute;" />
<canvas width="350" style="border: thick; position: absolute"></canvas>
</div>
<div style="z-index: 10">
<input type="file" />
</div>
</html>


You need to set position with z-index, or it will not work.
// HTML
<div class="canvas">
<img src="#" width="350" />
<canvas width="350"></canvas>
</div>
<div class="file">
<input type="file" />
</div>
// CSS
.canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.file {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
http://codepen.io/paulcredmond/pen/yakkkY

Related

How to add green box under image slider in wordpress?

I have a wordpress site and I am using the spacious theme. And what I want to archive is just a green box under de image slider. So the code of the image slider is like this:
<section id="featured-slider">
<div class="slider-cycle" style="height: 465.922px;">
<nav id="controllers" class="clearfix">
<a class="active"/>
<a class=""/>
<a class=""/>
<a class=""/>
<a class=""/>
</nav>
<div class="slides displayblock cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
<figure>
<img class="lazy loaded" width="1500" height="655" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/doe-mee-2/" title="">Doe mee</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4950" height="2162" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/steun-ons/" title="">Steun ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4350" height="1899" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/" title="">Verbind op locatie of thema</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4799" height="2095" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/word-lid/" title="">Word lid en één van ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4200" height="1834" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/evenementen/" title="">Evenementen >>> agenda</a>
</div>
</div>
</div>
</section>
And I try it with css like this:
#featured-slider img {
border-bottom: 70px solid #72BF44;
width: 1067x;
height: 466px;
}
But this is not the correct way. Because the images are transforming. And also the greenbox takes space from the images.
And I also want to have some text in the green box.
So I have added a image how it have to look like.
With the text in the green box. And I am using the Guttenberg layout for editing the pages.
if I do it with the option: "Custom HTML" in the Gutenberg page.
It already looks better. But how to make this full width. Like the images above?
There is a class inner-wrap:
<div class="inner-wrap">
<div id="primary">
<div id="content" class="clearfix">
<div style="background:#72BF44;height:70px;width: 100%;"></div>
</div>
with the css:
.inner-wrap {
width: 94%;
}
.inner-wrap {
margin: 0 auto;
max-width: 1218px;
}
So how to overrule the inner-wrap, so that the greenbox has the full widht of the images?

Add an "Custom HTML" block with this content:
<div style="background:#72BF44;height:70px"></div>

How do I get these canvases to align properly?

I am trying to display the three canvases over one another, but they just display beside each other. I have very little experience with css. What do I need to add?
<body>
<div id="canvas_container">
<canvas id="Background" width="330" height="330"></canvas>
<canvas id="mycanvas" width="330" height="330"></canvas>
<canvas id="Overlay" width="330" height="330"></canvas>
</div>
<style>
.canvas_container {
position: relative;
}
.container > canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="codeinput">
<br>
The "X" goes here:<input type="text" id="shapeX">
<br>
The "Y" goes here:<input type="text" id="shapeY">
<br>
Choose the color: <input type="text" id="shapeColor" value="green">
<script>
unrelated javascript
</script>
<br>
<button onclick=makeSquare();>Draw shape</button>
</div>
</body>

Your css ok but you set wrong selector. You has id = canvas_container but set styles for class canvas_container and class container
#canvas_container {
position: relative;
width: 330px;
height: 330px;
}
#canvas_container > canvas {
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
}
<div id="canvas_container">
<canvas id="Background" width="330" height="330"></canvas>
<canvas id="mycanvas" width="330" height="330"></canvas>
<canvas id="Overlay" width="330" height="330"></canvas>
</div>
<div id="codeinput">
<br>
The "X" goes here:<input type="text" id="shapeX">
<br>
The "Y" goes here:<input type="text" id="shapeY">
<br>
Choose the color: <input type="text" id="shapeColor" value="green">
<br>
<button onclick=makeSquare();>Draw shape</button>
</div>

How to place <span overlay text vertically over an image?

I have a few images below each other in a page and want to add span overlay text over an image vertically instead of horizontally.My current code shows(on iPhone screen) the span overlay text horizontally but I want to display it vertically and readable from bottom to top.Hope you guys help me. Thanks
<html>
<head>
<style>
</style>
<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>
</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>

You really need to start using CSS outside of your HTML inline style writing, among other things.
Read here why inline transform didn't work for you:
CSS transform doesn't work on inline elements
I have set your position to position: absolute;
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="
transform: rotate(270deg);
position: absolute;
top: +90px;
z-index: 3;
background-color:white;
line-height:50px"> SOLD OUT </span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------

Css transforms Css Transforms and transform origin couldn't hurt either Transform Origin here is a quick example.
.wrapper{
height: 500px;
width: 500px;
position:relative;
background: rgb(220,220,220);
}
.wrapper span{
position:absolute;
top:100px;
left: 20px;
font-size: 20px;
font-weight: bold;
/*important part below*/
transform: rotate(-90deg);
transform-origin: top left;
}
<div class="wrapper">
<span>Sold Out</span>
</div>
So using your code it would be something like:
<html>
<head>
<style>
</style>
<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>
</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">Sold Out</span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>

Z-index issue with Canvas, Iframe and Div

I would like to have the iframe on bottom, canvas in the middle and some div on top.
This is what I have:
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, currently the canvas in on top of both iframe and commentDiv div.
I made some changes:
<canvas id="drawLineCanvas" style="position: absolute; z-index: -1; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="z-index: -2;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, now while div is on top of canvas, the iframe is also on top of canvas.
Any tips on on how to solve this?

Here is the layout you want. Try this.
<div name="commentDiv" id="commentDiv" style=" z-index: 1;">this is div</div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;display:block"></canvas>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>

Using position:absolute I can get what I want to happen.
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="position: absolute; z-index: -1;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>

Browser Compatibility

My code works fine in Chrome, however when I run it in Firefox, there is a problem. My webpage has 2 roman style columns ( each column consists of 2 images, a top and a bottom )that run vertically from the bottom of the header to the top of the footer. But in Firefox they stop about 30px from the top of the footer, leaving a gap.
My code does not include any vender prefixer's, but when I ran my CSS through Autoprefixer.com it did not add any either. Here is the code that seems to be affected.
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>
/*Roman Columns*/
#col_topleft {position: absolute;
top: 220px;
left: 25px;
}
#col_topright {position: absolute;
top: 220px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 640px;
left: 25px;
}
#col_bottright {position: absolute;
top: 640px;
right: 25px;
}

This should fix the problem.
First add a div with position:relative than drop your content inside that div
<div style="position:relative;">
<div style="position:absolute"> <!-- your content div -->
</div>
</div>