Can you please take a look at This Demo and let me know why I am not able to overly the div layer2 with yellow background on save level as other layer1 and Canvas?
Here is the code I have:
<div id="canvas-wrap">
<canvas id="myCanvas" width="500" height="500"></canvas>
<div id="layer1"></div>
<div id="layer2"></div>
</div>
#canvas-wrap {
position:relative;
width:500px;
height:500px
}
#canvas-wrap canvas {
position:absolute;
top:0;
left:0;
z-index:0
}
#layer1 {
width:500px;
height:500px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/c1f7a913-898d-44aa-ad4a-c73a9cbc5823_zpsb0a0136c.png');
background-repeat: no-repeat;
}
#layer2 {
position:relative;
height:100%;
width:100%;
background-color:yellow;
}
Thanks
is this fiddle what you want? you have a position and z-index issue
#canvas-wrap {
position:relative;
width:500px;
height:500px
}
#canvas-wrap #myCanvas {
position:absolute;
top:0;
left:0;
z-index:1;
}
#layer1 {
position: relative;
width:500px;
height:500px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/c1f7a913-898d-44aa-ad4a-c73a9cbc5823_zpsb0a0136c.png');
background-repeat: no-repeat;
z-index:10;
}
#layer2 {
top:0px;
position:absolute;
height:100%;
width:100%;
background-color:yellow;
}
It's because #layer1 is consuming the space over the canvas. #layer2 is pushing against the layer and can't move up.
So in order to have #layer2 overlay, you'd need to set its position:absolute; and top:0px, as in this demo: http://jsfiddle.net/8F2G8/6/
Related
How can I make this line(see picture) with CSS?
Using pseudo element as :after
div{
height:80px;
width:3px;
background:black;
border-radius: 23%;
position:relative;
}
div:after{
content:'';
height:3px;
width:170px;
background:black;
border-radius: 23%;
position:absolute;
top:47%;
}
<div></div>
No need complex code, one element and few CSS lines are enough:
.line {
width:200px;
height:100px;
border-left:5px solid;
background:linear-gradient(#000,#000) center/100% 5px no-repeat;
}
<div class="line">
</div>
Or like this:
.line {
width:200px;
height:100px;
padding:48px 0;
box-sizing:border-box;
border-left:5px solid;
background:#000 content-box;
}
<div class="line">
</div>
.line1 {
height:150px;
width:3px;
background:#000;
position:relative;
}
.line2 {
height:5px;
width:300px;
background:#000;
position:absolute;
/* following 2 code is excellent center for second line. */
top:50%;
transform:translateY(-50%);
}
<div class="line1">
<div class="line2"></div>
</div>
I have a problem with my website slider images. I set my slider wrap and slider inner frame width to 100% but when I change the screen size the images size does not change. Also I set the images width to max-width:100% and the height of them to auto.
#sliderFrame {
position:relative;
width:100%;
margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
width:1280px;height:auto;/* Must be the same size as the slider images */
border-radius: 6px;
}
#slider {
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
transform: translate3d(0,0,0);
box-shadow: 0px 1px 5px #999999;
}
#slider a.imgLink, #slider .video {
z-index:2;
cursor:pointer;
position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
#slider div.loading {
max-width:100%; height:auto;
background:transparent url(loading.gif) no-repeat 50% 50%;
filter: alpha(opacity=60);
opacity:0.6;
position:absolute;
left:0;
top:0;
z-index:9;
}
#slider img, #slider>b, #slider a>b {
position:absolute;
border:none;
display:none;
max-width:100%;
height:auto;
}
#slider div.sliderInner {
overflow:hidden;
-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position:absolute;
top:0;
left:0;
max-width:100%;
height:auto;
}
<div id="sliderFrame">
<div id="slider">
<img src="image/Index_1600x500.jpg" alt="#cap1"/>
<img src="image/Index_TrackerPnale_1600x500.jpg"/>
<img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
<img src="image/Index_Support.jpg" title="Support Team"/>
<img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
</div>
</div>
Your CSS doesn't really say much about your HTML - Also, we have no clue on what you really mean by slider - But follow this fiddle: https://jsfiddle.net/p3r1x5sj/ and see the very minimal CSS you're looking for.
#sliderFrame {
width:100%;
height:100px;
position:relative;
}
#sliderFrame #slider {
width:100%;
height:100%;
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
width:100%;
position:absolute;
top:0;
left:0;
}
The img tags are what you have to control. Also, unless you crop the images using overflow:hidden; on your outermost container, the images may be all different heights. In this case you may want to consider using divs with background-images
I want the div #under_child_above_parent under #child but above #parent and above #under_all. Is this possible with this HTML formatting? Because I need to have it formatted like this due to easier positioning of a complicated thing within child.
#under_all {
width:100%;
height:100px;
background-color:blue;
z-index:2;
}
#under_child_above_parent {
width:100%;
height:50px;
position:absolute;
left:0;
top:0;
color:white;
background-color:red;
z-index:3;
}
.objectwithinobject {
width:50%;
height:50%;
position:absolute;
left:25%;
top:100;
}
#parent {
background-color:green;
z-index:1;
}
#child {
background-color:grey;
color:yellow;
z-index:4;
}
<div id="under_all">
</div>
<div id="under_child_above_parent">
Has to go above #under_all (blue), under#parent (green) and under #child (grey).
</div>
<div id="parent" class="objectwithinobject">
<div id="child" class="objectwithinobject">
</div>
</div>
You could achieve this by removing the z-index:1; from #parent div.
#under_all {
width:100%;
height:100px;
background-color:blue;
z-index:2;
}
#under_child_above_parent {
width:100%;
height:50px;
position:absolute;
left:0;
top:0;
color:white;
background-color:red;
z-index:3;
}
.objectwithinobject {
width:50%;
height:50%;
position:absolute;
left:25%;
top:0px;
}
#parent {
background-color:green;
}
#child {
background-color:grey;
color:yellow;
z-index:4;
}
<div id="under_all">
</div>
<div id="under_child_above_parent">
Has to go above #under_all (blue), under#parent (green) and under #child (grey).
</div>
<div id="parent" class="objectwithinobject">
<div id="child" class="objectwithinobject">
</div>
</div>
I'd like the triangle shape at the foot of this page to be a solid colour with no transparency. Is this easy to achieve? I'm just not sure which element to target.
Here is my JSFiddle: http://jsfiddle.net/webtiki/fcLkW/9/
and my code :
css
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-45deg);
transform : rotate(-45deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(45deg);
transform : rotate(45deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}
html
<div class="out">
<div class="in"></div>
<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
</video>
</div>
Can someone assist?
Many thanks for any pointers :-)
I think I got what you want. Change your CSS code with this (JSFiddle code):
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
z-index:20;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-135deg);
transform : rotate(-135deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(315deg);
transform : rotate(315deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}
The thing that you have done is put the video as the top element and reduced the opacity to show items behind it.
what you would need to do is change the following 2 values on the bottom and left/right shapes.
z-index: 20;
opacity: 0.5;
After doing this though as the bottom 1 is a whole block, it covers the whole video, may have to rethink your shapes, or use an image overlay.
http://jsfiddle.net/fcLkW/21/
You need just set the triangle to top layer, because now the block "DIV.inn" is under video, and you see it through transparent video.
Change your code like:
CSS
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;
}
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
Is it not possible to have the left and right side of an element as overflow:hidden, and the top and bottom as overflow-visible?
Once I add hidden to either overflow property, they both get cut off from the outer container.
I'm trying this but no luck: http://jsfiddle.net/dmGXY/
<div id="outer" style="overflow-x:hidden;overflow-y:visible;">
<div id="left"></div>
<div id="top"></div>
</div>
<style>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#outer {
position:absolute;
top:70px;
left:100px;
width:300px;
height:200px;
border:solid 2px red;
}
</style>
You cant hide one and show the other however you can use another container as a "mask" to achieve the same effect
<div id="outer">
<div id="inner">
<div id="left"></div>
<div id="top"></div>
</div>
</div>
#left,#top {
position:absolute;
border:solid black 2px;
width:100px;
height:100px;
}
#left {
margin-left:-30px;
}
#top {
margin-left:100px;
margin-top:-30px;
}
#inner {
position:absolute;
top:70px;
left:0;
width:300px;
height:200px;
border:solid 2px red;
}
#outer {
position:absolute;
top:0;
left:100px;
width:304px;
height:100%;
border:solid 2px green;
overflow: hidden;
}
You can see the output here:
http://jsfiddle.net/LB2bg/