overlay footer over div - javascript

I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>

<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)

Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}

Related

How to place div inside a div over another div?

I have a div, which has an image inside another div. I would like to place the inner div over the second div. So the arrow in the image below should go over the red. Is this possible?
.puscicaAnimacija {
bottom: -2%;
height: 5%;
margin-bottom: -10px;
z-index: 2;
position: absolute;
}
<div class="first">
<div style="display: flex; justify-content: center;">
<img src="https://via.placeholder.com/100" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
You should put position:relative on the second div that refers to the .puscicaAnimacija class, then using the property z-index on the second element with an higher value than in the first.
.puscicaAnimacija{
position: relative;
}
.second{
position: absolute;
z-index: 3;
}
Note:
I've converted a few of your classNames to use named classes as well as added some additional CSS for demonstration purposes
Perhaps try something like this:
.first {
background: navy;
width: 300px;
height: 100px;
position: relative;
}
.ontop {
background: whitesmoke;
width: 300px;
height: 50px;
position: absolute;
bottom: 0;
}
.second {
background: red;
width: 300px;
height: 50px;
}
.puscicaAnimacija {
bottom: -40%;
left: 10%;
height: 48px;
position: absolute;
}
<div class="first">
<div class="ontop">
<img src="https://cdn-icons-png.flaticon.com/512/159/159119.png" class="puscicaAnimacija" />
</div>
</div>
<div class="second">
</div>
In order to use z-index the parent element must be positioned. Use position:relative on the div you want to go under.

Particle js hiding web elements below it

I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link
You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>

Need to change position of element on slideToggle

$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>

Page layout setup

I'm looking on Cnet's homepage and they have a cool over-lapping setup right now. Click to see their homepage.
How exactly is this done?
I tried to figure it out, but I can't quite think of how to do it. Within my example the green would be the ad part on the Cnet homepage (with Zebras).
#blue, #green, #red {
height: 500px;
width: 100%;
}
#blue {
background: blue;
z-index: 1;
}
#green {
background: green;
position: fixed;
margin-top: 200px;
}
#red {
background: red;
z-index: 1;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
Heres a codepen
<div class="root">
<div class="content">
<div id="green">
<label>ADD GOES HERE</label>
</div>
<div class="scroll">
<div id="blue"></div>
<div id="red"></div>
<div id="yellow"></div>
</div>
</div>
</div
css:
.content {
position: relative;
.scroll {
height: 500px;
overflow-y: scroll;
}
#blue,
#green,
#red,
#yellow {
height: 500px;
width: 100%;
}
#blue {
background: blue;
}
#green {
position: absolute;
top: 0;
z-index: -1;
background: green;
}
#red {
background: red;
margin-top: 500px;
}
#yellow {
background: yellow;
margin-top: 500px;
}
}
theres room to improve but the gist is that the advertisement (green div) is positioned absolutely on the same level as a div that wraps your scrollable items.

How to keep an image at 50% of the page and containing its height

I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.

Categories