I'm using cross slide script.
The problem is I can't move the div to the background: slideshow overlapping all other divs. Tried to change z-index: Set z-index 0 to background div, and z-index:2 to all other divs. Still no success. Is there anyway to apply slideshow to the background div?
My css strcture looks like that
<body>
<div id="bg">
"all stuff goes here"
</div
</body>
And css for #bg
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
Set css to:
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#test {
position: relative;
background-color: red;
z-index:5;
width: 120px;
margin-top:5px;
}
and html to:
<body>
<div id="bg"></div>
<div id="test">"all stuff goes here"</div>
</body>
Also see my jsfiddle.
Take it to the background with z-index: -1
instead of making z-index:0 or -1 to your "bg" id, make all other content z-index to 99 or more than that. so your "bg" will be back of your slides.
Do you observe the (complex) rules for stacking contexts, positioning, and z-index correctly?
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context
Related
If I have the following markup:
<div class="video-wrapper">
<iframe src="link/to/video" frameborder="0"></iframe>
</div>
and styling:
.video-wrapper {
height: 100vh;
width: 100vw;
}
How do I get the video to display full width and height in the div, without having it have those black bars on the top and/or sides, regardless of aspect ratio?
Something like this:
.video-wrapper {
position:relative;
padding-bottom:56.25%; /* aspect ration for 16:9 */
/*padding-top: 20px;*/ /* you can add padding-top if needed */
height:0;
overflow:hidden;
}
.video-wrapper iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
This will keep responsive your video for all screens.
Add class to frame tag
<div class="video-wrapper">
<iframe class="vid" src="link/to/video" frameborder="0"></iframe>
</div>
then in CSS upscale it using transform property and hide the overflow on video-wrapper class
.video-wrapper{
overflow:hidden;
}
.vid{
transform: scale(2.5);
}
I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.
Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Heres my JS FIDDLE
HTML
<div class="wrapper">
<center>
<div class="imgWrapper">
<img src="http://lorempixel.com/500/300/">
</div>
</center>
</div>
CSS
.wrapper {
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
display:inline-block;
margin-top:100px;
}
.imgWrapper img {
width:100%;
}
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).
DEMO
This will do it for you https://jsfiddle.net/eaxe2sww/4/
.wrapper {
position: relative;
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
}
I want the child div width to be 100% of the body.
CSS
#container {
position:relative;
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:30px;
background:blue;
}
HTML
<div id="container">
<div id="inner"></div>
</div>
Here is the fiddle
I'm using position:relative for parent div and the position:absolute; solution is not working. How can I do this? Js solutions are acceptable.
Check this fiddle
CSS
body {
margin-top:30px;
}
#container {
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:20px;
background:blue;
position:absolute;
right:0;
left:0;
}
You just have to remove the position:relative from the container div and everything will work as expected
AND
I dont think there is a need for writing JS for this as this can be just obtained using CSS.
In html, if you have an element inside of a container while using % it will respect the containers boundaries.
So, no sure why Lal was downvoted. but his solution works.
Especially because your container is relative, the absolute container will be absolute to the container and not the body itself. You could remove position: relative; on the container and it will work that way, but it depends on what you want to do.
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
I am a very new web developer. I am currently coding a simple wordpress landing page and I wanted to add some functionality to darken and add text when the user hovers the mouse over said image. It truly should be something quite simple.
For an example that actually implements the same wordpress theme and does it right.
in the "about us" section of the page above, they have pictures that have the exact same functionality I need for hovering, yet I have no idea how they did this.
If you need any more clarification, please do not hesitate to ask, I am not sure if my lexicon is correct/clear at all.
DEMO
Just show the white background element with opacity and the content element when wrapper is mouse over. Note that you need to you need to separate the content from the background element so the background's opacity won't effect the content.
<div class="wrap">
<div class="content">This is the content</div>
<div class="bkg"></div>
</div>
.wrap {
background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
width:475px;
height:365px;
position:relative;
}
.wrap:hover .bkg {
display:block;
}
.wrap:hover .content {
display:block;
}
.bkg {
background:#fff;
opacity:0.5;
position:absolute;
width:100%;
height:100%;
display:none;
z-index:1;
filter: alpha(opacity=50);
}
.content {
width:100%;
height:100%;
display:none;
z-index:3;
position:absolute;
}
This is a css transition on hover.
See a live demo here
Here is the setup html:
<div class="container">
<div class="bottom-layer"></div>
<div class="overlay">
<h2>Hi there!</h2>
</div>
</div>
The container has a positioned overlay that fades in over the bottom layer content.
Here's the driving css:
.container,
.bottom-layer,
.overlay {
height: 100px;
width: 200px;
}
.container {
position: relative;
}
.bottom-layer {
background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(255,255,255, .1);
transition: opacity 0.6s;
}
.container:hover .overlay {
opacity: 1;
}
The two important parts are the positioning and the transition. The overlay has to be absolutely positioned to render over the element on the same level (its "sibling"). We set the opacity to 0, but set it to 1 when the parent is overlayer.
Then, we just tell it to run a transition whenever the opacity changes..