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>
Related
I tried z-index :-1 and position:absolute both didn't worked.
How to fix issue.
Are there any other alternatives for overlapping.
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0 (click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">
<div>
</div>
</div>
I'm using above code.
Div with id OverlapThisSection needs to be overlapped. I had set Div with name htmlMultiSelect to position:absolute
Div with id OverlapThisSection not getting overlapped by another Div above to it.
Update 1:
Currently I'm getting view as below.
Actually I'm using primeng dropdown inside OverlapThisSection div.
<p-dropdown> not getting overlapped by it's top div.
How to fix this issue.
I see this 2 different divs, so you can use position:absolute; and top:20px; to the second div.
#OverlapThisSection {
margin: 10px;
position: absolute;
top: 30px;
background-color: green;
}
<div *ngIf="allFiltersData.length > 0">
<div style="width: 100%; height:50px;">
<div id="{{controls.fieldName}}_Text" style="border-style: groove;font-style: 14px;border-radius:3px;height: 100%;word-wrap: break-word;padding-left:10px;padding-top:4px;padding-bottom: 4px;font-size: 14px;color:#333333;vertical-align: middle;" tabindex=0
(click)="showList(controls.fieldDisplayName)" class="accordion">Select {{controls.fieldDisplayName}}</div>
<div name='htmlMultiSelect' style="overflow:auto;border-style: groove;width: 300px;background-color: white; position: absolute;height:auto;max-height: 200px; white-space: nowrap;display: none;" id="{{controls.fieldDisplayName}}">
<div style=" padding-left: 10px;padding-top: 10px;padding-bottom: 20px;">
<input type="checkbox" (click)="selectAllForMultiSelect(controls,$event,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;" id="{{controls.fieldName}}_SelectAll">
<input name="{{controls.fieldName}}" (keypress)="multiSelectSearch($event,tab.name,controls)" id="{{controls.fieldDisplayName}}_{{tab.name}}_Search" style="width: 200px;height: 30px;vertical-align:middle;" type="text">
</div>
<div name="customMultiSelectItems" style="padding-top: 5px;padding-left: 10px;" *ngFor="let val of fetchFilterValues(controls.fieldName,true)">
<input type="checkbox" (click)="setSelectedData(controls.fieldControlType, controls.fieldName, {id:val.value.id,name:val.value.name},controls.dependentFilterName,$event,controls.fieldDisplayName,tab.name)" style="width: 20px;height: 20px;vertical-align:middle;"
id="{{val.value.id}}_{{controls.fieldName}}_{{tab.name}}" name={{val.value.name}}_{{controls.fieldName}}_{{tab.name}}>
<label tabindex=0 style="font-size:14px;color: #333333;vertical-align:middle;" for={{val.value.id}}_{{tab.name}}> {{val.value.name}}</label>
</div>
<br>
</div>
</div>
</div>
<div id="OverlapThisSection" style="position:absolute">Second div content
<div>
</div>
</div>
Or another simple example, you don't have to use z-index for this:
.first {
height: 100px;
width: 100px;
background-color: red;
}
.second {
margin: 10px;
position: absolute;
top: 10px;
height: 80px;
width: 80px;
background-color: green;
}
<div class="first">
</div>
<div class="second">
</div>
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>
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
i want programming slideshow by CSS3
this my code HTML
<div id="slideshow">
<img src="img/s1.jpg" alt="s1" />
<img src="img/s2.jpg" alt="s1" />
<img src="img/s3.jpg" alt="s1" />
</div>
<div class="next">
<img src="img/next.png" />
</div>
<div class="prev">
<img src="img/prev.png" />
</div>
and this code CSS3
.slideshow{
width: 1020px;
height: 500px;
border-bottom: 3px solid #f04831;
border-top: 3px solid #f04831;
overflow: hidden;
}
i want change place the icon "next" and "preview" to like control slideshow
You can do it with a increment counter and a simple getDocumentById. And if you want your images not to show you can comment or uncoment display: none; on CSS, however you like. Here is the fiddle:
document.getElementById('btnnext').onclick = myFunction;
// If the user clicks in the window, set the background color of <body> to yellow
var counter = 0;
function myFunction() {
var div = document.getElementById('slideshow');
var img = div.getElementsByTagName('img')[counter].src;//.childNodes[2];
document.getElementById("imgprev").src=img;//document.getElementById("imgprev").src;
counter++;
if (counter==3) counter = 0;
}
#slideshow{
/*width: 1020px;
height: 500px;
border-bottom: 3px solid #f04831;
border-top: 3px solid #f04831;
overflow: hidden;
visibility:hidden;*/
display: none;
}
<div id="slideshow">
<img src="https://medium.com/img/email/fb_logo.png" alt="s1" />
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" alt="s1" />
<img src="http://welcome.hp-ww.com/country/us/en/cs/images/i/header-footer/caas-hf-v3/hp-logo.gif" alt="s1" />
</div>
<div id="btnnext" class="next">
<img src="http://www.drollify.com/wp-content/uploads/2015/03/button-play.png" />
</div>
<div class="prev">
<img id="imgprev" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Img_blank.png" />
</div>
Problem
I'm trying to position an color block/overlay background: rgba(34, 34, 34, 0.73); on top of an image when it is hovered over.
Tried using z-index to push the overlay to the front as it seems to be sitting behind the image, while I have a feeling that my positioning position: relative may be the problem, changing it to position: absolute has made the overlay jump way out of position.
I've looked into the previously posed questions and haven't had too much luck.
Github repo for Angular project: https://github.com/onlyandrewn/angular
home.html
---
name: home
url: /
---
<div ng-controller="MainCtrl">
<header>
<p class="sponsored" id="top">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<input type="search" placeholder="What are you looking for?" ng-model="query">
</div><!-- /.find -->
</header>
<div class="businesses">
<div class="storeIcon">
<img src="/assets/img/store.png" class="store" alt="">
</div><!-- /.storeIcon -->
<p class="number">Search {{businesses.length}} businesses in Brandon</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="all">
<div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query | orderBy:'name'" >
<div class="overlay">
<img src="http://placehold.it/300x300" class="storefront" alt="">
</div><!-- /.overlay -->
<div class="info">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
{{business.website}}
</div><!-- /.info -->
</div>
</div>
<footer>
<hr>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<div class="backContainer">
<p class="back">Back to top</p>
</div><!-- /.backContainer -->
</footer>
</div>
custom.scss (Code snippet, for brevity)
/*----------------------------------
OVERLAYS
----------------------------------*/
.overlay {
background: rgba(34, 34, 34, 0.73);
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
opacity: 0;
&:hover {
opacity: 1;
}
}
.storefront {
position: relative;
}
Take a look at this, I've done a little example which shows you how to do an overlay in CSS. Hope this helps you out.
If you want to add an image instead of just changing the opacity or overlaying with colour. Just add this line into the #overlay:hover
background-image: url("imagePath");
Also remove the opacity, as you don't need to change the opacity if you want to use a image
Example:
div { position: relative; float: left; }
img { display: block; }
#background { background: red; }
#background:hover img { opacity: 0.5; }
#overlay span {
background: red;
bottom: 0;
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#overlay:hover span { opacity: 0.5; }
<!-- Uses background color to fade color from behind. -->
<div id="background">
<img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>
<!-- Uses empty span to overlay color. -->
<div id="overlay">
<span></span>
<div>
You can achieve what you want without changing your markup:
.overlay {
position: relative;
width: 300px;
height: 300px;
}
.overlay:hover:after {
content: '';
width: 100%;
height: 100%;
background: rgba(34, 34, 34, 0.73);
position: absolute;
left: 0;
}
<div class="overlay">
<img src="http://placehold.it/300x300" class="storefront" alt="" />
</div><!-- /.overlay -->
The reason your current overlay doesn't work is because your image is a child element of overlay. You can think of the img element as sitting on top of it's parent (.overlay). It isn't possible for the parent to sit on top of its child elements.